<template>
|
<mars-pannel :visible="true" right="10" top="10" height="90">
|
<a-space>
|
<mars-button @click="shoRailway">铁路</mars-button>
|
<mars-button @click="showExpressway">高速公路</mars-button>
|
<mars-button @click="showMeteorological">气象等值面</mars-button>
|
<mars-button @click="showGDP">国家GDP数据</mars-button>
|
<mars-button @click="showSafetyNotice">海上安全通告</mars-button>
|
</a-space>
|
<div class="f-pt">
|
<layer-state />
|
</div>
|
</mars-pannel>
|
|
<mars-pannel :visible="true" right="10" top="110" width="200" customClass="pannel">
|
<mars-tree checkable :tree-data="treeData" @check="checkedChange" v-model:checkedKeys="selectedKeys" v-model:expandedKeys="expandedKeys">
|
<template #title="{ title }">
|
<span :title="title">{{ title }}</span>
|
</template>
|
</mars-tree>
|
</mars-pannel>
|
</template>
|
|
<script setup lang="ts">
|
import { nextTick, ref } from "vue"
|
import LayerState from "@mars/components/mars-sample/layer-state.vue"
|
import * as mapWork from "./map.js"
|
|
const treeData = ref<any[]>([
|
{
|
title: "全部",
|
key: 0,
|
id: -1,
|
children: []
|
}
|
])
|
const selectedKeys = ref<string[]>([])
|
const expandedKeys = ref<any[]>([])
|
expandedKeys.value.push(0)
|
|
const layersObj: any = {}
|
|
mapWork.treeEvent.on("tree", (event: any) => {
|
initTree(event)
|
})
|
|
const checkedChange = (_keys: string[], checkedNodes: any) => {
|
const node = checkedNodes.node
|
if (!node.children && node.checked) {
|
layersObj[node.key].show = false
|
}
|
if (!node.children && !node.checked) {
|
layersObj[node.key].show = true
|
}
|
|
if (node.id === -1 && node.checked) {
|
node.children.forEach((element: any) => {
|
layersObj[element.key].show = false
|
})
|
}
|
if (node.id === -1 && !node.checked) {
|
node.children.forEach((element: any) => {
|
layersObj[element.key].show = true
|
})
|
}
|
mapWork.flyToEntity()
|
}
|
|
// 初始化树控件
|
function initTree(event: any) {
|
const modelList = event.treeData
|
|
const tree = []
|
const selects: string[] = []
|
for (let i = 0; i < modelList.length; i++) {
|
const node = modelList[i].graphic
|
|
if (node) {
|
const nodeList: any = {
|
title: node.name || "未命名",
|
key: node.id
|
}
|
tree.push(nodeList)
|
selects.push(nodeList.key)
|
layersObj[nodeList.key] = node
|
}
|
}
|
treeData.value[0].children = tree
|
|
nextTick(() => {
|
selectedKeys.value = selects
|
})
|
}
|
|
const shoRailway = () => {
|
selectedKeys.value = []
|
|
mapWork.shoRailway()
|
}
|
const showExpressway = () => {
|
selectedKeys.value = []
|
|
mapWork.showExpressway()
|
}
|
const showMeteorological = () => {
|
selectedKeys.value = []
|
|
mapWork.showMeteorological()
|
}
|
const showGDP = () => {
|
selectedKeys.value = []
|
|
mapWork.showGDP()
|
}
|
const showSafetyNotice = () => {
|
selectedKeys.value = []
|
|
mapWork.showSafetyNotice()
|
}
|
</script>
|
<style lang="less">
|
.pannel {
|
max-height: 750px;
|
overflow-y: auto;
|
}
|
</style>
|
