|
|
<!--
|
|
|
文件描述：Cesium地图的图层管理器组件
|
|
|
创建时间：2025/3/4 11:25
|
|
|
创建人：Zhaipeixiu
|
|
|
-->
|
|
|
<script setup lang="ts">
|
|
|
import {ArrowBackOutline} from "@vicons/ionicons5"
|
|
|
import LayerItem from "@/components/LayerItem.vue";
|
|
|
import { darkTheme } from 'naive-ui'
|
|
|
import {ref} from "vue";
|
|
|
import {useLayerStore} from "@/store/layerManagerStore.ts";
|
|
|
|
|
|
defineExpose({
|
|
|
open_closeSidebar: ()=>{
|
|
|
// 获取侧边栏元素
|
|
|
let sidebar = document.querySelector('.LayerManagerSidebar');
|
|
|
if(sidebar?.classList.contains('open')){ //关闭侧边栏
|
|
|
sidebar?.classList.remove('open');
|
|
|
}
|
|
|
else { // 打开侧边栏
|
|
|
sidebar?.classList.add('open');
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
|
|
|
function closeBar() {
|
|
|
let sidebar = document.querySelector('.LayerManagerSidebar');
|
|
|
sidebar?.classList.remove('open');
|
|
|
}
|
|
|
let showWmsModal = ref(false);
|
|
|
let wmsConfig = {
|
|
|
url: ''
|
|
|
}
|
|
|
function addWMSLayer(){
|
|
|
window.measureViewer.AddWMSLayer(wmsConfig.url)
|
|
|
}
|
|
|
//清空图层
|
|
|
function clearLayers(){
|
|
|
useLayerStore().Layers.forEach(layer=>{
|
|
|
window.viewer.imageryLayers.remove(layer?.imageLayer,true)
|
|
|
window.viewer.dataSources.remove(layer?.dataSource,true)
|
|
|
if(layer.entity.length>0){
|
|
|
layer.entity.forEach(entity=>{
|
|
|
window.viewer.entities.remove(entity)
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
window.viewer.scene.requestRender()
|
|
|
useLayerStore().clearLayers()
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
<n-config-provider :theme="darkTheme">
|
|
|
<n-layout class="LayerManagerSidebar">
|
|
|
<n-layout-header>
|
|
|
<n-row justify-content="space-between"
|
|
|
style="margin-bottom:.5rem; border-bottom:solid 1px #dcd9d8">
|
|
|
<h2 style="margin: .3rem 1rem" >图层管理</h2>
|
|
|
<n-button style=" margin: .6rem" @click="closeBar" size="tiny" type="error">
|
|
|
<template #icon>
|
|
|
<n-icon><ArrowBackOutline/></n-icon>
|
|
|
</template>
|
|
|
</n-button>
|
|
|
</n-row>
|
|
|
</n-layout-header>
|
|
|
<n-layout-content>
|
|
|
<n-empty size="large" description="暂未加载图层" v-show="useLayerStore().Layers.length==0"/>
|
|
|
<!-- 图层项目 layeritem 动态增减组件 -->
|
|
|
<layer-item v-for="layer in useLayerStore().Layers" :lid="layer.lId" :lname="layer.lName">
|
|
|
</layer-item>
|
|
|
</n-layout-content>
|
|
|
<n-layout-footer style="margin: .5rem">
|
|
|
<n-space justify="space-around">
|
|
|
<n-button size="small" type="info" @click="showWmsModal=true">
|
|
|
添加WMS图层
|
|
|
</n-button>
|
|
|
<n-button size="small" type="warning" @click="clearLayers">
|
|
|
清空图层
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
</n-layout-footer>
|
|
|
</n-layout>
|
|
|
</n-config-provider>
|
|
|
<n-modal v-model:show="showWmsModal"
|
|
|
style="width: 30%"
|
|
|
:mask-closable="false"
|
|
|
preset="dialog"
|
|
|
title="">
|
|
|
<template #header>
|
|
|
<div>WMS资源配置</div>
|
|
|
</template>
|
|
|
<div style="margin: 2rem 2rem .5rem 1rem">
|
|
|
<n-space>
|
|
|
<n-form ref="formRef" :model="wmsConfig"
|
|
|
label-placement="left"
|
|
|
label-width="auto"
|
|
|
require-mark-placement="right-hanging">
|
|
|
<n-form-item label="WMS URL">
|
|
|
<n-input v-model:value="wmsConfig.url" placeholder="127.0.0.1/wms"/>
|
|
|
</n-form-item>
|
|
|
</n-form>
|
|
|
</n-space>
|
|
|
<n-space justify="center">
|
|
|
<n-button @click="addWMSLayer" type="primary" size="small">确定</n-button>
|
|
|
<n-button @click="showWmsModal=false" type="warning" size="small">取消</n-button>
|
|
|
</n-space>
|
|
|
</div>
|
|
|
</n-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 侧边栏基础样式 */
|
|
|
.LayerManagerSidebar {
|
|
|
width: 15rem;
|
|
|
position: absolute;
|
|
|
top: 3rem;
|
|
|
left: -15rem; /* 默认隐藏 */
|
|
|
padding: 0;
|
|
|
border-radius: 7px;
|
|
|
transition: left 0.3s;
|
|
|
}
|
|
|
|
|
|
/* 侧边栏展开样式 */
|
|
|
.LayerManagerSidebar.open {
|
|
|
left: 0;
|
|
|
}
|
|
|
</style>
|