<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-10-31 10:47:29
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-12-02 22:20:32
|
* @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<public-box v-show="showLayerControl">
|
<template #name>
|
<div class="name"><i class="fa fa-tasks"></i> 图层</div>
|
</template>
|
|
<template #close>
|
<div class="close cursor-p" @click="emit('close', 'layers')"><i class="fa fa-close"></i></div>
|
</template>
|
|
<template #content>
|
<div class="tree-content">
|
<el-tree ref="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
|
:default-checked-keys="indexPoint" :props="defaultProps" :indent="treeProps['indent']"
|
@check="handleCheckChange">
|
<template v-slot:default="{ node }">
|
<element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
|
<!-- 自定义label的slot -->
|
<template v-slot:node-label>
|
<span style="font-size: 12px">
|
{{ node.label }}
|
<i class="el-icon-eleme"></i></span>
|
</template>
|
<!-- 在右边追加内容的slot -->
|
<!-- <template v-slot:after-node-label>
|
<span style="padding-right: 10px">
|
<el-button type="primary" size="mini" @click.stop="openDrawer(node)">新增子节点</el-button>
|
<el-button type="primary" size="mini" @click.stop="openDrawer(node)">修改</el-button>
|
<el-button type="danger" size="mini" @click.stop="openDialog">删除</el-button></span>
|
</template> -->
|
</element-tree-line>
|
</template>
|
</el-tree>
|
</div>
|
</template>
|
</public-box>
|
|
<panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
|
</panorama>
|
</template>
|
|
<script setup>
|
let addPupoLayers = {}
|
let addTileLayers = {}
|
let tileLayers = new DC.TilesetLayer('tileLayers')
|
window.$viewer.addLayer(tileLayers)
|
|
const {
|
show: showLayerControl
|
} = defineProps({
|
show: {
|
default: false
|
}
|
})
|
|
const emit = defineEmits(['close'])
|
import panorama from './popup/panorama.vue'
|
import { getPage } from '@/api/indParkInfo'
|
import { getPage as getfirmPage } from '@/api/firmInfo/firmInfo'
|
import { getList, getGouQu } from "@/api/space/space"
|
import { getList as getRiskList } from "@/api/riskSource/riskSource"
|
import { getPanoramaList } from "@/api/panorama/"
|
import yqfw from "@/assets/json/yqfw"
|
import gsgw from "@/assets/json/gsgw"
|
import rqgw from "@/assets/json/rqgw"
|
import wsgw from "@/assets/json/wsgw"
|
import ysgw from "@/assets/json/ysgw"
|
import { onUnmounted } from 'vue'
|
import EventBus from 'utils/bus'
|
import { usePointStore } from 'store/usepoint'
|
const pointStore = usePointStore()
|
import { useRouter } from 'vue-router'
|
const router = useRouter()
|
|
const { VITE_APP_BASE } = import.meta.env
|
// , '7',
|
let indexPoint = ref(['1', '5', '7'])
|
|
const treeRef = ref(null)
|
|
const treeProps = {
|
indent: 16,
|
showLabelLine: true,
|
}
|
|
// 全景相关
|
const panoramaShow = ref(false)
|
const panoramaTitle = ref('')
|
const panoramaUrl = ref('')
|
const closePanoramaPopup = () => {
|
panoramaShow.value = false
|
}
|
|
const data = [
|
{
|
id: '1',
|
label: '园区倾斜摄影',
|
type: 'layer',
|
subType: '3Dtile',
|
urlData: [
|
{
|
url: VITE_APP_BASE + 'newMx/mx/tile_01/tileset.json',
|
label: 'tile_01'
|
},
|
{
|
url: VITE_APP_BASE + 'newMx/mx/tile_02/tileset.json',
|
label: 'tile_02'
|
},
|
{
|
url: VITE_APP_BASE + 'newMx/mx/tile_03/tileset.json',
|
label: 'tile_03'
|
},
|
{
|
url: VITE_APP_BASE + 'newMx/mx/tile_04/tileset.json',
|
label: 'tile_04'
|
},
|
{
|
url: VITE_APP_BASE + 'newMx/mx/tile_05/tileset.json',
|
label: 'tile_05'
|
},
|
],
|
layerName: 'hgyq'
|
},
|
|
{
|
id: '2',
|
label: '企业分布',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getPage,
|
params: {
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png',
|
className: 'qyfb-box',
|
showPanel: false,
|
layerName: 'qyfb'
|
},
|
|
{
|
id: '3',
|
label: '应急空间',
|
children: [
|
{
|
id: '3-1',
|
label: '应急池',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 1,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
|
className: 'yjc-box',
|
showPanel: false,
|
layerName: 'yjc',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
// if (!attrParams.imageUrl) {
|
// return
|
// }
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<div>${attrParams.fullName}</div>
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-two">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
{
|
id: '3-2',
|
label: '阀门',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 2,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
|
className: 'ysf-box',
|
showPanel: false,
|
layerName: 'fm',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
if (!attrParams.imageUrl) {
|
return
|
}
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<div>${attrParams.fullName}</div>
|
<img src="${attrParams.imageUrl}" width="160" height="160" />
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-two">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
|
{
|
id: '3-3',
|
label: '公共管网',
|
children: [
|
// 给水管网、污水管网、燃气管网、雨水管网
|
{
|
id: '3-3-2',
|
label: '污水管网',
|
type: 'layer',
|
subType: 'geojsonPipe',
|
layerName: 'wsgw',
|
source: wsgw,
|
color: DC.Color.DARKBLUE.withAlpha(0.9),
|
height: 60.2,
|
},
|
{
|
id: '3-3-4',
|
label: '雨水管网',
|
type: 'layer',
|
subType: 'geojsonPipe',
|
layerName: 'ysgw',
|
source: ysgw,
|
color: DC.Color.CYAN.withAlpha(0.9),
|
height: 60,
|
},
|
{
|
id: '3-3-1',
|
label: '给水管网',
|
type: 'layer',
|
subType: 'geojsonPipe',
|
layerName: 'gsgw',
|
source: gsgw,
|
color: DC.Color.BLUE.withAlpha(0.9),
|
height: 60.4,
|
},
|
{
|
id: '3-3-3',
|
label: '燃气管网',
|
type: 'layer',
|
subType: 'geojsonPipe',
|
layerName: 'rqgw',
|
source: rqgw,
|
color: DC.Color.RED.withAlpha(0.9),
|
height: 60.6,
|
},
|
]
|
},
|
|
{
|
id: '3-4',
|
label: '污水提升泵站',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
// className: 'sk-box',
|
// showPanel: false,
|
params: {
|
type: 4,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/wstsb.png',
|
className: 'yjc-box',
|
showPanel: false,
|
layerName: 'wstsbz',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
if (!attrParams.imageUrl) {
|
return
|
}
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<div>${attrParams.fullName}</div>
|
<img src="${attrParams.imageUrl}" width="160" height="160" />
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-two">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
|
{
|
id: '3-5',
|
label: '水库',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 5,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/sk.png',
|
className: 'sk-box',
|
showPanel: false,
|
layerName: 'sk',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
if (!attrParams.imageUrl) {
|
return
|
}
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<div>${attrParams.fullName}</div>
|
<img src="${attrParams.imageUrl}" width="160" height="160" />
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-two">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
|
{
|
id: '3-6',
|
label: '应急泵',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 6,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
|
className: 'yjb-box',
|
showPanel: false,
|
layerName: 'yjb',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
if (!attrParams.imageUrl) {
|
return
|
}
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<div>${attrParams.fullName}</div>
|
<img src="${attrParams.imageUrl}" width="160" height="160" />
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-two">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
|
{
|
id: '3-8',
|
label: '沟渠',
|
type: 'layer',
|
subType: 'geojsonPolygon',
|
method: getGouQu,
|
params: {
|
type: 8,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/gouqu.png',
|
className: 'xfs-box',
|
showPanel: false,
|
layerName: 'gouqu'
|
},
|
// {
|
// id: '3-9',
|
// label: '废水处理站',
|
// type: 'layer',
|
// subType: 'labelPoint',
|
// method: getList,
|
// params: {
|
// type: 9,
|
// size: 1000
|
// // name: '吉水县绿源污水处理厂',
|
// },
|
// backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png',
|
// className: 'xfs-box',
|
// showPanel: false,
|
// layerName: 'fsclz'
|
// },
|
{
|
id: '3-10',
|
label: '排水口',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 10,
|
size: 1000
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/psk.png',
|
className: 'xfs-box',
|
showPanel: false,
|
layerName: 'psk'
|
},
|
// {
|
// id: '3-11',
|
// label: '污水池',
|
// type: 'layer',
|
// subType: 'labelPoint',
|
// method: getList,
|
// params: {
|
// type: 11,
|
// size: 1000
|
// },
|
// backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png',
|
// className: 'xfs-box',
|
// showPanel: false,
|
// layerName: 'wsc'
|
// }
|
]
|
},
|
|
{
|
id: '4',
|
label: '风险源',
|
children: [
|
{
|
id: '4-1',
|
label: '一般',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getRiskList,
|
params: {
|
riskLevel: 1,
|
size: 1000
|
},
|
showParams: 'category',
|
className: 'fxy-ordinary',
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-yb.png',
|
showPanel: false,
|
layerName: 'fxyOrdinary',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<li>${attrParams.name || ''}</li>
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-three">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
},
|
{
|
id: '4-2',
|
label: '较大',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getRiskList,
|
params: {
|
riskLevel: 2,
|
size: 1000
|
},
|
showParams: 'category',
|
className: 'fxy-larger',
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-jd.png',
|
showPanel: false,
|
layerName: 'fxyLarger',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
// 删除
|
destroy()
|
addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
|
window.$viewer.addLayer(addPupoLayers[attrParams.name])
|
let iconEl = `<div class="marsBlueGradientPnl">
|
<li>${attrParams.name || ''}</li>
|
</div>`
|
let divIcon = new DC.DivIcon(
|
new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
|
`<div class="public-map-popup-three">
|
${iconEl}
|
</div>`
|
)
|
let incident = () => {
|
destroy()
|
}
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
addPupoLayers[attrParams.name].addOverlay(divIcon)
|
}
|
}
|
]
|
},
|
|
{
|
id: '5',
|
label: '园区范围',
|
type: 'layer',
|
subType: 'geojsonWall',
|
layerName: 'yqfw',
|
source: yqfw
|
},
|
|
{
|
id: '7',
|
label: '空中全景分布',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getPanoramaList,
|
params: {
|
size: 1000,
|
remark: '1'
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
|
showPanel: false,
|
layerName: 'kzqjdwfb',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
panoramaTitle.value = attrParams.name
|
if (
|
attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
|
) {
|
attrParams.url = attrParams.url.replace(
|
"http://vr.jxpskj.com:180",
|
"/panorama"
|
)
|
}
|
panoramaUrl.value = attrParams.url
|
panoramaShow.value = true
|
}
|
},
|
{
|
id: '8',
|
label: '地面全景分布',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getPanoramaList,
|
params: {
|
size: 1000,
|
remark: '2'
|
},
|
backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
|
showPanel: false,
|
layerName: 'dtqjdwfb',
|
incident: (e) => {
|
const { attrParams } = e.overlay
|
panoramaTitle.value = attrParams.name
|
if (
|
attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
|
) {
|
attrParams.url = attrParams.url.replace(
|
"http://vr.jxpskj.com:180",
|
"/panorama"
|
)
|
}
|
panoramaUrl.value = attrParams.url
|
panoramaShow.value = true
|
}
|
},
|
]
|
|
// let modellayer = new DC.VectorLayer("modellayer").addTo(window.$viewer)
|
// let model = new DC.Model("121.46748793889597,31.22345700031846,200", VITE_APP_BASE + 'gltf/dajiang.gltf')
|
// model.setStyle({
|
// scale: 10000
|
// })
|
// modellayer.addOverlay(model)
|
// window.$viewer.flyToPosition("121.46748793889597,31.22345700031846,300,0,-90")
|
|
const defaultProps = {
|
children: 'children',
|
label: 'label',
|
}
|
|
const checkType = (value) => {
|
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
|
return 'obj'
|
} else if (Array.isArray(value)) {
|
return 'arr'
|
}
|
}
|
// 用于存储收集到的节点的数组
|
const collectedNodes = reactive([])
|
|
// 递归函数，收集所有 flag 为 true 的子节点
|
const collectNodesWithFlag = (nodes) => {
|
if (checkType(nodes) == 'obj') {
|
if (nodes.type == 'layer') {
|
collectedNodes.value.push(nodes)
|
}
|
if (nodes.children && nodes.children.length > 0) {
|
collectNodesWithFlag(nodes.children)
|
return
|
}
|
}
|
|
if (checkType(nodes) == 'arr') {
|
nodes.forEach(item => {
|
if (item) {
|
if (item.type == 'layer') {
|
collectedNodes.value.push(item)
|
}
|
|
if (item.children && item.children.length > 0) {
|
collectNodesWithFlag(item.children)
|
}
|
}
|
})
|
}
|
}
|
|
const handleCheckChange = (data) => {
|
let options = treeRef.value?.getCheckedNodes()
|
collectedNodes.value = []
|
collectNodesWithFlag(data)
|
|
collectedNodes.value.forEach(item => {
|
if (options?.some(i => i.id == item.id)) {
|
|
// const window.$Cesium = DC
|
if (item.subType == '3Dtile') {
|
if (!addTileLayers[item.layerName]) {
|
// addTileLayers[item.layerName] = []
|
// let tile = window.$viewer.delegate.scene.primitives.add(new window.$Cesium.Cesium3DTileset({
|
// url: '/zhyq/mx/tile_01/tileset.json',
|
// }))
|
|
// url: '/zhyq/mx/tile_01/tileset.json',
|
// }), 121323)
|
// item.urlData.forEach(i => {
|
|
// })
|
addTileLayers[item.layerName] = []
|
item.urlData.forEach((m, ind) => {
|
addTileLayers[item.layerName][ind] = new DC.Tileset(m.url, {
|
maximumMemoryUsage: 1024,
|
maximumScreenSpaceError: 8,
|
skipLevels: 5,
|
skipLevelOfDetail: true,
|
skipScreenSpaceErrorFactor: 128,
|
progressiveResolutionHeightFraction: 0.5,
|
baseScreenSpaceError: 1024
|
})
|
// tile.setHeight(-420)
|
tileLayers.addOverlay(addTileLayers[item.layerName][ind])
|
})
|
} else {
|
addTileLayers[item.layerName].forEach(m => m.show = true)
|
}
|
} else if (item.subType == 'labelPoint') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
|
window.$viewer.addLayer(addTileLayers[item.layerName])
|
|
item.method(item.params).then(res => {
|
let data = res.data.data.records
|
|
data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
|
let iconEl = ''
|
|
if ('showPanel' in item && item.showPanel == false) {
|
if (item.backgroundIcon) {
|
iconEl = `
|
<div class="map-name">${i[item.showParams] || i.name}</div>
|
<div class="map-icon">
|
<img src="${item.backgroundIcon}">
|
</div>
|
`
|
}
|
} else {
|
iconEl = `<div class="marsBlueGradientPnl">
|
<div>${i[item.showParams] || i.name}</div>
|
</div>`
|
}
|
|
let divIcon = new DC.DivIcon(
|
new DC.Position(i.lng, i.lat, i.ele || 64),
|
`<div class="public-map-popup ${item.className || ''}">
|
${iconEl}
|
</div>`
|
)
|
|
divIcon.attrParams = i
|
|
let incident = () => {
|
}
|
|
if (item.incident) incident = item.incident
|
|
divIcon.on(DC.MouseEventType.CLICK, incident)
|
|
addTileLayers[item.layerName].addOverlay(divIcon)
|
})
|
})
|
} else {
|
addTileLayers[item.layerName].show = true
|
}
|
} else if (item.subType == 'geojsonWall') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
|
window.$viewer.addLayer(addTileLayers[item.layerName])
|
|
item.source.features.forEach(i => {
|
let wall = new DC.Wall(
|
i.geometry.coordinates[0].map(d => [...d, 125].join(',')).join(';')
|
)
|
|
wall.setStyle({
|
material: new DC.WallTrailMaterialProperty({
|
color: window.$Cesium.Color.fromBytes(0, 123, 255, 180),
|
speed: 8
|
})
|
})
|
addTileLayers[item.layerName].addOverlay(wall)
|
})
|
} else {
|
addTileLayers[item.layerName].show = true
|
}
|
} else if (item.subType == 'geojsonPipe') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
|
window.$viewer.addLayer(addTileLayers[item.layerName])
|
|
function computeCircle (radius) {
|
var positions = []
|
for (var i = 0; i < 360; i++) {
|
var radians = DC.Math.toRadians(i)
|
positions.push({
|
x: radius * Math.cos(radians),
|
y: radius * Math.sin(radians),
|
})
|
}
|
return positions
|
}
|
|
item.source.features.forEach(i => {
|
let polylineVolume = new DC.PolylineVolume(
|
i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'),
|
computeCircle(1.6)
|
)
|
|
polylineVolume.setStyle({
|
material: item.color
|
})
|
addTileLayers[item.layerName].addOverlay(polylineVolume)
|
})
|
} else {
|
addTileLayers[item.layerName].show = true
|
}
|
} else if (item.subType == 'geojsonPolygon') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
|
window.$viewer.addLayer(addTileLayers[item.layerName])
|
item.method(item.params).then(res => {
|
let data = res.data.data.records
|
data.forEach(i => {
|
let stl = ''
|
try {
|
let geom = JSON.parse(i.geom)
|
if (geom && geom.coordinates && geom.coordinates[0]) {
|
stl = geom.coordinates[0][0].map(d => d[0] + ',' + d[1]).join(';')
|
} else {
|
console.error('Invalid geom structure')
|
}
|
} catch (error) {
|
console.error('Failed to parse geom:', error)
|
}
|
let polygon = new DC.Polygon(stl)
|
polygon.setStyle({
|
width: 2,
|
material: DC.Color.BLUE,
|
clampToGround: true
|
})
|
addTileLayers[item.layerName].addOverlay(polygon)
|
})
|
})
|
} else {
|
addTileLayers[item.layerName].show = true
|
}
|
}
|
} else {
|
if (addTileLayers[item.layerName]) {
|
if (item.subType == '3Dtile') {
|
addTileLayers[item.layerName].forEach(m => m.show = false)
|
} else {
|
addTileLayers[item.layerName].clear()
|
window.$viewer && window.$viewer.removeLayer(addTileLayers[item.layerName])
|
addTileLayers[item.layerName] = null
|
delete addTileLayers[item.layerName]
|
}
|
}
|
}
|
})
|
}
|
|
function findObjectById (data, id) {
|
// 遍历数据数组
|
for (let i = 0; i < data.length; i++) {
|
const item = data[i]
|
|
// 检查当前项的 id 是否匹配
|
if (item.id === id) {
|
return item // 找到匹配项，返回它
|
}
|
|
// 如果当前项有 children 数组，则递归查找
|
if (item.children && item.children.length > 0) {
|
const found = findObjectById(item.children, id)
|
if (found) {
|
return found // 在 children 中找到匹配项，返回它
|
}
|
}
|
}
|
|
// 如果没有找到匹配项，返回 null
|
return null
|
}
|
|
const restHandleCheckChange = (key) => {
|
let checkIds = treeRef.value?.getCheckedKeys()
|
|
if (checkIds && checkIds.some(i => i == key)) {
|
return
|
}
|
|
treeRef.value?.setCheckedKeys([...checkIds, key])
|
handleCheckChange([findObjectById(data, key)])
|
}
|
|
const restHandleDelChange = (key) => {
|
let checkIds = treeRef.value?.getCheckedKeys()
|
|
if (checkIds && !checkIds.some(i => i == key)) {
|
return
|
}
|
|
treeRef.value?.setCheckedKeys(checkIds.filter(i => i.indexOf(key)))
|
handleCheckChange([findObjectById(data, key)])
|
}
|
|
// 飞到园区范围
|
const flyToyqfw = () => {
|
window.$viewer.zoomToPosition(new DC.Position(
|
115.1021,
|
27.2360,
|
5000,
|
0,
|
-45,
|
0
|
), () => {
|
})
|
}
|
|
EventBus.on('restHandleCheckChange', restHandleCheckChange)
|
EventBus.on('restHandleDelChange', restHandleDelChange)
|
EventBus.on('flyToyqfw', flyToyqfw)
|
|
onMounted(() => {
|
handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
|
})
|
|
// const sharedData = computed(() => pointStore.sharedData);
|
// watch(sharedData, (newValue) => {
|
// });
|
|
// 关闭所有选中的,除了倾斜，园区分布，空中全景
|
const closeAll = () => {
|
EventBus.emit('restHandleDelChange', `2`)
|
EventBus.emit('restHandleDelChange', `3`)
|
EventBus.emit('restHandleDelChange', `3-1`)
|
EventBus.emit('restHandleDelChange', `3-2`)
|
EventBus.emit('restHandleDelChange', `3-3`)
|
EventBus.emit('restHandleDelChange', `3-3-1`)
|
EventBus.emit('restHandleDelChange', `3-3-2`)
|
EventBus.emit('restHandleDelChange', `3-3-3`)
|
EventBus.emit('restHandleDelChange', `3-3-4`)
|
EventBus.emit('restHandleDelChange', `3-4`)
|
EventBus.emit('restHandleDelChange', `3-5`)
|
EventBus.emit('restHandleDelChange', `3-6`)
|
EventBus.emit('restHandleDelChange', `3-7`)
|
EventBus.emit('restHandleDelChange', `3-8`)
|
EventBus.emit('restHandleDelChange', `3-9`)
|
EventBus.emit('restHandleDelChange', `4`)
|
EventBus.emit('restHandleDelChange', `4-1`)
|
EventBus.emit('restHandleDelChange', `4-2`)
|
EventBus.emit('restHandleDelChange', `8`)
|
destroy()
|
}
|
|
// const sharedData = computed(() => pointStore.sharedData);
|
// watch(sharedData, (newValue) => {
|
// });
|
// 监听当前路由路径的变化
|
watch(() => router.currentRoute.value.path,
|
(newPath, oldPath) => {
|
console.log(`Current path changed from ${oldPath} to ${newPath}`)
|
closeAll()
|
},
|
{ immediate: true }
|
)
|
|
// 销毁
|
function destroy () {
|
let arr = Object.keys(addPupoLayers)
|
arr.filter(i => i != 'hgyq').forEach(i => {
|
addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
|
addPupoLayers[i] = null
|
delete addPupoLayers[i]
|
})
|
addPupoLayers = {}
|
}
|
|
onUnmounted(() => {
|
let arr = Object.keys(addTileLayers)
|
arr.forEach(i => {
|
if (i == 'hgyq') {
|
tileLayers.removeOverlay(addTileLayers[i])
|
addTileLayers[i] = null
|
delete addTileLayers[i]
|
} else {
|
addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
|
addTileLayers[i] = null
|
delete addTileLayers[i]
|
}
|
})
|
addTileLayers = null
|
|
if (tileLayers) {
|
tileLayers.remove()
|
window.$viewer && window.$viewer.removeLayer(tileLayers)
|
tileLayers = null
|
}
|
// 弹窗销毁
|
destroy()
|
addPupoLayers = null
|
|
EventBus.off('restHandleCheckChange', restHandleCheckChange)
|
EventBus.off('restHandleDelChange', restHandleDelChange)
|
EventBus.off('flyToyqfw', flyToyqfw)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.tree-content {
|
min-width: 200px;
|
padding: 10px;
|
|
::v-deep(.el-tree) {
|
color: #fff;
|
background: transparent;
|
|
/* 鼠标浮动过的背景颜色 */
|
.el-tree-node__content:hover {
|
background: #0074b7;
|
}
|
|
/* 鼠标点击时节点的背景颜色 */
|
.el-tree-node:focus>.el-tree-node__content {
|
background-color: #0074b7 !important;
|
color: rgb(255, 255, 255);
|
}
|
|
/* 鼠标失去焦点时节点背景的颜色 */
|
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
background: rgb(0, 129, 204);
|
}
|
}
|
}
|
</style>
|
