zhyq/bigScreen.git

			@@ -2,11 +2,11 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2024-10-31 10:47:29
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2024-11-05 18:36:54
			* @LastEditTime: 2024-11-09 15:08:15
			* @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
			* @Description:
			*
			* Copyright (c) 2024 by shuishen, All Rights Reserved.
			* @Description:
			*
			* Copyright (c) 2024 by shuishen, All Rights Reserved.
			-->
			<template>
			<public-box>
			@@ -49,13 +49,17 @@
			import { getPage } from '@/api/indParkInfo'
			import { getList } from "@/api/space/space"
			import { getList as getRiskList } from "@/api/riskSource/riskSource"
			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'

			const { VITE_APP_BASE } = import.meta.env
			import { getViewer } from 'utils/getViewer'
			const globalViewer = getViewer()

			const treeRef = ref(null)

			const Cesium = DC.getLib('Cesium')
			const treeProps = {
			indent: 16,
			showLabelLine: true,
			@@ -64,7 +68,7 @@
			const data = [
			{
			id: '1',
			label: '化工园区',
			label: '园区倾斜摄影',
			type: 'layer',
			subType: '3Dtile',
			url: VITE_APP_BASE + 'mx/tileset.json',
			@@ -80,6 +84,8 @@
			params: {
			size: 1000
			},
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png',
			showPanel: false,
			layerName: 'qyfb'
			},

			@@ -189,7 +195,67 @@
			size: 1000
			},
			showParams: 'category',
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png',
			showPanel: false,
			layerName: 'fxy'
			},

			{
			id: '5',
			label: '园区范围',
			type: 'layer',
			subType: 'geojsonWall',
			layerName: 'yqfw',
			source: yqfw
			},

			{
			id: '6',
			label: '地下管网',
			children: [
			// 给水管网、污水管网、燃气管网、雨水管网
			{
			id: '6-1',
			label: '给水管网',
			type: 'layer',
			subType: 'geojsonPipe',
			layerName: 'gsgw',
			source: gsgw,
			color: DC.Color.BLUE,
			height: 1,
			},
			{
			id: '6-2',
			label: '污水管网',
			type: 'layer',
			subType: 'geojsonPipe',
			layerName: 'wsgw',
			source: wsgw,
			color: DC.Color.BLACK,
			height: 2,
			},
			{
			id: '6-3',
			label: '燃气管网',
			type: 'layer',
			subType: 'geojsonPipe',
			layerName: 'rqgw',
			source: rqgw,
			color: DC.Color.RED,
			height: 3,
			},
			{
			id: '6-4',
			label: '雨水管网',
			type: 'layer',
			subType: 'geojsonPipe',
			layerName: 'ysgw',
			source: ysgw,
			color: DC.Color.CYAN,
			height: 4,
			},

			]
			},
			]

			@@ -205,10 +271,10 @@
			return 'arr'
			}
			}
			// 用于存储收集到的节点的数组
			// 用于存储收集到的节点的数组
			const collectedNodes = reactive([])

			// 递归函数，收集所有 flag 为 true 的子节点
			// 递归函数，收集所有 flag 为 true 的子节点
			const collectNodesWithFlag = (nodes) => {
			if (checkType(nodes) == 'obj') {
			if (nodes.type == 'layer') {
			@@ -235,7 +301,7 @@

			let addTileLayers = {}
			let tileLayers = new DC.TilesetLayer('tileLayers')
			globalViewer.addLayer(tileLayers)
			window.$viewer.addLayer(tileLayers)

			const handleCheckChange = (data, options) => {
			collectedNodes.value = []
			@@ -246,55 +312,117 @@
			if (item.subType == '3Dtile') {
			if (!addTileLayers[item.layerName]) {
			addTileLayers[item.layerName] = new DC.Tileset(
			item.url,
			{
			cullWithChildrenBounds: false,
			maximumScreenSpaceError: 256,
			maximumMemoryUsage: 1024,
			skipLevelOfDetail: true,
			preferLeaves: true
			})
			item.url)

			tileLayers.addOverlay(addTileLayers[item.layerName])
			} else {
			addTileLayers[item.layerName].show = true
			}

			console.log(addTileLayers[item.layerName], 11111111)

			globalViewer.flyTo(addTileLayers[item.layerName])
			window.$viewer.flyTo(addTileLayers[item.layerName])
			} else if (item.subType == 'labelPoint') {
			if (!addTileLayers[item.layerName]) {
			addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName])
			globalViewer.addLayer(addTileLayers[item.layerName])
			}
			window.$viewer.addLayer(addTileLayers[item.layerName])

			item.method(item.params).then(res => {
			let data = res.data.data.records
			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 divIcon = new DC.DivIcon(
			new DC.Position(i.lng, i.lat, 0),
			`<div class="public-map-popup">
			<div class="marsBlueGradientPnl">
			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>
			</div>`
			</div>`
			}

			let divIcon = new DC.DivIcon(
			new DC.Position(i.lng, i.lat, 0),
			`<div class="public-map-popup">
			${iconEl}
			</div>`
			)

			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(';')
			)

			addTileLayers[item.layerName].addOverlay(divIcon)
			wall.setStyle({
			material: new DC.WallTrailMaterialProperty({
			color: Cesium.Color.fromBytes(0, 123, 255, 180),
			speed: 10
			})
			})
			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 < 1080; 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], 0.0].join(',')).join(';'),
			computeCircle(0.3)
			)

			polylineVolume.setStyle({
			material: item.color
			})
			addTileLayers[item.layerName].addOverlay(polylineVolume)
			})
			} else {
			addTileLayers[item.layerName].show = true
			}
			}
			} else {
			if (addTileLayers[item.layerName]) {
			if (item.subType == '3Dtile') {
			addTileLayers[item.layerName].show = false
			} else if (item.subType == 'labelPoint') {
			globalViewer.removeLayer(addTileLayers[item.layerName])
			addTileLayers[item.layerName].show = false
			} else if (item.subType == 'geojsonWall') {
			addTileLayers[item.layerName].show = false
			} else if (item.subType == 'geojsonPipe') {
			addTileLayers[item.layerName].show = false
			}

			delete addTileLayers[item.layerName]
			}
			}
			})
			@@ -303,6 +431,14 @@
			onMounted(() => {
			handleCheckChange(data.filter(i => i.id == '1'), {
			checkedKeys: ['1']
			})
			})

			onUnmounted(() => {
			tileLayers && window.$viewer.removeLayer(tileLayers)
			let arr = Object.keys(addTileLayers)
			arr.forEach(i => {
			addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
			})
			})
			</script>
			@@ -333,4 +469,4 @@
			}
			}
			}
			</style>
			</style>