feat:实现通讯波跟随两点，待完善监听和关闭等其他逻辑

src/js/Beam.js

@@ -102,13 +102,13 @@ export class Beam {
     this.topEntity = opt.topEntity
     this.bottomEntity = opt.bottomEntity
     this.color = opt.color || '#00dcff82'
-    this.topRadius = opt.topRadius || 0
-    this.bottomRadius = opt.bottomRadius || 10000
-    this.duration = opt.duration || 2000
+    this.topRadius = opt.topRadius || 100
+    this.bottomRadius = opt.bottomRadius || 200000
+    this.duration = opt.duration || 3000
     this.repeat = opt.repeat || 160
 
     this.centerPoint = null
-    this.distance = null
+    this.distance = 0
     this.beamEntity = null
 
     this._listener = null
@@ -118,13 +118,10 @@ export class Beam {
     const cylinder = viewer.entities.add({
       // name: 'Red cone',
       position: this.centerPoint,
-      // orientation: null,
       cylinder: {
-        topRadius: 0,
-        bottomRadius: 10000,
+        topRadius: this.topRadius,
+        bottomRadius: this.bottomRadius,
         length: this.distance,
-        topSurface: true, //新增参数，控制顶部是否渲染
-        bottomSurface: true, //新增参数，控制底部是否渲染
         material: new Cesium.BeamPrimitiveMaterialProperty({
           color: Cesium.Color.fromCssColorString(this.color),
           thickness: 0.2,
@@ -135,43 +132,46 @@ export class Beam {
     })
     this.beamEntity = cylinder
 
+    // const that = this
     this._listener = (scene, time) => {
       if (!this.beamEntity) {
         return
       }
       let topPosition = Cesium.Property.getValueOrUndefined(
         this.topEntity.position,
-        time,
-        new Cesium.Cartesian3()
+        time
       )
-      let bottomPosition = this.bottomEntity.position
-      console.log(bottomPosition, 'bottomPosition')
+      if (!topPosition) {
+        return
+      }
+      // console.log(topPosition, 'topPosition')
+      let bottomPosition = this.bottomEntity.position._value
+      // console.log(bottomPosition, 'bottomPosition')
       this.centerPoint = this._getCenterPoint(topPosition, bottomPosition)
-      console.log(this.centerPoint, 'centerPoint')
+      // console.log(this.centerPoint, 'centerPoint')
       this.beamEntity.position = this.centerPoint
       this.distance = this._getDistance(topPosition, bottomPosition)
       this.beamEntity.cylinder.length = this.distance
 
-      console.log(this.distance)
-      const orientation = this._getOrientation(topPosition, bottomPosition)
+      const orientation = this._getOrientation(bottomPosition, topPosition)
 
       this.beamEntity.orientation = orientation
+      console.log('1')
+      // throw new Error('TODO: Beam.js:26 Uncaught Error: TODO: Beam.js:26')
     }
 
-    viewer.scene.preRender.addEventListener(this._listener)
+    // viewer.scene.preRender.addEventListener(this._listener)
+    setInterval(() => {
+      this._listener(viewer.scene, viewer.clock.currentTime)
+    }, 100)
   }
 
   _getCenterPoint(t, b) {
-    this.centerPoint = Cesium.Cartesian3.lerp(
-      t,
-      b,
-      0.5,
-      new Cesium.Cartesian3()
-    )
+    return Cesium.Cartesian3.lerp(t, b, 0.5, new Cesium.Cartesian3())
   }
 
   _getDistance(t, b) {
-    this.distance = Cesium.Cartesian3.distance(t, b)
+    return Cesium.Cartesian3.distance(t, b)
   }
 
   _getOrientation(t, b) {

src/views/Satellite/hooks/satellite.ts

@@ -141,7 +141,7 @@ function createSatelliteCommunicationPayload(satId: string) {
       console.log(mbId, 'mbId')
       if (mubiaoMap.has(mbId)) {
         const beam = new Beam({
-          topEntity: satelliteMap.get(satId),
+          topEntity: satelliteMap.get(satId).entity,
           bottomEntity: mubiaoMap.get(mbId),
         })