吉安感知网项目-前端
张含笑
2026-02-05 0d52b486d651e2bc4eaa278f1bc383fc3848e580
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -49,11 +49,10 @@
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants'
import { fwAreaDivideListApi } from '@/views/areaManage/partition/partitionApi'
import { fwDefenseSceneManageListApi } from '@/views/areaManage/sceneManage/sceneManageApi'
import { newAreaDivideList, newDefenseSceneManageList } from '@/api/dataCockpit/index'
import { cockpitAggregationApi } from '@/api/dataCockpit'
import { newCockpitAggregationApi } from '@/api/dataCockpit'
import layerControlIcon from '@/assets/images/dataCockpit/layerControl.png'
import equipmentIcon from '@/assets/images/dataCockpit/map/equipment.png'
import offlineEquipmentIcon from '@/assets/images/dataCockpit/map/offline-equipment.png'
@@ -132,9 +131,9 @@
let favoritePulseElapsed = 0
const favoritePulseEntities = []
const pulseBaseColor = Cesium.Color.fromCssColorString('#FF3B30')
const PULSE_MIN_RADIUS_M = 60
const PULSE_MAX_RADIUS_M = 180
const PULSE_DURATION_S = 1.6
const PULSE_MIN_RADIUS_M = 20
const PULSE_MAX_RADIUS_M = 80
const PULSE_DURATION_S = 1.4
const detailVisible = ref(true)
const clusterVisible = ref(false)
const countyCenterMap = new Map()
@@ -219,29 +218,15 @@
const createFavoritePulseEntity = (billboard) => {
   if (!viewer || !billboard) return
   const material = new Cesium.ImageMaterialProperty({
      image: getPulseCanvas(),
      transparent: true,
   })
   const pulse = {
      material,
      offset: Math.random() * PULSE_DURATION_S,
      entity: null,
   }
   const getPulseHeight = () => {
      const pos = getBillboardPosition(billboard)
      if (!pos) return 0
      const carto = Cesium.Cartographic.fromCartesian(pos)
      return carto?.height ?? 0
   }
   pulse.entity = viewer.entities.add({
      position: new Cesium.CallbackProperty(() => getBillboardPosition(billboard), false),
      ellipse: {
         semiMajorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
         semiMinorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
         material,
         height: new Cesium.CallbackProperty(() => getPulseHeight(), false),
         heightReference: Cesium.HeightReference.NONE,
      point: {
         pixelSize: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
         color: pulseBaseColor.withAlpha(0.4),
      },
   })
   favoritePulseEntities.push(pulse)
@@ -464,38 +449,43 @@
   const basePoints = [
      [
         {
            longitude: 114.963191,
            latitude: 27.136716,
            height: 120
            longitude: 114.964975,
            latitude: 27.134855,
            height: 200
         },
         {
            longitude: 114.957308,
            latitude: 27.138452,
            height: 120
            longitude: 114.963966,
            latitude: 27.132836,
            height: 200
         },
         {
            longitude: 114.952,
            latitude: 27.136317,
            height: 120
            longitude: 114.963966,
            latitude: 27.132836,
            height: 320
         },
         {
            longitude: 114.949293,
            latitude: 27.133864,
            height: 120
            longitude: 114.963974,
            latitude:  27.132677,
            height: 320
         },
         {
            longitude: 114.944666,
            latitude: 27.130526,
            height: 120
            longitude: 114.963432,
            latitude: 27.131665,
            height: 320
         },
         {
            longitude: 114.945909,
            latitude: 27.127845,
            height: 120
            longitude: 114.962865,
            latitude: 27.130377,
            height: 320
         },
         {
            longitude: 114.962974,
            latitude: 27.136242,
            longitude: 114.965318,
            latitude: 27.129925,
            height: 320
         },
         {
            longitude: 114.960144,
            latitude: 27.134902,
            height: 120
         },
      ],
@@ -517,29 +507,34 @@
            height: 120
         },
         {
            longitude: 114.925958,
            latitude: 27.096963,
            height: 400
         },
         {
            longitude: 114.925836, 
            latitude: 27.096102,
            height: 120
            height: 400
         },
         {
            longitude: 114.928384, 
            latitude: 27.095866,
            height: 120
            height: 400
         },
         {
            longitude: 114.929874, 
            latitude: 27.096095,
            height: 120
            height: 400
         },
         {
            longitude: 114.931048, 
            latitude: 27.097666,
            height: 120
            height: 400
         },
      ]
      ],
   ]
   return basePoints[center.trackIndex]
   return basePoints[center.trackIndex] || basePoints[1]
}
@@ -606,7 +601,9 @@
const setupDroneTrackClock = () => {
   if (!viewer) return
   const startTime = Cesium.JulianDate.now()
   const now = new Date()
   const noon = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0, 0)
   const startTime = Cesium.JulianDate.fromDate(noon)
   const stopTime = Cesium.JulianDate.addSeconds(startTime, DRONE_TRACK_DURATION_S, new Cesium.JulianDate())
   viewer.clock.startTime = startTime
   viewer.clock.stopTime = stopTime
