From e4439e5d0a2cba9983f013bd044fe4e22c7b7077 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 11 Feb 2026 16:35:06 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
applications/drone-command/src/components/map-container/device-map-container.vue | 597 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 302 insertions(+), 295 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index 82c1f57..cb4e5a2 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/applications/drone-command/src/components/map-container/device-map-container.vue
@@ -47,38 +47,40 @@
<script setup>
import * as Cesium from 'cesium'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
-import { geomAnalysis } from '@ztzf/utils'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
import { AREA_TYPE_STYLE_MAP, BUFFER_LEVEL_STYLES, DEFAULT_AREA_STYLE } from '@ztzf/constants'
-import { fwDefenseZonePageApi } from '@/views/areaManage/defenseZone/defenseZoneApi'
-import { fwAreaDivideListApi } from '@/views/areaManage/partition/partitionApi'
-import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/sceneConfigApi'
-import { cockpitAggregationApi } from '@/api/dataCockpit'
+
+import { newAreaDivideList, newDefenseSceneManageList } from '@/api/dataCockpit/index'
+
+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'
import droneIcon from '@/assets/images/dataCockpit/map/drone.png'
import aggregationIcon from '@/assets/images/dataCockpit/map/aggregation.png'
import commandPostIcon from '@/assets/images/dataCockpit/map/command-post.png'
import jaGeojsonRaw from '@/assets/geojson/ja.geojson?raw'
import DevicePopup from './components/DevicePopup.vue'
import DronePopup from './components/DronePopup.vue'
+import dayjs from 'dayjs'
import {
- RING_STYLES,
- addDeviceRings,
createDroneTrackMaterial,
createRadialGradientMaterial,
getTexturedVertexFormat,
} from './device-map-materials'
import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
+import { createDeviceRangePrimitiveWithHeight } from '@/utils/cesium/deviceRange'
import dzIcon from '@/assets/images/dataCockpit/map/dz-map-layer.png'
import yxIcon from '@/assets/images/dataCockpit/map/yx-map-layer.png'
const CLUSTER_HEIGHT = 100000
const DETAIL_HEIGHT = 10000
const POLYGON_HEIGHT_M = 0.2
+const DRONE_TRACK_DURATION_S = 30 * 60
+const FIXED_DRONE_TRACK_IDS = ['6000000000602', '6000000000601']
const props = defineProps({
- onlineDevices: {
+ allDevices: {
type: Array,
default: () => [],
},
@@ -101,7 +103,6 @@
})
const emit = defineEmits(['droneSignal', 'droneCounter', 'droneFavorite'])
-const DEFAULT_ZONE_PAGE_SIZE = 999
const mapRef = ref(null)
let viewer = null
@@ -112,8 +113,6 @@
let deviceBillboardCollection = null
let deviceRingOutlinePrimitives = []
let deviceRingFillPrimitives = []
-let defenseZonePrimitive = null
-let defenseZoneOutlinePrimitive = null
let partitionFillPrimitives = []
let partitionOutlinePrimitives = []
let aggregationSource = null
@@ -121,16 +120,21 @@
let droneTrackBillboardCollection = null
let droneTrackPolylineCollection = null
let droneTrackTickHandler = null
+let droneTrackRafId = null
let droneTrackStartTime = null
+let droneTrackAnimStartAt = 0
+let droneTrackLastTickAt = 0
let droneTrackRuntime = []
+let droneTrackSource = null
+let mapReadyHandled = false
let favoritePulseRafId = null
let favoritePulseStartAt = 0
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()
@@ -215,25 +219,27 @@
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,
}
pulse.entity = viewer.entities.add({
- position: new Cesium.CallbackProperty(() => billboard.position, false),
- ellipse: {
- semiMajorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
- semiMinorAxis: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
- material,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ position: new Cesium.CallbackProperty(() => getBillboardPosition(billboard), false),
+ point: {
+ pixelSize: new Cesium.CallbackProperty(() => getPulseRadius(pulse), false),
+ color: pulseBaseColor.withAlpha(0.4),
},
})
favoritePulseEntities.push(pulse)
+}
+
+const getBillboardPosition = billboard => {
+ if (!viewer || !billboard) return null
+ const position = billboard.position
+ if (position?.getValue) {
+ return position.getValue(viewer.clock.currentTime)
+ }
+ return position
}
const getDevicePosition = item => {
@@ -253,6 +259,7 @@
if (!Number.isFinite(range) || range <= 0) return null
return range
}
+
const ensureCockpitPrimitiveLayer = () => {
if (!viewer) return
@@ -284,8 +291,6 @@
if (!viewer) return
ensureCockpitPrimitiveLayer()
cockpitPrimitiveLayer.removeAll(false)
- if (defenseZonePrimitive) cockpitPrimitiveLayer.add(defenseZonePrimitive)
- if (defenseZoneOutlinePrimitive) cockpitPrimitiveLayer.add(defenseZoneOutlinePrimitive)
if (partitionFillPrimitives.length) {
partitionFillPrimitives.forEach(primitive => cockpitPrimitiveLayer.add(primitive))
}
@@ -298,10 +303,10 @@
if (deviceRingOutlinePrimitives.length) {
deviceRingOutlinePrimitives.forEach(primitive => cockpitPrimitiveLayer.add(primitive))
}
+ if (commandPostBillboardCollection) cockpitPrimitiveLayer.add(commandPostBillboardCollection)
+ if (deviceBillboardCollection) cockpitPrimitiveLayer.add(deviceBillboardCollection)
if (droneTrackPolylineCollection) cockpitPrimitiveLayer.add(droneTrackPolylineCollection)
if (droneTrackBillboardCollection) cockpitPrimitiveLayer.add(droneTrackBillboardCollection)
- if (deviceBillboardCollection) cockpitPrimitiveLayer.add(deviceBillboardCollection)
- if (commandPostBillboardCollection) cockpitPrimitiveLayer.add(commandPostBillboardCollection)
}
const clearDeviceEntities = () => {
@@ -331,17 +336,6 @@
}
}
-const clearDefenseZoneEntities = () => {
- if (!viewer) return
- if (defenseZonePrimitive) {
- removeCockpitPrimitive(defenseZonePrimitive)
- defenseZonePrimitive = null
- }
- if (defenseZoneOutlinePrimitive) {
- removeCockpitPrimitive(defenseZoneOutlinePrimitive)
- defenseZoneOutlinePrimitive = null
- }
-}
const clearPartitionEntities = () => {
if (!viewer) return
@@ -386,8 +380,6 @@
const setDetailVisibility = visible => {
detailVisible.value = visible
- if (defenseZonePrimitive) defenseZonePrimitive.show = visible
- if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = visible
if (partitionFillPrimitives.length) {
partitionFillPrimitives.forEach(primitive => {
primitive.show = visible
@@ -426,6 +418,7 @@
const setDroneVisibility = visible => {
if (droneTrackBillboardCollection) droneTrackBillboardCollection.show = visible
if (droneTrackPolylineCollection) droneTrackPolylineCollection.show = visible
+ if (droneTrackSource) droneTrackSource.show = visible
if (favoritePulseEntities.length) {
favoritePulseEntities.forEach(pulse => {
if (pulse?.entity) pulse.entity.show = visible
@@ -457,38 +450,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
},
],
@@ -510,29 +508,34 @@
height: 120
},
{
- longitude: 114.925836,
+ longitude: 114.925958,
+ latitude: 27.096963,
+ height: 400
+ },
+ {
+ longitude: 114.925836,
latitude: 27.096102,
- height: 120
+ height: 400
},
{
- longitude: 114.928384,
+ longitude: 114.928384,
latitude: 27.095866,
- height: 120
+ height: 400
},
{
- longitude: 114.929874,
+ longitude: 114.929874,
latitude: 27.096095,
- height: 120
+ height: 400
},
{
- longitude: 114.931048,
+ longitude: 114.931048,
latitude: 27.097666,
- height: 120
+ height: 400
},
- ]
+ ],
]
- return basePoints[center.trackIndex]
+ return basePoints[center.trackIndex] || basePoints[1]
}
@@ -551,6 +554,10 @@
removeCockpitPrimitive(droneTrackPolylineCollection)
}
droneTrackPolylineCollection = null
+ }
+ if (droneTrackSource) {
+ viewer.dataSources.remove(droneTrackSource)
+ droneTrackSource = null
}
droneTrackRuntime = []
if (favoritePulseEntities.length) {
@@ -585,44 +592,98 @@
}
}
-const startDroneTrackAnimation = () => {
+const ensureDroneTrackSource = () => {
if (!viewer) return
- stopDroneTrackAnimation()
- droneTrackStartTime = Cesium.JulianDate.now()
- droneTrackTickHandler = clock => {
- if (!viewer || viewer.isDestroyed?.() || !viewer.scene) {
- stopDroneTrackAnimation()
- return
- }
- if (!droneTrackRuntime.length) return
- const current = clock.currentTime
- const elapsed = Cesium.JulianDate.secondsDifference(current, droneTrackStartTime)
- droneTrackRuntime.forEach(track => {
- if (!track?.billboard || track.billboard.isDestroyed?.()) return
- if (!track.billboard._scene) return
- if (!track.positions || track.positions.length < 2) return
- const duration = track.duration
- if (duration <= 0) return
- const t = ((elapsed % duration) + duration) % duration
- const seg = Math.min(track.positions.length - 2, Math.floor(t / track.segmentDuration))
- const ratio = (t - seg * track.segmentDuration) / track.segmentDuration
- const pos = Cesium.Cartesian3.lerp(
+ if (!droneTrackSource) {
+ droneTrackSource = new Cesium.CustomDataSource('droneTrackSource')
+ viewer.dataSources.add(droneTrackSource)
+ }
+}
+
+const setupDroneTrackClock = () => {
+ if (!viewer) return
+ 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
+ viewer.clock.currentTime = startTime
+ viewer.clock.multiplier = 1
+ viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER
+ viewer.clock.clockRange = Cesium.ClockRange.CLAMPED
+}
+
+const updateDroneTrackPositions = elapsed => {
+ if (!viewer || !viewer.scene || !droneTrackRuntime.length) return
+ droneTrackRuntime.forEach(track => {
+ if (!track?.billboard || track.billboard.isDestroyed?.()) return
+ if (!track?.polyline) return
+ if (!track.positions || track.positions.length < 2) return
+ const duration = track.duration
+ if (duration <= 0) return
+ const t = Math.min(Math.max(elapsed, 0), duration)
+ const seg = Math.min(track.positions.length - 2, Math.floor(t / track.segmentDuration))
+ const ratio = (t - seg * track.segmentDuration) / track.segmentDuration
+ const isEntityPosition = typeof track.billboard?.position?.getValue === 'function'
+ const pos = isEntityPosition
+ ? getBillboardPosition(track.billboard)
+ : Cesium.Cartesian3.lerp(
track.positions[seg],
track.positions[seg + 1],
ratio,
new Cesium.Cartesian3()
)
+ if (!pos) return
+ if (!isEntityPosition) {
track.billboard.position = pos
- })
- }
- viewer.clock.onTick.addEventListener(droneTrackTickHandler)
+ }
+ const pathCount = Math.min(track.positions.length - 1, Math.floor(t / track.segmentDuration))
+ const pathPositions = track.positions.slice(0, pathCount + 1)
+ track.polyline.positions = [...pathPositions, pos]
+ })
+}
+
+const startDroneTrackAnimation = () => {
+ if (!viewer) return
+ stopDroneTrackAnimation()
+ droneTrackStartTime = viewer.clock.startTime
viewer.clock.shouldAnimate = true
+ droneTrackAnimStartAt = performance.now()
+ droneTrackLastTickAt = droneTrackAnimStartAt
+ const renderTick = now => {
+ if (!viewer || viewer.isDestroyed?.()) {
+ droneTrackRafId = null
+ return
+ }
+ const deltaSeconds = Math.max(0, (now - droneTrackLastTickAt) / 1000)
+ droneTrackLastTickAt = now
+ if (viewer.clock?.currentTime && viewer.clock?.stopTime) {
+ const nextTime = Cesium.JulianDate.addSeconds(
+ viewer.clock.currentTime,
+ deltaSeconds * (viewer.clock.multiplier || 1),
+ new Cesium.JulianDate()
+ )
+ if (Cesium.JulianDate.greaterThan(nextTime, viewer.clock.stopTime)) {
+ viewer.clock.currentTime = viewer.clock.stopTime
+ } else {
+ viewer.clock.currentTime = nextTime
+ }
+ }
+ const elapsed = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, droneTrackStartTime)
+ updateDroneTrackPositions(elapsed)
+ viewer.scene?.requestRender?.()
+ droneTrackRafId = requestAnimationFrame(renderTick)
+ }
+ droneTrackRafId = requestAnimationFrame(renderTick)
}
const stopDroneTrackAnimation = () => {
- if (!viewer || !droneTrackTickHandler) return
- viewer.clock.onTick.removeEventListener(droneTrackTickHandler)
droneTrackTickHandler = null
+ if (droneTrackRafId) {
+ cancelAnimationFrame(droneTrackRafId)
+ droneTrackRafId = null
+ }
}
const startFavoritePulseAnimation = () => {
@@ -652,12 +713,15 @@
clearDroneTrackEntities()
if (!list?.length) return
ensureDroneTrackCollections()
+ ensureDroneTrackSource()
+ setupDroneTrackClock()
droneTrackBillboardCollection.show = detailVisible.value
droneTrackPolylineCollection.show = detailVisible.value
droneTrackRuntime = []
- const segmentDuration = 6
const baseTrackColor = Cesium.Color.fromCssColorString('red')
- ; (list || []).forEach((item, trackIndex) => {
+ ; (FIXED_DRONE_TRACK_IDS || []).forEach((trackId, trackIndex) => {
+ const item = (list || []).find(entry => String(entry?.id) === String(trackId))
+ if (!item) return
const position = getDevicePosition(item)
if (!position) return
const points = buildSimulatedTrackPoints({ ...position, height: item.flightHeightM, trackIndex })
@@ -665,6 +729,7 @@
const positions = points.map(point =>
Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height)
)
+ const segmentDuration = DRONE_TRACK_DURATION_S / Math.max(positions.length - 1, 1)
let trackMaterial = createDroneTrackMaterial({
color: baseTrackColor,
speed: 4.5,
@@ -675,49 +740,73 @@
if (!trackMaterial) {
trackMaterial = Cesium.Material.fromType('Color', { color: baseTrackColor })
}
- droneTrackPolylineCollection.add({
- positions,
+ const polyline = droneTrackPolylineCollection.add({
+ positions: [positions[0]],
width: 3,
material: trackMaterial,
})
- const droneId = `drone-alarm-${item?.alarmRecordId ?? item?.id ?? trackIndex}`
- const billboard = droneTrackBillboardCollection.add({
- position: positions[positions.length - 1],
- image: droneIcon,
- width: 36,
- height: 36,
- verticalOrigin: Cesium.VerticalOrigin.CENTER,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ const droneId = `drone-alarm-${trackId}`
+ const startTime = viewer.clock.startTime
+ const stopTime = viewer.clock.stopTime
+ const positionProperty = new Cesium.SampledPositionProperty()
+ positions.forEach((pos, index) => {
+ const sampleTime = Cesium.JulianDate.addSeconds(
+ startTime,
+ index * segmentDuration,
+ new Cesium.JulianDate()
+ )
+ positionProperty.addSample(sampleTime, pos)
})
- billboard.id = droneId
+ positionProperty.setInterpolationOptions({
+ interpolationDegree: 1,
+ interpolationAlgorithm: Cesium.LinearApproximation,
+ })
+ const entity = droneTrackSource.entities.add({
+ id: droneId,
+ availability: new Cesium.TimeIntervalCollection([
+ new Cesium.TimeInterval({
+ start: startTime,
+ stop: stopTime,
+ }),
+ ]),
+ position: positionProperty,
+ orientation: new Cesium.VelocityOrientationProperty(positionProperty),
+ billboard: {
+ image: droneIcon,
+ width: 36,
+ height: 36,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ })
const speedMs = Math.round(Cesium.Cartesian3.distance(positions[0], positions[1]) / segmentDuration)
- dronePickMap.set(droneId, {
- data: {
- ...item,
- flightHeightM: item.flightHeightM ?? points[0].height,
- flightSpeedMs: item.flightSpeedMs ?? speedMs,
- longitude: item.longitude ?? points[0].longitude,
- latitude: item.latitude ?? points[0].latitude,
- },
- billboard,
- })
- if (isFavorited(item)) {
- createFavoritePulseEntity(billboard)
- }
+ dronePickMap.set(droneId, {
+ data: {
+ ...item,
+ flightHeightM: item.flightHeightM ?? points[0].height,
+ flightSpeedMs: item.flightSpeedMs ?? speedMs,
+ longitude: item.longitude ?? points[0].longitude,
+ latitude: item.latitude ?? points[0].latitude,
+ },
+ billboard: entity,
+ })
+ if (isFavorited(item)) {
+ createFavoritePulseEntity(entity)
+ }
droneTrackRuntime.push({
positions,
- billboard,
+ polyline,
+ billboard: entity,
segmentDuration,
- duration: (points.length - 1) * segmentDuration,
+ duration: DRONE_TRACK_DURATION_S,
})
})
- viewer.clock.multiplier = 1
startDroneTrackAnimation()
startFavoritePulseAnimation()
reorderCockpitPrimitives()
}
-const renderDeviceEntities = devices => {
+const renderDeviceEntities = async devices => {
if (!viewer) return
ensureCockpitPrimitiveLayer()
ensureDeviceCollections()
@@ -732,79 +821,50 @@
}
devicePickMap.clear()
deviceBillboardCollection.show = detailVisible.value
- const ringFillInstancesByStyle = RING_STYLES.map(() => [])
- const ringOutlineInstancesByStyle = RING_STYLES.map(() => [])
+ const deviceEntries = []
+ const devicePositions = []
devices.forEach((item, index) => {
+ const isOnline = String(item.status) === '0'
+
const position = getDevicePosition(item)
if (!position) return
const entityId = `online-device-${item.id ?? index}-${index}`
const rangeMeters = getDeviceRange(item)
- addDeviceRings(position, ringFillInstancesByStyle, ringOutlineInstancesByStyle, rangeMeters)
- const billboard = deviceBillboardCollection.add({
- position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0),
- image: equipmentIcon,
- width: 40,
- height: 56,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- })
- billboard.id = entityId
- devicePickMap.set(entityId, { data: item, billboard })
+ devicePositions.push({ lng: position.longitude, lat: position.latitude })
+ deviceEntries.push({ position, rangeMeters, isOnline, entityId, data: item })
})
+ 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
+ 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,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ })
+ 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)
+ if (!primitive) return
+ primitive.show = detailVisible.value
+ addCockpitPrimitive(primitive)
+ deviceRingFillPrimitives.push(primitive)
+ })
+ }
if (selectedTargetType.value === 'device' && selectedDeviceBillboard && !devicePickMap.has(selectedDeviceBillboard.id)) {
closePopup()
}
- ringFillInstancesByStyle.forEach((instances, index) => {
- if (!instances.length) return
- const ring = RING_STYLES[index]
- const alpha = ring.alpha ?? 0.64
- const innerRatio =
- typeof ring.innerRatio === 'number'
- ? ring.innerRatio
- : ring.inner && ring.outer
- ? Math.min(Math.max(ring.inner / ring.outer, 0), 0.9)
- : 0
- const material = createRadialGradientMaterial(
- Cesium.Color.fromCssColorString(ring.gradient[0]).withAlpha(alpha),
- Cesium.Color.fromCssColorString(ring.gradient[1]).withAlpha(alpha),
- {
- gamma: 1.7,
- innerCutoff: innerRatio,
- }
- )
- const primitive = new Cesium.GroundPrimitive({
- geometryInstances: instances,
- appearance: new Cesium.MaterialAppearance({
- material,
- translucent: true,
- }),
- })
- primitive.show = detailVisible.value
- addCockpitPrimitive(primitive)
- deviceRingFillPrimitives.push(primitive)
- })
- ringOutlineInstancesByStyle.forEach(instances => {
- if (!instances.length) return
- const primitive = new Cesium.GroundPolylinePrimitive({
- geometryInstances: instances,
- appearance: new Cesium.PolylineColorAppearance(),
- })
- primitive.show = detailVisible.value
- addCockpitPrimitive(primitive)
- deviceRingOutlinePrimitives.push(primitive)
- })
reorderCockpitPrimitives()
-}
-
-const getDefenseZonePositions = geom => {
- const points = geomAnalysis(geom)
- if (points.length < 3) return []
- const first = points[0]
- const last = points[points.length - 1]
- const list =
- first && last && first.longitude === last.longitude && first.latitude === last.latitude
- ? points.slice(0, -1)
- : points
- return list.map(item => Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude))
}
const elevatePositions = async (positions, height = POLYGON_HEIGHT_M) => {
@@ -827,73 +887,6 @@
const getAreaTypeStyle = areaType => {
return AREA_TYPE_STYLE_MAP?.[String(areaType)] || DEFAULT_AREA_STYLE
-}
-
-const buildZonePrimitives = async (zones, lineColor, fillColor1, fillColor2) => {
- if (!viewer) return { primitive: null, outlinePrimitive: null }
- const polygonInstances = []
- const lineInstances = []
- const positionGroups = []
- const texturedVertexFormat = getTexturedVertexFormat()
- ; (zones || []).forEach(zone => {
- if (!zone?.geom) return
- const positions = getDefenseZonePositions(zone.geom)
- if (!positions.length) return
- positionGroups.push(positions)
- })
- if (!positionGroups.length) return { primitive: null, outlinePrimitive: null }
- const elevatedGroups = await Promise.all(positionGroups.map(group => elevatePositions(group)))
- elevatedGroups.forEach(elevatedPositions => {
- if (!elevatedPositions.length) return
- const polygon = new Cesium.PolygonGeometry({
- polygonHierarchy: new Cesium.PolygonHierarchy(elevatedPositions),
- perPositionHeight: true,
- vertexFormat: texturedVertexFormat,
- })
- polygonInstances.push(
- new Cesium.GeometryInstance({
- geometry: polygon,
- })
- )
- const linePositions =
- elevatedPositions.length > 1 ? [...elevatedPositions, elevatedPositions[0]] : elevatedPositions
- lineInstances.push(
- new Cesium.GeometryInstance({
- geometry: new Cesium.PolylineGeometry({
- positions: linePositions,
- width: 2,
- }),
- attributes: {
- color: Cesium.ColorGeometryInstanceAttribute.fromColor(
- Cesium.Color.fromCssColorString(lineColor)
- ),
- },
- })
- )
- })
- let primitive = null
- if (polygonInstances.length) {
- const baseColor1 = Cesium.Color.fromCssColorString(fillColor1)
- const baseColor2 = Cesium.Color.fromCssColorString(fillColor2)
- const material = createRadialGradientMaterial(baseColor1.withAlpha(0.64), baseColor2.withAlpha(0.64))
- primitive = new Cesium.Primitive({
- geometryInstances: polygonInstances,
- appearance: new Cesium.MaterialAppearance({
- material,
- translucent: true,
- }),
- })
- addCockpitPrimitive(primitive)
- }
- let outlinePrimitive = null
- if (lineInstances.length) {
- outlinePrimitive = new Cesium.Primitive({
- geometryInstances: lineInstances,
- appearance: new Cesium.PolylineColorAppearance(),
- })
- addCockpitPrimitive(outlinePrimitive)
- }
- return { primitive, outlinePrimitive }
}
const buildPartitionPrimitives = async shapes => {
@@ -984,7 +977,7 @@
if (!trimmed) return null
try {
return JSON.parse(trimmed)
- } catch (error) {}
+ } catch (error) { }
return null
}
@@ -1037,7 +1030,7 @@
.filter(radius => Number.isFinite(radius) && radius > 0)
radii.forEach((radius, levelIndex) => {
const positions = buildEllipsePositions(centerCartesian, radius, radius)
- const style = BUFFER_LEVEL_STYLES[levelIndex] || BUFFER_LEVEL_STYLES[BUFFER_LEVEL_STYLES.length - 1]
+ const style = BUFFER_LEVEL_STYLES[levelIndex] || BUFFER_LEVEL_STYLES[BUFFER_LEVEL_STYLES.length - 1]
if (positions.length >= 3) {
shapes.push({
positions,
@@ -1062,17 +1055,6 @@
return shapes
}
-const renderDefenseZones = async zones => {
- if (!viewer) return
- clearDefenseZoneEntities()
- const result = await buildZonePrimitives(zones, '#72F3FF', '#72F3FF', '#0A7C88')
- defenseZonePrimitive = result.primitive
- defenseZoneOutlinePrimitive = result.outlinePrimitive
- if (defenseZonePrimitive) defenseZonePrimitive.show = detailVisible.value
- if (defenseZoneOutlinePrimitive) defenseZoneOutlinePrimitive.show = detailVisible.value
- reorderCockpitPrimitives()
-}
-
const renderPartitions = async zones => {
if (!viewer) return
clearPartitionEntities()
@@ -1093,20 +1075,13 @@
reorderCockpitPrimitives()
}
-const loadDefenseZones = async () => {
- if (!viewer) return
- try {
- const res = await fwDefenseZonePageApi({ current: 1, size: DEFAULT_ZONE_PAGE_SIZE })
- await renderDefenseZones(res?.data?.data?.records ?? [])
- } catch (error) {
- await renderDefenseZones([])
- }
-}
-
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'),
+ })
await renderPartitions(res?.data?.data ?? [])
} catch (error) {
await renderPartitions([])
@@ -1172,7 +1147,7 @@
const updatePopupPosition = () => {
if (!viewer || !selectedDeviceBillboard) return
- const cartesian = selectedDeviceBillboard.position
+ const cartesian = getBillboardPosition(selectedDeviceBillboard)
if (!cartesian) return
const screenPosition = viewer.scene.cartesianToCanvasCoordinates(cartesian)
if (!screenPosition) return
@@ -1235,28 +1210,44 @@
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,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
})
})
+ }
reorderCockpitPrimitives()
}
const loadAggregation = async () => {
try {
- const res = await cockpitAggregationApi({
+ const res = await newCockpitAggregationApi({
effectiveRangeKmIsNotNull: 1
})
renderAggregation(res?.data?.data ?? [])
@@ -1267,16 +1258,18 @@
const loadCommandPosts = async () => {
try {
- const res = await fwDefenseSceneListApi()
- renderCommandPosts(res?.data?.data ?? [])
+ const res = await newDefenseSceneManageList({
+ time: dayjs().format('YYYY-MM-DD HH:mm:ss')
+ })
+ await renderCommandPosts(res?.data?.data ?? [])
} catch (error) {
- renderCommandPosts([])
+ await renderCommandPosts([])
}
}
watch(
- () => props.onlineDevices,
+ () => props.allDevices,
devices => {
renderDeviceEntities(devices || [])
},
@@ -1338,7 +1331,9 @@
setDroneVisibility(!showCluster)
}
-const handleMapReady = ({ viewer: mapViewer, publicCesium: mapPublic }) => {
+const handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => {
+ if (mapReadyHandled) return
+ mapReadyHandled = true
viewer = mapViewer
publicCesium = mapPublic
ensureCockpitPrimitiveLayer()
@@ -1346,11 +1341,10 @@
const height = viewer?.camera?.positionCartographic?.height
const stage = getStageByHeight(height)
updateStageDisplay(stage)
- renderDeviceEntities(props.onlineDevices)
- loadDefenseZones()
+ await loadCommandPosts()
+ renderDeviceEntities(props.allDevices)
loadPartitions()
loadAggregation()
- loadCommandPosts()
renderSimulatedDroneTrack(props.alarmDrones)
initDeviceClickHandler()
}
@@ -1375,7 +1369,6 @@
onBeforeUnmount(() => {
document.removeEventListener('click', handleClickOutside)
clearDeviceEntities()
- clearDefenseZoneEntities()
clearPartitionEntities()
clearAggregationEntities()
clearCommandPostEntities()
@@ -1389,6 +1382,20 @@
viewer = null
publicCesium = null
})
+
+const getMap = () => {
+ return mapRef.value?.getMap()
+}
+
+// 暴露给父组件调用
+const flyTo = (options) => {
+ mapRef.value?.flyToPoint(options)
+}
+
+defineExpose({
+ getMap,
+ flyTo
+})
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.3