多mb轨迹控制打开和显隐等

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 } =
+    const { createMultiTrajPlayback, createOrDestroyMultiTrajPlayback } =
-      useMultiMBTrajectory()
+      useMultiTraj()
 
     // const handleClick = () => {
     //   showMultiHisTrajCom.value = !showMultiHisTrajCom.value
@@ -19,9 +20,9 @@ export default defineComponent({
             trigger: () => (
               <div
                 class={`btn-class ${
-                  showMultiHisTrajCom.value ? 'checked' : ''
+                  createMultiTrajPlayback.value ? 'checked' : ''
                 }`}
-                onClick={showOrHideMultiHisTraj}
+                onClick={createOrDestroyMultiTrajPlayback}
               >
                 <NIcon size="16">
                   <svg

src/views/Content/index.vue

@@ -39,7 +39,8 @@ const { getTextConfigs, initWebSocket } = useTextReport()
 
 const { showHisImageCom } = useHisImage()
 const { showHisTrajCom } = useMBTrajectory()
-const { showMultiHisTrajCom, showMultiHisTrajDrawer } = useMultiTraj()
+const { showMultiHisTrajCom, showMultiHisTrajDrawer, createMultiTrajPlayback } =
+  useMultiTraj()
 const { showDdConfigCom } = useDaodan()
 const getConfig = async () => {
   const res = await getTextConfigs()
@@ -242,6 +243,7 @@ const showOrHideTextReport = () => {
         </div>
 
         <multi-traj-playback
+          v-if="createMultiTrajPlayback"
           class="btn-transform absolute left-0 top-0"
           :class="showMultiHisTrajDrawer ? '' : 'btn-transform-pos'"
         />

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)
-  }
-}

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)

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)
-  }
-}

src/views/MultiTrajPlayback/index.jsx

@@ -116,7 +116,7 @@ export default defineComponent({
             </div>
 
             <NButton
-              disabled={!canPlay.value || showMultiHisTrajCom}
+              disabled={!canPlay.value || showMultiHisTrajCom.value}
               onClick={playMultiTraj}
             >
               轨迹回放