<script setup lang="ts"> import {Menu} from "@vicons/ionicons5"; import {useLayerStore} from "@/store/layerManagerStore.ts"; import {ref} from "vue"; let layerShow = ref(true) let layer: {name:string,id:string} = { name:'', id:'' } let itemOptions = [ {label: "移除图层", key: 'remove'}, {label: "缩放至图层", key: 'lookAt'}, {label: "移至顶层", key: 'moveTop'}, {label: "移至底层", key: 'moveBottom'}, ] function handleLayerItem(key:any) { useLayerStore().Layers.forEach((layer) => { if (layer.lName == props.lname && layer.lId == props?.lid) { switch (key) { case 'remove': { if(layer.dataSource){ layer.dataSource.then((ds)=>{ window.viewer.dataSources.remove(ds) }) } if(layer.imageLayer){ window.viewer.imageryLayers.remove(layer.imageLayer) } break } case 'lookAt': { if(layer.dataSource) window.viewer.flyTo(layer.dataSource) if(layer.imageLayer) window.viewer.flyTo(layer.imageLayer) break } case 'moveTop': { //TODO: break } case 'moveBottom': { // TODO: break } } } }) } const props = defineProps<{ lname: String, lid?: String }>() function onCheck(checked: boolean) { useLayerStore().Layers.forEach((layer) => { if (layer.lName == props.lname && layer.lId == props?.lid) { if(checked){ // 选中事件 if(layer.dataSource) { // dataSource视Promise对象 layer.dataSource.then((ds)=>{ ds.show = true }) } if(layer.imageLayer) layer.imageLayer.show = true window.viewer.flyTo(layer.dataSource); } else{ //取消选中 隐藏图层 if(layer.dataSource) { layer.dataSource.then((ds)=>{ ds.show = false }) } if(layer.imageLayer) layer.imageLayer.show = false window.viewer.scene.requestRender() layer.show = false } } }) layerShow.value = !layerShow.value } </script> <template> <n-row justify-content="space-between" style="align-items: center; border-bottom: 1px solid #e7e6e6"> <n-checkbox size="medium" :label="props.lname" style="margin: 0 0 0 1rem;" :checked="layerShow" @update:checked="onCheck"/> <n-dropdown :options="itemOptions" @select="handleLayerItem"> <n-button tertiary type="success" size="medium"> <template #icon> <n-icon><Menu/></n-icon> </template> </n-button> </n-dropdown> </n-row> </template> <style scoped> </style>