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: () => (
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({
轨迹回放