low-altitude-web/src/views/home/cpns/FloatPanelTsjsGis.vue

<template>
	<div class="panel-tsjs-gis" :class="{ collapse: layoutStore.rightCollapse }">
		<div class="options">
			<div class="switch" v-for="item in optionList" @click="toggleOption(item)">
				<span>{{ item.label }}</span>
				<i :class="{ on: item.status }"></i>
			</div>
		</div>
	</div>
</template>

<script setup>
import useLayoutStore from '@/store/layout'
import { AddSingleLayer, toggleMoveCube, toggleMovePath } from '@/utils/map/addLayer'
import { onBeforeUnmount, ref } from 'vue'

const layoutStore = useLayoutStore()

const optionList = ref([
	{ label: '航线', id: 'airLine', status: false },
	{ label: '网格', id: 'mesh', status: false },
	{ label: '建筑物', id: 'buildings', status: false },
])

function toggleBuildings(status) {
	AddSingleLayer({
		title: '全市白模',
		D_CODE: 'D85030103202409',
		id: 'D8503010320240901',
		url: 'https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/ptgl/05195418',
		visible: status,
		opacity: 1,
		type: 'scene',
	})
	AddSingleLayer({
		title: '五角场精模',
		D_CODE: 'D9999990120241225',
		id: 'D9999990120241225',
		url: 'https://cimweb.zjw.sh.cegn.cn:2008/MapProxyApi/getSceneServer/gxjh_fwjk/D9999990120241225',
		visible: false,
		opacity: 1,
		type: 'scene',
	})
}

function toggleOption(item) {
	item.status = !item.status

	switch (item.id) {
		case 'airLine':
			toggleMovePath(item.status)
			break
		case 'mesh':
			toggleMoveCube(item.status)
			break
		case 'buildings':
			toggleBuildings(item.status)
	}
}

function clearStatus() {
	toggleMovePath(false)
	toggleMoveCube(false)
	toggleBuildings(false)
}

onBeforeUnmount(() => {
	clearStatus()
})
</script>

<style lang="scss" scoped>
.panel-tsjs-gis {
	position: absolute;
	right: var(--panel-left);
	bottom: calc(var(--footer-height) - var(--aside-height));
	background-color: rgba(0, 17, 50, 0.5);
	border: 1px solid #055f8d;
	border-radius: 5px;
	visibility: visible;
	transition:
		right 0.5s ease,
		opacity 0.3s ease,
		transform 0.3s ease-out;

	&.collapse {
		right: var(--panel-gap);
	}
}

.options {
	padding: 15px;
	.switch {
		display: flex;
		align-items: center;
		width: fit-content;
		cursor: pointer;
		&:not(:last-child) {
			margin-bottom: 7px;
		}
		span {
			display: block;
			width: 55px;
			margin-right: 15px;
			font-size: 18px;
			text-align: right;
		}
		i {
			display: block;
			width: 76px;
			height: 35px;
			background: url('@/assets/images/buttons/switch-off.png');
			background-repeat: no-repeat !important;
			background-size: cover !important;
			transition: all 0.1s ease;

			&.on {
				background: url('@/assets/images/buttons/switch-on.png');
				background-position: -8px center;
			}
		}
	}
}
</style>