forked from drone/command-center-dashboard

罗广辉
2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7
src/components/CurrentTaskDetails/RealTimeMap.vue
@@ -5,15 +5,10 @@
import * as Cesium from 'cesium'
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'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/arrow-right-blue.png'
import { flyVisual } from '@/utils/cesium/mapUtil'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'
const { init: initTaskWayline } = useTaskWayline()
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}',
@@ -30,7 +25,7 @@
const taskDetailsViewer = inject('taskDetailsViewer')
const taskDetails = inject('taskDetails')
const deviceOsdInfo = inject('deviceOsdInfo')
const wsInfo = inject('wsInfo')
const initMap = () => {
   taskDetailsViewer.value = new Viewer('currentTaskMap', {
@@ -60,96 +55,15 @@
   taskDetailsViewer?.value.camera.setView({
      destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
   })
}
const drawWayline = lineObj => {
   const positions = lineObj.Placemark.map(item => {
      const [lon, lat] = item.Point.coordinates.split(',')
      return Cartesian3.fromDegrees(Number(lon), Number(lat))
   })
   // 起点
   taskDetailsViewer?.value.entities.add({
      position: positions[0],
      billboard: {
         image: new Cesium.ConstantProperty(rwqfdImg),
         width: 70,
         height: 70,
      },
   })
   // 终点
   taskDetailsViewer?.value.entities.add({
      position: positions[positions.length - 1],
      billboard: {
         image: new Cesium.ConstantProperty(endPointImg),
         width: 30,
         height: 30,
         verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
      },
   })
   // 路径线
   taskDetailsViewer?.value.entities.add({
      polyline: {
         width: 4,
         positions: positions,
         material: new ImageTrailMaterial({
            color: { alpha: 1, blue: 1, green: 1, red: 1 },
            speed: 20,
            image: lineImg,
            repeat: { x: Math.floor(40), y: 1 },
         }),
         clampToGround: false,
      },
   })
}
// 解析kmz文件
const parsingFiles = async url => {
   const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`)
   const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
   const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
   const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
   if (!waylinesXMLObj.Placemark.length) return
   const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
   flyVisual(allPoint, taskDetailsViewer?.value)
   drawWayline(waylinesXMLObj)
   initTaskWayline(taskDetailsViewer.value, wsInfo, taskDetails)
}
const removeMap = () => {
   taskDetailsViewer?.value.entities.removeAll()
   taskDetailsViewer?.value.destroy()
}
let viewInfoFrustum
// 设置视椎
const setCreateFrustum = () => {
   const host = deviceOsdInfo.value?.data?.host
   if (!host) return
   viewInfoFrustum?.clear()
   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: host.longitude,
         latitude: host.latitude,
         altitude: host.height,
      },
      width: 30,
      height: 30,
      fov: 20.0,
      near: 3.0,
      far: 250.0,
      roll: gimbal_pitch,
      pitch: 0,
      heading: attitude_head,
   })
}
watch(deviceOsdInfo, setCreateFrustum)
watch(taskDetails, () => {
   if (taskDetails.value.way_lines.length) {
      parsingFiles(taskDetails.value.way_lines[0].url)
   }
})
onBeforeUnmount(() => {
   removeMap()
})
@@ -162,7 +76,6 @@
</script>
<style scoped lang="scss">
#currentTaskMap {
   :deep() {
      .cesium-viewer {
         width: 100%;