drone/drone-web-manage.git

			@@ -2,8 +2,8 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2024-10-25 15:07:51
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2025-04-10 13:04:30
			* @FilePath: \drone-web-manage\src\components\map-container\MapContainer.vue
			* @LastEditTime: 2025-04-28 11:34:40
			* @FilePath: \drone-web-manage\src\components\map-container\mapContainer.vue
			* @Description:
			*
			* Copyright (c) 2024 by shuishen, All Rights Reserved.
			@@ -19,11 +19,20 @@
			</template>

			<script setup>
			import * as turf from '@turf/turf'

			import { nextTick, onMounted, onUnmounted } from 'vue'
			import { read } from 'xlsx'

			import startPng from '@/assets/map_images/Startingpointicon.png'
			import endPng from '@/assets/map_images/EndPointicon.png'

			window.$viewer = null
			window.$Cesium = null
			let pointLayer = null
			let polylineLayer = null
			let pointHtmlLayer = null

			const { VITE_APP_BASE } = import.meta.env
			// import * as Cesium from 'cesium'
			// import 'cesium/Build/Cesium/Widgets/widgets.css'
			@@ -36,77 +45,174 @@
			})


			watch(
			[() => isViewerReady.value, () => rowDetails],
			([ready, detail]) => {
			if (ready && detail?.location) {
			const [lng, lat] = detail.location
			if (!lng \|\| !lat) return
			window.$viewer?.zoomToPosition(new DC.Position(
			lng,
			lat,
			1000,
			0,
			-90,
			0
			), () => {
			})

			let point = new DC.Point(new DC.Position(lng, lat))
			pointLayer.addOverlay(point)
			}
			},
			{ deep: true, immediate: true } // 初始化时立即执行
			)

			function initMap () {
			async function initMap () {
			if (window.$viewer) return

			nextTick(() => {
			DC.ready({
			// Cesium: Cesium,
			baseUrl: `${VITE_APP_BASE}/libs/dc-sdk/resources/`,
			}).then(() => {
			window.$Cesium = DC.getLib('Cesium')

			// 天地图地图
			const imageryProvider_standZh = new window.$Cesium.UrlTemplateImageryProvider({
			url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			maximumLevel: 18,
			credit: 'stand_zj',
			})
			const imageryProvider_stand = new window.$Cesium.UrlTemplateImageryProvider({
			url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			// format: 'image/jpeg',
			// show: true,
			maximumLevel: 18,
			credit: 'stand_tc',
			})

			window.$viewer = new DC.Viewer('viewer-container')
			window.$viewer.locationBar.enable = false

			window.$viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
			window.$viewer?.imageryLayers.addImageryProvider(imageryProvider_standZh)

			pointLayer = new DC.VectorLayer('pointLayer')
			window.$viewer?.addLayer(pointLayer)

			isViewerReady.value = true
			})
			await DC.ready({
			// Cesium: Cesium,
			baseUrl: `${VITE_APP_BASE}/libs/dc-sdk/resources/`,
			})

			window.$Cesium = DC.getLib('Cesium')

			// 天地图地图
			const imageryProvider_standZh = new window.$Cesium.UrlTemplateImageryProvider({
			url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			maximumLevel: 18,
			credit: 'stand_zj',
			})
			const imageryProvider_stand = new window.$Cesium.UrlTemplateImageryProvider({
			url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			// format: 'image/jpeg',
			// show: true,
			maximumLevel: 18,
			credit: 'stand_tc',
			})

			window.$viewer = new DC.Viewer('viewer-container', {
			"sceneMode": 2 //1: 2.5D，2: 2D，3: 3D
			})

			window.$viewer.locationBar.enable = false

			window.$viewer?.zoomToPosition(new DC.Position(115.892151, 28.676493, 1000000, 0, -90, 0))

			window.$viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
			window.$viewer?.imageryLayers.addImageryProvider(imageryProvider_standZh)

			pointLayer = new DC.VectorLayer('pointLayer')
			window.$viewer?.addLayer(pointLayer)
			polylineLayer = new DC.VectorLayer('polylineLayer')
			window.$viewer?.addLayer(polylineLayer)
			pointHtmlLayer = new DC.HtmlLayer('pointHtmlLayer')
			window.$viewer?.addLayer(pointHtmlLayer)

			isViewerReady.value = true
			}

			/**
			* 初始化标注添加
			* @param type 类型
			* @param data 数据
			*/
			const initAddEntity = (type, data) => {
			watch(() => isViewerReady.value,
			(ready) => {
			if (ready) {
			type === 'point' ? addPoint(data) : addPolyline(data)
			}
			},
			{ deep: true, immediate: true } // 初始化时立即执行
			)
			}

			/**
			* 添加点标注
			* @param data 数据数据格式 [lng, lat]
			*/
			function addPoint (data) {
			if (pointLayer) pointLayer.clear()

			const [lng, lat] = data

			if (!lng \|\| !lat) return

			let point = new DC.Point(new DC.Position(lng, lat))
			pointLayer.addOverlay(point)

			window.$viewer?.zoomTo(pointLayer)
			}

			/**
			* 添加点标注
			* @param data 数据数据格式 [[lng, lat], [lng, lat], [lng, lat]]
			*/
			function addPolyline (data) {
			if (polylineLayer) polylineLayer.clear()
			if (pointHtmlLayer) pointHtmlLayer.clear()

			if (data.length === 0) return

			const positionStr = data.map(item => {
			const [lng, lat] = item

			return `${lng}, ${lat}`
			}).join(';')

			let polyline = new DC.Polyline(positionStr)
			polyline.setStyle({
			width: 4,
			material: new DC.PolylineTrailMaterialProperty({
			color: DC.Color.DEEPSKYBLUE,
			speed: 10
			}),
			clampToGround: true
			})
			polylineLayer.addOverlay(polyline)


			data.forEach((item, index) => {
			const [lng, lat] = item
			let position = new DC.Position(lng, lat)

			console.log(lng, lat)
			let billboard = null

			if (index === 0) {
			billboard = new DC.Billboard(position, startPng)
			}

			if (index === data.length - 1) {
			billboard = new DC.Billboard(position, endPng)
			}


			billboard && (billboard.size = [20, 20])
			billboard && (billboard.setStyle({
			"pixelOffset": { "x": 0, "y": -8 }
			}))
			billboard && polylineLayer.addOverlay(billboard)

			if (index !== 0 && index !== data.length - 1) {
			let divIcon = new DC.DivIcon(
			position,
			`<div class="point-icon-box">${index}</div>`
			)
			pointHtmlLayer.addOverlay(divIcon)
			}
			})

			const line = turf.lineString(positionStr.split(';').map(i => i.split(',')))
			const bbox = turf.bbox(line)
			const bboxPolygon = turf.bboxPolygon(bbox)
			const scaledPolygon = turf.transformScale(bboxPolygon, 3)
			const newBbox = turf.bbox(scaledPolygon)

			window.$viewer?.flyToBounds(
			newBbox,
			{ heading: 0, pitch: -90, roll: 0 },
			() => { },
			0
			)
			}

			onMounted(() => {
			initMap()
			nextTick(() => {
			initMap()
			})
			})

			onUnmounted(() => {
			if (pointLayer) {
			window.$viewer?.removeLayer(pointLayer)
			pointLayer = null
			}

			if (polylineLayer) {
			window.$viewer?.removeLayer(polylineLayer)
			polylineLayer = null
			}

			window.$viewer?.entities.removeAll()
			@@ -127,6 +233,10 @@
			cesiumContainer.remove() // 移除与地图相关的DOM元素
			}
			})

			defineExpose({
			initAddEntity
			})
			</script>

			<script>