From 1dee40ea46601f2ee5d10aa0190625ebf03bdc4e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Dec 2024 17:02:19 +0800
Subject: [PATCH] 1
---
src/pages/map/components/scomponents/layersControl.vue | 968 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 968 insertions(+), 0 deletions(-)
diff --git a/src/pages/map/components/scomponents/layersControl.vue b/src/pages/map/components/scomponents/layersControl.vue
new file mode 100644
index 0000000..8857e66
--- /dev/null
+++ b/src/pages/map/components/scomponents/layersControl.vue
@@ -0,0 +1,968 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-10-31 10:47:29
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-12-01 21:45:13
+ * @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()
+
+const { VITE_APP_BASE } = import.meta.env
+// , '7',
+let indexPoint = ref(['1', '5'])
+
+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: [
+
+ ],
+ 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>
+ <img src="${attrParams.imageUrl}" />
+ </div>`
+ let divIcon = new DC.DivIcon(
+ new DC.Position(attrParams.lng, attrParams.lat, 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, 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-1',
+ label: '给水管网',
+ type: 'layer',
+ subType: 'geojsonPipe',
+ layerName: 'gsgw',
+ source: gsgw,
+ color: DC.Color.BLUE.withAlpha(0.9),
+ height: 65,
+ },
+ {
+ id: '3-3-2',
+ label: '污水管网',
+ type: 'layer',
+ subType: 'geojsonPipe',
+ layerName: 'wsgw',
+ source: wsgw,
+ color: DC.Color.DARKBLUE.withAlpha(0.9),
+ height: 68,
+ },
+ {
+ id: '3-3-3',
+ label: '燃气管网',
+ type: 'layer',
+ subType: 'geojsonPipe',
+ layerName: 'rqgw',
+ source: rqgw,
+ color: DC.Color.RED.withAlpha(0.9),
+ height: 71,
+ },
+ {
+ id: '3-3-4',
+ label: '雨水管网',
+ type: 'layer',
+ subType: 'geojsonPipe',
+ layerName: 'ysgw',
+ source: ysgw,
+ color: DC.Color.CYAN.withAlpha(0.9),
+ height: 75,
+ },
+ ]
+ },
+
+ {
+ id: '3-4',
+ label: '污水提升泵站',
+ type: 'layer',
+ subType: 'labelPoint',
+ method: getList,
+ params: {
+ type: 4,
+ size: 1000
+ },
+ 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, 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, 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, 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.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.firmName || ''}</li>
+ <li>${attrParams.riskLevelName || ''}</li>
+ </div>`
+ let divIcon = new DC.DivIcon(
+ new DC.Position(attrParams.lng, attrParams.lat, 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.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.firmName || ''}</li>
+ <li>${attrParams.riskLevelName || ''}</li>
+ </div>`
+ let divIcon = new DC.DivIcon(
+ new DC.Position(attrParams.lng, attrParams.lat, 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) => {
+ let tile = new DC.Tileset(m.url, {
+ maximumMemoryUsage: 1024,
+ maximumScreenSpaceError: 8,
+ skipLevels: 5,
+ skipLevelOfDetail: true,
+ skipScreenSpaceErrorFactor: 128,
+ progressiveResolutionHeightFraction: 0.5,
+ baseScreenSpaceError: 1024
+ })
+ tile.setSplitDirection(1)
+ // tile.setHeight(-420)
+ // tile.setSplitDirection(-1)
+ window.$viewer.sceneSplit.addTileset(tile)
+ tileLayers.addOverlay(tile)
+ window.$viewer.sceneSplit.enable = false
+ addTileLayers[item.layerName][ind] = tile
+ })
+ } 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, 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(2)
+ )
+
+ 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(() => {
+ setTimeout(() => {
+ handleCheckChange(data.filter(i => indexPoint.value.includes(i.id)))
+ }, 3000)
+})
+
+// const sharedData = computed(() => pointStore.sharedData);
+// watch(sharedData, (newValue) => {
+// });
+
+// 销毁
+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(() => {
+ if (tileLayers) {
+ tileLayers.clear()
+ window.$viewer && window.$viewer.removeLayer(tileLayers)
+ tileLayers = null
+ }
+
+ let arr = Object.keys(addTileLayers)
+ arr.filter(i => i != 'hgyq').forEach(i => {
+ addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
+ addTileLayers[i] = null
+ delete addTileLayers[i]
+ })
+ addTileLayers = 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>
--
Gitblit v1.9.3