@@ -831,32 +828,26 @@
      const entityId = `online-device-${item.id ?? index}-${index}`
      const rangeMeters = getDeviceRange(item)
      devicePositions.push({ lng: position.longitude, lat: position.latitude })
      const billboard = deviceBillboardCollection.add({
         position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0),
         image: isOnline ? equipmentIcon : offlineEquipmentIcon,
         width: 40,
         height: 56,
         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      })
      billboard.id = entityId
      devicePickMap.set(entityId, { data: item, billboard })
      deviceEntries.push({ position, rangeMeters, billboard, isOnline })
      deviceEntries.push({ position, rangeMeters, isOnline, entityId, data: item })
   })
   if (selectedTargetType.value === 'device' && selectedDeviceBillboard && !devicePickMap.has(selectedDeviceBillboard.id)) {
      closePopup()
   }
   if (deviceEntries.length) {
      const heights = await getPointPositionsHeight(devicePositions, viewer)
      deviceEntries.forEach((entry, index) => {
         const height = Number(heights?.[index]?.ASL)
         const centerHeight = Number.isFinite(height) ? height : 0
         if (entry.billboard) {
            entry.billboard.position = Cesium.Cartesian3.fromDegrees(
         const billboard = deviceBillboardCollection.add({
            position: Cesium.Cartesian3.fromDegrees(
               entry.position.longitude,
               entry.position.latitude,
               centerHeight
            )
         }
            ),
            image: entry.isOnline ? equipmentIcon : offlineEquipmentIcon,
            width: 40,
            height: 56,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
         })
         billboard.id = entry.entityId
         devicePickMap.set(entry.entityId, { data: entry.data, billboard })
         if (!entry.isOnline) return
         if (!Number.isFinite(entry.rangeMeters) || entry.rangeMeters <= 0) return
         const primitive = createDeviceRangePrimitiveWithHeight(entry.position, entry.rangeMeters, centerHeight)
@@ -865,6 +856,9 @@
         addCockpitPrimitive(primitive)
         deviceRingFillPrimitives.push(primitive)
      })
   }
   if (selectedTargetType.value === 'device' && selectedDeviceBillboard && !devicePickMap.has(selectedDeviceBillboard.id)) {
      closePopup()
   }
   reorderCockpitPrimitives()
}
@@ -1080,7 +1074,7 @@
const loadPartitions = async () => {
   if (!viewer) return
   try {
      const res = await fwAreaDivideListApi({
      const res = await newAreaDivideList({
         isSetSceneManage: 1,
         flyTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      })
@@ -1212,28 +1206,43 @@
const handleDroneSignal = () => emit('droneSignal', selectedDevice.value)
const handleDroneCounter = () => emit('droneCounter', selectedDevice.value)
const renderCommandPosts = list => {
const renderCommandPosts = async list => {
   if (!viewer) return
   ensureCommandPostCollection()
   commandPostBillboardCollection.removeAll()
   commandPostBillboardCollection.show = detailVisible.value
   const entries = []
   const positions = []
      ; (list || []).forEach((item, index) => {
         const position = getDevicePosition(item)
         if (!position) return
         entries.push({ position, index })
         positions.push({ lng: position.longitude, lat: position.latitude })
      })
   if (positions.length) {
      const heights = await getPointPositionsHeight(positions, viewer)
      entries.forEach((entry, idx) => {
         const height = Number(heights?.[idx]?.ASL)
         const centerHeight = Number.isFinite(height) ? height : 0
         commandPostBillboardCollection.add({
            position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0),
            position: Cesium.Cartesian3.fromDegrees(
               entry.position.longitude,
               entry.position.latitude,
               centerHeight
            ),
            image: commandPostIcon,
            width: 40,
            height: 56,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
         })
      })
   }
   reorderCockpitPrimitives()
}
const loadAggregation = async () => {
   try {
      const res = await cockpitAggregationApi({
      const res = await newCockpitAggregationApi({
         effectiveRangeKmIsNotNull: 1
      })
      renderAggregation(res?.data?.data ?? [])
@@ -1244,12 +1253,12 @@
const loadCommandPosts = async () => {
   try {
      const res = await fwDefenseSceneManageListApi({
      const res = await newDefenseSceneManageList({
         time: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      renderCommandPosts(res?.data?.data ?? [])
      await renderCommandPosts(res?.data?.data ?? [])
   } catch (error) {
      renderCommandPosts([])
      await renderCommandPosts([])
   }
}