From 3ec8d3625e6fb7614e2ec4bb02ed99a3cdf4cdb7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 12 Feb 2026 11:28:47 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/jagzwxm/ja_web
---
applications/drone-command/src/components/map-container/device-map-container.vue | 229 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 129 insertions(+), 100 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 650d950..5555f05 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
@@ -5,7 +5,7 @@
:show-admin-boundary="true" :zoom-to-boundary="true" :enable-stage-emit="true"
:cluster-height="CLUSTER_HEIGHT" :detail-height="DETAIL_HEIGHT" @ready="handleMapReady"
@stage-change="handleStageChange" />
- <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }">
+ <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.rightCollapsed }">
<div class="layer-control-wrap" ref="layerWrapRef">
<div class="layer-control" @click="toggleLayerPanel">
<img :src="layerControlIcon" alt="图层控制" />
@@ -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'
@@ -78,6 +77,7 @@
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({
allDevices: {
@@ -88,7 +88,7 @@
type: Array,
default: () => [],
},
- leftCollapsed: {
+ rightCollapsed: {
type: Boolean,
default: false,
},
@@ -132,9 +132,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 +219,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)
@@ -317,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 = () => {
@@ -464,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
},
],
@@ -517,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]
}
@@ -606,7 +602,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
@@ -631,11 +629,11 @@
const pos = isEntityPosition
? getBillboardPosition(track.billboard)
: Cesium.Cartesian3.lerp(
- track.positions[seg],
- track.positions[seg + 1],
- ratio,
- new Cesium.Cartesian3()
- )
+ track.positions[seg],
+ track.positions[seg + 1],
+ ratio,
+ new Cesium.Cartesian3()
+ )
if (!pos) return
if (!isEntityPosition) {
track.billboard.position = pos
@@ -721,7 +719,9 @@
droneTrackPolylineCollection.show = detailVisible.value
droneTrackRuntime = []
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 })
@@ -745,7 +745,7 @@
width: 3,
material: trackMaterial,
})
- const droneId = `drone-alarm-${item?.alarmRecordId ?? item?.id ?? trackIndex}`
+ const droneId = `drone-alarm-${trackId}`
const startTime = viewer.clock.startTime
const stopTime = viewer.clock.stopTime
const positionProperty = new Cesium.SampledPositionProperty()
@@ -831,32 +831,27 @@
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,
+ 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)
@@ -865,6 +860,9 @@
addCockpitPrimitive(primitive)
deviceRingFillPrimitives.push(primitive)
})
+ }
+ if (selectedTargetType.value === 'device' && selectedDeviceBillboard && !devicePickMap.has(selectedDeviceBillboard.id)) {
+ closePopup()
}
reorderCockpitPrimitives()
}
@@ -979,7 +977,7 @@
if (!trimmed) return null
try {
return JSON.parse(trimmed)
- } catch (error) {}
+ } catch (error) { }
return null
}
@@ -1032,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,
@@ -1080,7 +1078,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 +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 ?? [])
@@ -1244,12 +1258,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([])
}
}
@@ -1276,7 +1290,7 @@
)
watch(
- () => props.leftCollapsed,
+ () => props.rightCollapsed,
isCollapsed => {
if (isCollapsed) showLayerPanel.value = false
}
@@ -1317,7 +1331,7 @@
setDroneVisibility(!showCluster)
}
-const handleMapReady = ({ viewer: mapViewer, publicCesium: mapPublic }) => {
+const handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => {
if (mapReadyHandled) return
mapReadyHandled = true
viewer = mapViewer
@@ -1327,10 +1341,10 @@
const height = viewer?.camera?.positionCartographic?.height
const stage = getStageByHeight(height)
updateStageDisplay(stage)
+ await loadCommandPosts()
renderDeviceEntities(props.allDevices)
loadPartitions()
loadAggregation()
- loadCommandPosts()
renderSimulatedDroneTrack(props.alarmDrones)
initDeviceClickHandler()
}
@@ -1368,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>
@@ -1387,14 +1415,14 @@
.layer-control-root {
position: absolute;
- left: 337px;
- bottom: 22px;
- z-index: 9;
+ right: 337px;
+ top: 95px;
+ z-index: 11;
transition: transform 0.3s ease-in-out;
pointer-events: none;
&.collapsed {
- transform: translateX(-317px);
+ transform: translateX(317px);
}
}
@@ -1421,12 +1449,13 @@
display: flex;
flex-direction: column;
position: absolute;
- left: 66px;
- bottom: 0;
+ right: 66px;
+ top: 0;
width: 160px;
max-height: 442px;
background: #191932;
border-radius: 8px 8px 8px 8px;
+ z-index: 99;
.panel-title {
padding: 0 16px;
--
Gitblit v1.9.3