From 61acdaa593760d05edf25416521b068111da77fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E4=BA=89=E9=B8=A3?= Date: Mon, 28 Apr 2025 08:56:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9Amb=E8=BD=A8=E8=BF=B9=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E6=89=93=E5=BC=80=E5=92=8C=E6=98=BE=E9=9A=90=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WidgetNav/components/MultiHisTraj.jsx | 11 +- src/views/Content/index.vue | 4 +- .../hooks/useMultiSatTraj.js | 63 ++-- .../MultiTrajPlayback/hooks/useMultiTraj.js | 34 +- .../MultiTrajPlayback/hooks/useMultiZBTraj.js | 311 +++++++++--------- src/views/MultiTrajPlayback/index.jsx | 2 +- 6 files changed, 223 insertions(+), 202 deletions(-) diff --git a/src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx b/src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx index f451cc4e7..95b0e465c 100644 --- a/src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx +++ b/src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx @@ -1,10 +1,11 @@ import { NIcon, NPopover } from 'naive-ui' -import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj' +// import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj' +import { useMultiTraj } from '@/views/MultiTrajPlayback/hooks/useMultiTraj' export default defineComponent({ setup() { - const { showMultiHisTrajCom, showOrHideMultiHisTraj } = - useMultiMBTrajectory() + const { createMultiTrajPlayback, createOrDestroyMultiTrajPlayback } = + useMultiTraj() // const handleClick = () => { // showMultiHisTrajCom.value = !showMultiHisTrajCom.value @@ -19,9 +20,9 @@ export default defineComponent({ trigger: () => (
{ const res = await getTextConfigs() @@ -242,6 +243,7 @@ const showOrHideTextReport = () => {
diff --git a/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js index fe2aa1649..2fa7b83a9 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js @@ -1,6 +1,37 @@ import { ref } from 'vue' import { useSatellite } from '../../Satellite/hooks/satellite' export function useMultiSatTraj() { + const multiSatTrajMap = new Map() + const satellitePayloadStatusMap = ref(new Map()) + const { addSatellite } = useSatellite() + + function addSatelliteTraj(satelliteList = [], timeRange) { + satelliteList.forEach(({ id, tle }) => { + if (!multiSatTrajMap.has(id)) { + const satellite = addSatellite( + { id, tle }, + { + 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() + multiSatTrajMap.delete(key) + } + } return { addSatelliteTraj, removeAllMultiSatelliteTraj, @@ -8,35 +39,3 @@ export function useMultiSatTraj() { changeSatellitePayloadStatus, } } - -const multiSatTrajMap = new Map() -const satellitePayloadStatusMap = ref(new Map()) -const { addSatellite } = useSatellite() - -function addSatelliteTraj(satelliteList = [], timeRange) { - satelliteList.forEach(({ id, tle }) => { - if (!multiSatTrajMap.has(id)) { - const satellite = addSatellite( - { id, tle }, - { - 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() - multiSatTrajMap.delete(key) - } -} diff --git a/src/views/MultiTrajPlayback/hooks/useMultiTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js index fd8130b61..a4c84c164 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js @@ -5,7 +5,6 @@ import { useMultiZBTraj } from './useMultiZBTraj' import { useMultiHJTraj } from './useMultiHJTraj' import { useMultiDDTraj } from './useMultiDDTraj' -const timesMap = ref(new Map()) const times = ref([]) const customElapsedTime = ref(0) @@ -75,9 +74,21 @@ export function useMultiTraj() { showOrHideMultiHisTrajDrawer, allMultiPayloadStatusMap, changeRadarStatus, + createMultiTrajPlayback, + createOrDestroyMultiTrajPlayback, } } +function resetAllEffect() { + checkedAllKeys.value = { + zb: [], + dd: [], + satellite: [], + hj: [], + } + resetPlayEffect() +} + // 所有树勾选的ids const checkedAllKeys = ref({ zb: [], @@ -86,6 +97,13 @@ const checkedAllKeys = ref({ hj: [], }) +const createMultiTrajPlayback = ref(false) +function createOrDestroyMultiTrajPlayback() { + createMultiTrajPlayback.value = !createMultiTrajPlayback.value + !createMultiTrajPlayback.value && + (resetAllEffect(), resetTime(), removeAllEntity()) +} + const showMultiHisTrajDrawer = ref(false) // 显示或隐藏多目标历史轨迹抽屉 function showOrHideMultiHisTrajDrawer() { @@ -97,8 +115,16 @@ const showMultiHisTrajCom = ref(false) // 显示或隐藏多目标历史轨迹组件 function showOrHideMultiHisTraj() { showMultiHisTrajCom.value = !showMultiHisTrajCom.value + !showMultiHisTrajCom.value && + (resetPlayEffect(), resetTime(), removeAllEntity()) +} - !showMultiHisTrajCom.value && (resetTime(), removeAllEntity()) +function resetPlayEffect() { + times.value = [] + customElapsedTime.value = 0 + animationSpeed.value = 1 + isAnimationRunning.value = false + isPaused.value = false } const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } = @@ -106,8 +132,6 @@ const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } = // 加载多目标历史轨迹 function loadMultiHisTraj(timeRange) { - console.log(timeRange) - const dictFunc = { zb: getZBHisTraj, dd: getDDHisTraj, @@ -174,10 +198,8 @@ const allMultiPayloadChangeFun = { } 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) diff --git a/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js index 914062726..78047d905 100644 --- a/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js +++ b/src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js @@ -2,6 +2,160 @@ import { useEntity } from '@/hooks/entity' import { getDirection } from '@/utils/pos' import { useDetectionLoad } from './useDetectionLoad' export function useMultiZBTraj() { + const multiZBTrajMap = new Map() + const { getMBEntityOpt } = useEntity() + // 添加多目标目标和轨迹 + function addMultiZBTraj(zbList) { + removeAllMultiZBTraj() + Object.keys(zbList).forEach(async id => { + if (!multiZBTrajMap.has(id)) { + const { info, list: trajList } = zbList[id] + const { targetType, country, extendInfo } = info + const ZBOpt = await getMBEntityOpt({ + id, + targetType, + country, + extendInfo: null, + }) + + const startTime = trajList[0].target_time + const endTime = trajList.at(-1).target_time + + const positions = getPositions(trajList, targetType) + + ZBOpt.billboard.rotation = new Cesium.CallbackProperty(currentTime => { + const point1 = positions.position.getValue(currentTime) + const nextTime = Cesium.JulianDate.addSeconds( + currentTime, + 2, + new Cesium.JulianDate() + ) + const point2 = positions.position.getValue(nextTime) + if (point2 && point1) { + const heading = getDirection(point1, point2) + + const angleDegrees = Cesium.Math.toDegrees(heading) + return Cesium.Math.toRadians(angleDegrees) + } + }, false) + Object.assign(ZBOpt, { + ...getPositions(trajList, targetType), + ...getPath(startTime, endTime), + // ...getAvailability(startTime, endTime), + }) + + 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() + + trajList.forEach(({ target_time, target_lon, target_lat }, index) => { + const time = Cesium.JulianDate.fromDate(new Date(target_time)) + const position = Cesium.Cartesian3.fromDegrees( + target_lon, + target_lat, + window.settings.mbDict[targetType].height + ) + positionProperty.addSample(time, position) + // viewer.entities.add({ + // position, + // point: { + // pixelSize: 3, + // color: Cesium.Color.RED, + // }, + // }) + }) + positionProperty.setInterpolationOptions({ + interpolationDegree: 2, + interpolationAlgorithm: Cesium.HermitePolynomialApproximation, + }) + + return { + position: positionProperty, + orientation: new Cesium.VelocityOrientationProperty(positionProperty), + } + } + + function getPath(startTime, endTime) { + console.log(new Date(startTime).getTime() - new Date(endTime).getTime()) + return { + path: new Cesium.PathGraphics({ + width: 0.5, + // show: true, + resolution: 1, + leadTime: new Date(startTime).getTime() - new Date(endTime).getTime(), + trailTime: new Date(startTime).getTime() - new Date(endTime).getTime(), + material: Cesium.Color.fromRandom().withAlpha(1), + }), + } + } + + function getAvailability(startTime, endTime) { + const start = Cesium.JulianDate.fromDate(new Date(startTime)) + const stop = Cesium.JulianDate.fromDate(new Date(endTime)) + return { + availability: new Cesium.TimeIntervalCollection([ + new Cesium.TimeInterval({ start: start, stop: stop }), + ]), + } + } + + function removeAllMultiZBTraj() { + for (let [key, entity] of multiZBTrajMap.entries()) { + viewer.entities.remove(entity) + multiZBTrajMap.delete(key) + } + + for (let [key, entity] of payloadMap.entries()) { + entity.forEach(item => { + viewer.entities.remove(item) + }) + payloadMap.delete(key) + } + } return { multiZBTrajMap, addMultiZBTraj, @@ -10,160 +164,3 @@ export function useMultiZBTraj() { changeZBPayloadStatus, } } - -const multiZBTrajMap = new Map() - -const { getMBEntityOpt } = useEntity() - -// 添加多目标目标和轨迹 -function addMultiZBTraj(zbList) { - removeAllMultiZBTraj() - Object.keys(zbList).forEach(async id => { - if (!multiZBTrajMap.has(id)) { - const { info, list: trajList } = zbList[id] - const { targetType, country, extendInfo } = info - const ZBOpt = await getMBEntityOpt({ - id, - targetType, - country, - extendInfo: null, - }) - - const startTime = trajList[0].target_time - const endTime = trajList.at(-1).target_time - - const positions = getPositions(trajList, targetType) - - ZBOpt.billboard.rotation = new Cesium.CallbackProperty(currentTime => { - const point1 = positions.position.getValue(currentTime) - const nextTime = Cesium.JulianDate.addSeconds( - currentTime, - 2, - new Cesium.JulianDate() - ) - const point2 = positions.position.getValue(nextTime) - if (point2 && point1) { - const heading = getDirection(point1, point2) - - const angleDegrees = Cesium.Math.toDegrees(heading) - return Cesium.Math.toRadians(angleDegrees) - } - }, false) - Object.assign(ZBOpt, { - ...getPositions(trajList, targetType), - ...getPath(startTime, endTime), - // ...getAvailability(startTime, endTime), - }) - - 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() - - trajList.forEach(({ target_time, target_lon, target_lat }, index) => { - const time = Cesium.JulianDate.fromDate(new Date(target_time)) - const position = Cesium.Cartesian3.fromDegrees( - target_lon, - target_lat, - window.settings.mbDict[targetType].height - ) - positionProperty.addSample(time, position) - // viewer.entities.add({ - // position, - // point: { - // pixelSize: 3, - // color: Cesium.Color.RED, - // }, - // }) - }) - positionProperty.setInterpolationOptions({ - interpolationDegree: 2, - interpolationAlgorithm: Cesium.HermitePolynomialApproximation, - }) - - return { - position: positionProperty, - orientation: new Cesium.VelocityOrientationProperty(positionProperty), - } -} - -function getPath(startTime, endTime) { - console.log(new Date(startTime).getTime() - new Date(endTime).getTime()) - return { - path: new Cesium.PathGraphics({ - width: 0.5, - // show: true, - resolution: 1, - leadTime: new Date(startTime).getTime() - new Date(endTime).getTime(), - trailTime: new Date(startTime).getTime() - new Date(endTime).getTime(), - material: Cesium.Color.fromRandom().withAlpha(1), - }), - } -} - -function getAvailability(startTime, endTime) { - const start = Cesium.JulianDate.fromDate(new Date(startTime)) - const stop = Cesium.JulianDate.fromDate(new Date(endTime)) - return { - availability: new Cesium.TimeIntervalCollection([ - new Cesium.TimeInterval({ start: start, stop: stop }), - ]), - } -} - -function removeAllMultiZBTraj() { - for (let [key, entity] of multiZBTrajMap.entries()) { - 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 ec08f7459..25859ba9f 100644 --- a/src/views/MultiTrajPlayback/index.jsx +++ b/src/views/MultiTrajPlayback/index.jsx @@ -116,7 +116,7 @@ export default defineComponent({ 轨迹回放