多mb轨迹回放载荷显隐

src/js/Radar.js

@@ -2,24 +2,13 @@ export default class Radar {
   // 创建雷达罩
   constructor(options) {
     this.radius = options.radius
-    // this.viewer = options.viewer
+    this.maximumCone = options.maximumCone || 0
-    // this.id = options.id
+    this.minimumCone = options.minimumCone || 90
-    // this.entity = null
+    this.maximumClock = options.maximumClock || 0
-    // this.radius = options.radius
+    this.minimumClock = options.minimumClock || 360
-    // ;(this.longitude = options.position[0]),
+    this.entity = null
-    //   (this.latitude = options.position[1]),
+
-    //   (this.position = Cesium.Cartesian3.fromDegrees(
+    this.bindEntity = options.bindEntity
-    //     options.position[0],
-    //     options.position[1]
-    //   ))
-    // this.heading = 0
-    // this.positionArr = this.calcPoints(
-    //   options.position[0],
-    //   options.position[1],
-    //   options.radius,
-    //   0
-    // ) //储存脏数据
-    // this.addEntities()
   }
   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: {
+      position: new Cesium.CallbackProperty(() => {
-      //     positions: new Cesium.CallbackProperty(() => {
+        const position =
-      //       return Cesium.Cartesian3.fromDegreesArrayHeights(this.positionArr)
+          this.bindEntity.position._value ||
-      //     }, false),
+          this.bindEntity.position.getValue(viewer.clock.currentTime)
-      //     material: Cesium.Color.fromCssColorString('#00dcff82'),
+        return position
-      //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+      }),
-      //       0.0,
-      //       10.5e6
-      //     ),
-      //   },
       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 //可调节转动速度

src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue

@@ -25,7 +25,7 @@ const {
   changeTime,
 } = useMultiTraj()
 
-const timeRange = ref<string[]>([1183135200000 + 40 * 1000, 1183135360000])
+const timeRange = ref<string[]>([1730620780000, 1730623260000])
 
 const rangeShortcuts = {
   近一天: () => {

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

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

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 {
-const { addSatelliteTraj, removeAllMultiSatelliteTraj } = useMultiSatTraj()
+  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 => {

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

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

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 ? (
         <div class="pr-2">
           <NIcon
             size={14}
             class="cursor-pointer text-gray-500 hover:text-blue-600"
-            onClick={() => {
+            onClick={e => {
               e.stopPropagation()
+              changeRadarStatus({ type: this.type, id: option[idField] })
             }}
           >
-            <img src={RadarSwitch} class="h-full w-full" />
+            {allMultiPayloadStatusMap.value &&
+            allMultiPayloadStatusMap.value[this.type]?.get(option[idField]) ? (
+              <img src={RadarOpen} class="h-full w-full" />
+            ) : (
+              <img
+                src={RadarClose}
+                style={`filter: contrast(0.2);`}
+                class="h-full w-full"
+              />
+            )}
           </NIcon>
         </div>
       ) : 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({
               )}
             </div>
 
-            <NButton disabled={!canPlay.value} onClick={playMultiTraj}>
+            <NButton
+              disabled={!canPlay.value || showMultiHisTrajCom}
+              onClick={playMultiTraj}
+            >
               轨迹回放
             </NButton>
           </div>