feature: 增加图层管理组件及相关逻辑（目前仅支持DataSource 和 ImageryLayer 的管理
parent
bb042154cd
commit
666dc130e2
@ -1,5 +0,0 @@
|
||||
export default class Airline {
|
||||
constructor(points) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
<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>
|
||||
@ -0,0 +1,30 @@
|
||||
import {defineStore} from "pinia";
|
||||
type layer = {
|
||||
lName: string
|
||||
lId: string
|
||||
dataSource?: any
|
||||
imageLayer?: any
|
||||
show: boolean
|
||||
}
|
||||
|
||||
export const useLayerStore = defineStore('LayerStore', {
|
||||
state: ()=>{
|
||||
return {
|
||||
Layers: [] as layer[]
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addLayer(lName: string,dataSource?:any,imageLayer?: any,show=true) {
|
||||
let time = new Date()
|
||||
|
||||
let layer: layer = {
|
||||
dataSource: dataSource,
|
||||
imageLayer: imageLayer,
|
||||
lId: time.getTime().toString(),
|
||||
lName: lName,
|
||||
show: show
|
||||
}
|
||||
this.Layers.push(layer)
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue