From 20f73b33641fc70ffaef810a355d750150e47065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E4=BA=89=E9=B8=A3?= Date: Sun, 27 Apr 2025 17:11:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9Amb=E8=BD=A8=E8=BF=B9=E5=9B=9E=E6=94=BE?= =?UTF-8?q?=E8=BD=BD=E8=8D=B7=E6=98=BE=E9=9A=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/image/multiTraj/关备份.png | Bin 0 -> 766 bytes src/js/Radar.js | 87 ++++++------------ .../components/MultiHisTrajectory.vue | 2 +- .../hooks/useDetectionLoad.js | 80 ++++++++++++++++ .../hooks/useMultiSatTraj.js | 17 +++- .../MultiTrajPlayback/hooks/useMultiTraj.js | 42 ++++++++- .../hooks/useMultiTrajReq.js | 2 +- .../MultiTrajPlayback/hooks/useMultiZBTraj.js | 50 +++++++++- src/views/MultiTrajPlayback/index.jsx | 33 ++++++- 9 files changed, 240 insertions(+), 73 deletions(-) create mode 100644 src/assets/image/multiTraj/关备份.png create mode 100644 src/views/MultiTrajPlayback/hooks/useDetectionLoad.js diff --git a/src/assets/image/multiTraj/关备份.png b/src/assets/image/multiTraj/关备份.png new file mode 100644 index 0000000000000000000000000000000000000000..9cb7ed3973219223e6096a3d8abe43d609a5a8b7 GIT binary patch literal 766 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh#=yXs;V}d} z`f2Fj?<^m9inh8ruIggAy>r)m*Od_mE_c0Jt=P;FipjZVF7bXa7#sy|eFg^^Ih6UZmV|f!*t9?4s5S zmt;=wdcncn{Jv0jMLVM@lM*Y}^2Q8{NktD!i)+i*e=uf@KFVdQ&MBb@00;X-lmGw# literal 0 HcmV?d00001 diff --git a/src/js/Radar.js b/src/js/Radar.js index 6e4550857..a10ce565d 100644 --- a/src/js/Radar.js +++ b/src/js/Radar.js @@ -2,24 +2,13 @@ export default class Radar { // 创建雷达罩 constructor(options) { this.radius = options.radius - // this.viewer = options.viewer - // this.id = options.id - // this.entity = null - // this.radius = options.radius - // ;(this.longitude = options.position[0]), - // (this.latitude = options.position[1]), - // (this.position = Cesium.Cartesian3.fromDegrees( - // options.position[0], - // options.position[1] - // )) - // this.heading = 0 - // this.positionArr = this.calcPoints( - // options.position[0], - // options.position[1], - // options.radius, - // 0 - // ) //储存脏数据 - // this.addEntities() + this.maximumCone = options.maximumCone || 0 + this.minimumCone = options.minimumCone || 90 + this.maximumClock = options.maximumClock || 0 + this.minimumClock = options.minimumClock || 360 + this.entity = null + + this.bindEntity = options.bindEntity } cartesian32LonLat(cartesian3) { const cartographic = @@ -31,50 +20,20 @@ export default class Radar { return [lon, lat] } getRadar() { - // this.entity = this.viewer.entities.add({ - // id: this.id, - // position: this.position, - // wall: { - // positions: new Cesium.CallbackProperty(() => { - // return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr) - // }, false), - // material: Cesium.Color.fromCssColorString('#00dcff82'), - // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( - // 0.0, - // 10.5e6 - // ), - // }, - // ellipsoid: { - // radii: new Cesium.Cartesian3( - // this.radius, - // this.radius, - // this.radius - // ), - // maximumCone: Cesium.Math.toRadians(90), - // material: Cesium.Color.fromCssColorString('#00dcff82'), - // outline: true, - // outlineColor: Cesium.Color.fromCssColorString('#00dcff'), - // outlineWidth: 1, - // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( - // 0.0, - // 10.5e8 - // ), - // }, - // }) return { - // wall: { - // positions: new Cesium.CallbackProperty(() => { - // return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr) - // }, false), - // material: Cesium.Color.fromCssColorString('#00dcff82'), - // distanceDisplayCondition: new Cesium.DistanceDisplayCondition( - // 0.0, - // 10.5e6 - // ), - // }, + position: new Cesium.CallbackProperty(() => { + const position = + this.bindEntity.position._value || + this.bindEntity.position.getValue(viewer.clock.currentTime) + return position + }), ellipsoid: { + innerRadii: new Cesium.Cartesian3(1.0, 1.0, 1.0), radii: new Cesium.Cartesian3(this.radius, this.radius, this.radius), - maximumCone: Cesium.Math.toRadians(90), + maximumCone: Cesium.Math.toRadians(this.maximumCone), + minimumCone: Cesium.Math.toRadians(this.minimumCone), + maximumClock: Cesium.Math.toRadians(this.maximumClock), + minimumClock: Cesium.Math.toRadians(this.minimumClock), material: Cesium.Color.fromCssColorString('#00dcff82'), outline: true, outlineColor: Cesium.Color.fromCssColorString('#00dcff'), @@ -83,10 +42,20 @@ export default class Radar { 0.0, 10.5e8 ), + slicePartitions: 24, + stackPartitions: 36, }, + orientation: this.bindEntity.orientation, } + // this.addPostRender() } + + create() { + this.entity = viewer.entities.add(this.getRadar()) + + return this.entity + } addPostRender() { this.viewer.clock.onTick.addEventListener(() => { this.heading += 1.0 //可调节转动速度 diff --git a/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue b/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue index 40c39d0bb..efdfeef12 100644 --- a/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue +++ b/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue @@ -25,7 +25,7 @@ const { changeTime, } = useMultiTraj() -const timeRange = ref([1183135200000 + 40 * 1000, 1183135360000]) +const timeRange = ref([1730620780000, 1730623260000]) const rangeShortcuts = { 近一天: () => { diff --git a/src/views/MultiTrajPlayback/hooks/useDetectionLoad.js b/src/views/MultiTrajPlayback/hooks/useDetectionLoad.js new file mode 100644 index 000000000..b42cb9f76 --- /dev/null +++ b/src/views/MultiTrajPlayback/hooks/useDetectionLoad.js @@ -0,0 +1,80 @@ +import Radar from '@/js/Radar' + +export function useDetectionLoad() { + return { + addSectorDetectionLoad, + addConicDetectionLoad, + } +} + +function addSectorDetectionLoad({ + radius, + maximumCone, + minimumCone, + maximumClock, + minimumClock, + bindEntity, +}) { + const radar = new Radar({ + radius, + maximumCone, + minimumCone, + maximumClock, + minimumClock, + bindEntity, + }) + + const sector = radar.create() + return sector +} + +function addConicDetectionLoad({ + radius, + angle, + bindEntity, + heading, + pitch, + show = true, +}) { + const conicSensor = new CesiumSensorVolumes.ConicSensorGraphics({ + show: true, + radius: radius * 1000, + innerHalfAngle: 0, + outerHalfAngle: Cesium.Math.toRadians(angle / 2), + minimumClockAngle: 0, + maximumClockAngle: 2 * Math.PI, + showIntersection: true, + intersectionColor: new Cesium.Color(1, 1, 1, 1), + intersectionWidth: 3, + lateralSurfaceMaterial: new Cesium.Color(0.0, 1.0, 1.0, 0.3), + }) + + const conic = viewer.entities.add({ + position: new Cesium.CallbackProperty(() => { + const position = + bindEntity.position._value || + bindEntity.position.getValue(viewer.clock.currentTime) + return position + }), + orientation: new Cesium.CallbackProperty(() => { + const position = + bindEntity.position._value || + bindEntity.position.getValue(viewer.clock.currentTime) + return ( + position && + Cesium.Transforms.headingPitchRollQuaternion( + position, + new Cesium.HeadingPitchRoll( + // Cesium.Math.toRadians(heading), + Cesium.Math.toRadians(heading), + Cesium.Math.toRadians(pitch), + 0 + // Cesium.Math.toRadians(pitch) + ) // 初始朝向 + ) + ) + }), + conicSensor: conicSensor, + }) + return conic +} diff --git a/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js index 0c26dc685..fe2aa1649 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js @@ -1,15 +1,19 @@ import { ref } from 'vue' import { useSatellite } from '../../Satellite/hooks/satellite' export function useMultiSatTraj() { - return { addSatelliteTraj, removeAllMultiSatelliteTraj } + return { + addSatelliteTraj, + removeAllMultiSatelliteTraj, + satellitePayloadStatusMap, + changeSatellitePayloadStatus, + } } const multiSatTrajMap = new Map() - +const satellitePayloadStatusMap = ref(new Map()) const { addSatellite } = useSatellite() function addSatelliteTraj(satelliteList = [], timeRange) { - console.log(satelliteList) satelliteList.forEach(({ id, tle }) => { if (!multiSatTrajMap.has(id)) { const satellite = addSatellite( @@ -18,11 +22,18 @@ function addSatelliteTraj(satelliteList = [], timeRange) { startTime: new Date(timeRange[0]).toISOString() || new Date(), } ) + + satellite.sensor = true multiSatTrajMap.set(id, satellite) + satellitePayloadStatusMap.value.set(id, satellite.sensor) } }) } +function changeSatellitePayloadStatus(id, status) { + multiSatTrajMap.has(id) && (multiSatTrajMap.get(id).sensor = status) +} + function removeAllMultiSatelliteTraj() { for (let [key, satellite] of multiSatTrajMap.entries()) { satellite.destroy() diff --git a/src/views/MultiTrajPlayback/hooks/useMultiTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js index f52aeab53..fd8130b61 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js @@ -73,6 +73,8 @@ export function useMultiTraj() { loadMultiHisTraj, showMultiHisTrajDrawer, showOrHideMultiHisTrajDrawer, + allMultiPayloadStatusMap, + changeRadarStatus, } } @@ -91,6 +93,7 @@ function showOrHideMultiHisTrajDrawer() { } const showMultiHisTrajCom = ref(false) + // 显示或隐藏多目标历史轨迹组件 function showOrHideMultiHisTraj() { showMultiHisTrajCom.value = !showMultiHisTrajCom.value @@ -138,8 +141,18 @@ function loadMultiHisTraj(timeRange) { setTimeRange(timeRange) } -const { addMultiZBTraj, removeAllMultiZBTraj } = useMultiZBTraj() -const { addSatelliteTraj, removeAllMultiSatelliteTraj } = useMultiSatTraj() +const { + addMultiZBTraj, + removeAllMultiZBTraj, + ZBPayloadStatusMap, + changeZBPayloadStatus, +} = useMultiZBTraj() +const { + addSatelliteTraj, + removeAllMultiSatelliteTraj, + satellitePayloadStatusMap, + changeSatellitePayloadStatus, +} = useMultiSatTraj() const { addHJTraj, removeAllMultiHJTraj } = useMultiHJTraj() const { addMultiDDTraj, removeAllMultiDDTraj } = useMultiDDTraj() @@ -149,6 +162,31 @@ const typeFunc = { satellite: { add: addSatelliteTraj, remove: removeAllMultiSatelliteTraj }, hj: { add: addHJTraj, remove: removeAllMultiHJTraj }, } + +const allMultiPayloadStatusMap = ref({ + zb: ZBPayloadStatusMap, + satellite: satellitePayloadStatusMap, +}) + +const allMultiPayloadChangeFun = { + zb: changeZBPayloadStatus, + satellite: changeSatellitePayloadStatus, +} + +function changeRadarStatus({ id, type }) { + console.log(id, type) + const statusMap = allMultiPayloadStatusMap.value[type] + if (statusMap) { + console.log(statusMap) + if (statusMap.has(id)) { + const status = !statusMap.get(id) + statusMap.set(id, status) + typeof allMultiPayloadChangeFun[type] === 'function' && + allMultiPayloadChangeFun[type](id, status) + } + } +} + // 添加轨迹实体 function addAllEntity(data) { Object.keys(typeFunc).forEach(key => { diff --git a/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js b/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js index 3267a63f6..8ff528f24 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js @@ -87,7 +87,7 @@ async function getSatelliteHisTraj({ ids, timeRange }) { setTimeout(() => { resolve([ { - id: 'ONEWEB-0012', + id: '11', name: 'ONEWEB-0012', tle: `ONEWEB-0012 1 44057U 19010A 24310.58073783 .00000090 00000+0 20246-3 0 9997 diff --git a/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js index bcc2b8846..914062726 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js @@ -1,10 +1,13 @@ import { useEntity } from '@/hooks/entity' import { getDirection } from '@/utils/pos' +import { useDetectionLoad } from './useDetectionLoad' export function useMultiZBTraj() { return { multiZBTrajMap, addMultiZBTraj, removeAllMultiZBTraj, + ZBPayloadStatusMap, + changeZBPayloadStatus, } } @@ -23,7 +26,7 @@ function addMultiZBTraj(zbList) { id, targetType, country, - extendInfo, + extendInfo: null, }) const startTime = trajList[0].target_time @@ -46,7 +49,6 @@ function addMultiZBTraj(zbList) { return Cesium.Math.toRadians(angleDegrees) } }, false) - Object.assign(ZBOpt, { ...getPositions(trajList, targetType), ...getPath(startTime, endTime), @@ -56,11 +58,48 @@ function addMultiZBTraj(zbList) { console.log('ZBOpt', ZBOpt) const ZBEntity = viewer.entities.add(ZBOpt) + + // ZBEntity.billboard.show = false + // ZBEntity.model.show = true + addPayload(id, extendInfo, ZBEntity) multiZBTrajMap.set(id, ZBEntity) } }) } +const { addSectorDetectionLoad, addConicDetectionLoad } = useDetectionLoad() + +const payloadMap = new Map() +const ZBPayloadStatusMap = ref(new Map()) + +function addPayload(id, extendInfo, ZBEntity) { + extendInfo?.radarPayload && + extendInfo.radarPayload.forEach(item => { + const radar = addSectorDetectionLoad({ + id: `${item.id}`, + bindEntity: ZBEntity, + ...item, + }) + payloadMap.set(id, [...(payloadMap.get(id) || []), radar]) + }) + extendInfo?.airplaneConicPayload && + extendInfo.airplaneConicPayload.forEach(item => { + const conic = addConicDetectionLoad({ + id: `${item.id}`, + bindEntity: ZBEntity, + ...item, + }) + payloadMap.set(id, [...(payloadMap.get(id) || []), conic]) + }) + // console.log(payloadMap, 'payloadMap') + ZBPayloadStatusMap.value.set(id, true) +} +function changeZBPayloadStatus(id, status) { + payloadMap.get(id)?.forEach(item => { + item.show = status + }) +} + function getPositions(trajList, targetType) { const positionProperty = new Cesium.SampledPositionProperty() @@ -120,4 +159,11 @@ function removeAllMultiZBTraj() { viewer.entities.remove(entity) multiZBTrajMap.delete(key) } + + for (let [key, entity] of payloadMap.entries()) { + entity.forEach(item => { + viewer.entities.remove(item) + }) + payloadMap.delete(key) + } } diff --git a/src/views/MultiTrajPlayback/index.jsx b/src/views/MultiTrajPlayback/index.jsx index e40779314..ec08f7459 100644 --- a/src/views/MultiTrajPlayback/index.jsx +++ b/src/views/MultiTrajPlayback/index.jsx @@ -5,7 +5,8 @@ import Tree from '@/components/Tree/index.vue' import TabsCom from '@/components/Tabs/index.vue' import Bg from '@/assets/image/multiTraj/编组.png' -import RadarSwitch from '@/assets/image/multiTraj/开.png' +import RadarOpen from '@/assets/image/multiTraj/开.png' +import RadarClose from '@/assets/image/multiTraj/关备份.png' import { useMultiTrajReq } from './hooks/useMultiTrajReq' import { useMultiTraj } from './hooks/useMultiTraj' @@ -13,6 +14,7 @@ export default defineComponent({ name: 'MultiTrajPlayback', setup() { const { allTreeData, getAllTree } = useMultiTrajReq() + onMounted(() => { getAllTree() }) @@ -23,17 +25,30 @@ export default defineComponent({ dd: 'dd', hj: 'hj', } + function renderSuffix({ option }) { + const idField = this.type === 'satellite' ? 'id' : 'dataId' + return option.extendInfo || option.data?.extendInfo ? (
{ + onClick={e => { e.stopPropagation() + changeRadarStatus({ type: this.type, id: option[idField] }) }} > - + {allMultiPayloadStatusMap.value && + allMultiPayloadStatusMap.value[this.type]?.get(option[idField]) ? ( + + ) : ( + + )}
) : undefined @@ -41,8 +56,11 @@ export default defineComponent({ const { checkedAllKeys, + showMultiHisTrajCom, showOrHideMultiHisTraj, showOrHideMultiHisTrajDrawer, + allMultiPayloadStatusMap, + changeRadarStatus, } = useMultiTraj() const multiTrajAllTreeTabConfig = computed(() => { @@ -58,7 +76,9 @@ export default defineComponent({ label-field={key === 'satellite' ? 'name' : 'nodeName'} showSearch renderSuffix={ - ['zb', 'satellite'].includes(key) ? renderSuffix : () => ({}) + ['zb', 'satellite'].includes(key) + ? renderSuffix.bind({ type: key }) + : () => ({}) } v-model:checked={checkedAllKeys.value[key]} /> @@ -95,7 +115,10 @@ export default defineComponent({ )} - + 轨迹回放