forked from drone/command-center-dashboard

罗广辉
2025-04-19 d5e65bafff7cfe6d4c01abc6aacfd6dd2c9285f6
src/components/CurrentTaskDetails/RealTimeMap.vue
@@ -6,7 +6,6 @@
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import endPointImg from '@/assets/images/EndPointicon.png'
import startPointImg from '@/assets/images/Startingpointicon.png'
import { addBlueFilter } from '@/utils/cesium/common'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
@@ -14,6 +13,7 @@
import lineImg from '@/assets/images/arrow-right-blue.png'
import { flyVisual } from '@/utils/cesium/mapUtil'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
import aircraftGltf from '@/assets/gltf/aircraft.gltf'
const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
   url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -26,12 +26,14 @@
   tilingScheme: new AmapMercatorTilingScheme(),
   credit: 'amap_SL',
})
let viewer = null
const taskDetailsViewer = inject('taskDetailsViewer')
const taskDetails = inject('taskDetails')
const deviceOsdInfo = inject('deviceOsdInfo')
const initMap = () => {
   viewer = new Viewer('currentTaskMap', {
   taskDetailsViewer.value = new Viewer('currentTaskMap', {
      terrain: Terrain.fromWorldTerrain(),
      infoBox: false, // 禁用沙箱,解决控制台报错
      animation: false, // 左下角的动画仪表盘
@@ -45,17 +47,17 @@
      baseLayer: false,
      fullscreenButton: false,
   })
   const gdLayer = viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
   const gdLayer = taskDetailsViewer?.value.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
   const options = {
      bInvertColor: true,
      bFilterColor: true,
      filterColor: '#4e70a6',
   }
   // 添加蓝色滤镜
   addBlueFilter(options, viewer, gdLayer)
   viewer.scene.morphTo2D(0)
   addBlueFilter(options, taskDetailsViewer?.value, gdLayer)
   taskDetailsViewer?.value.scene.morphTo2D(0)
   //设置默认点
   viewer.camera.setView({
   taskDetailsViewer?.value.camera.setView({
      destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
   })
}
@@ -66,7 +68,7 @@
      return Cartesian3.fromDegrees(Number(lon), Number(lat))
   })
   // 起点
   viewer.entities.add({
   taskDetailsViewer?.value.entities.add({
      position: positions[0],
      billboard: {
         image: new Cesium.ConstantProperty(rwqfdImg),
@@ -75,7 +77,7 @@
      },
   })
   // 终点
   viewer.entities.add({
   taskDetailsViewer?.value.entities.add({
      position: positions[positions.length - 1],
      billboard: {
         image: new Cesium.ConstantProperty(endPointImg),
@@ -85,7 +87,7 @@
      },
   })
   // 路径线
   viewer.entities.add({
   taskDetailsViewer?.value.entities.add({
      polyline: {
         width: 4,
         positions: positions,
@@ -108,29 +110,25 @@
   const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
   if (!waylinesXMLObj.Placemark.length) return
   const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
   flyVisual(allPoint, viewer)
   flyVisual(allPoint, taskDetailsViewer?.value)
   drawWayline(waylinesXMLObj)
}
const removeMap = () => {
   viewer.entities.removeAll()
   viewer.destroy()
}
let viewInfoFrustum
// 设置视椎
const setCreateFrustum = () => {
   const deviceInfo = deviceOsdInfo.value?.data?.host
   if (!deviceInfo) return
   const host = deviceOsdInfo.value?.data?.host
   if (!host) return
   viewInfoFrustum?.clear()
   if ([14, 0].includes(deviceInfo.mode_code)) return
   const attitude_head = 180 + deviceInfo.attitude_head
   const gimbal_pitch = 90 - Number(deviceInfo?.payloads[0]?.gimbal_pitch) || 0
   viewInfoFrustum = new CreateFrustum(viewer, {
   if ([14, 0].includes(host.mode_code)) return
   const attitude_head = 180 + host.attitude_head
   const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0
   viewInfoFrustum = new CreateFrustum(taskDetailsViewer?.value, {
      position: {
         longitude: deviceInfo.longitude,
         latitude: deviceInfo.latitude,
         altitude: deviceInfo.height,
         longitude: host.longitude,
         latitude: host.latitude,
         altitude: host.height,
      },
      width: 30,
      height: 30,
@@ -143,12 +141,41 @@
   })
}
watch(deviceOsdInfo, setCreateFrustum)
function setAircraftGltf() {
   const host = deviceOsdInfo.value?.data?.host
   const aircraftEntity = taskDetailsViewer.value.entities.getById('aircraftGltf')
   const position = Cesium.Cartesian3.fromDegrees(host.longitude, host.latitude, host.height)
   if (aircraftEntity) {
      aircraftEntity.position = new Cesium.ConstantPositionProperty(position)
      return
   }
   taskDetailsViewer.value.entities.add({
      id: 'aircraftGltf',
      position,
      model: {
         uri: aircraftGltf, // 或 .glb
         scale: 1.0, // 缩放比例
         minimumPixelSize: 64, // 最小像素尺寸(保证模型远处可见)
         maximumScale: 128, // 最大缩放(可选)
      },
   })
}
watch(deviceOsdInfo, () => {
   setCreateFrustum()
   setAircraftGltf()
})
watch(taskDetails, () => {
   if (taskDetails.value.way_lines.length) {
      parsingFiles(taskDetails.value.way_lines[0].url)
   }
})
const removeMap = () => {
   taskDetailsViewer?.value.entities.removeAll()
   taskDetailsViewer?.value.destroy()
}
onBeforeUnmount(() => {
   removeMap()
})
@@ -161,7 +188,6 @@
</script>
<style scoped lang="scss">
#currentTaskMap {
   :deep() {
      .cesium-viewer {
         width: 100%;