drawRoute，movePlot

src/components/Common/Cesium/index.js

@@ -47,6 +47,8 @@ export default class MyCesium {
   operations = []
   // 已添加的军标
   plots = []
+  // 已添加的路线
+  routes = []
   
   constructor(dom, options = {}) {
     const imageryProvider = new Cesium.UrlTemplateImageryProvider({
@@ -269,4 +271,86 @@ export default class MyCesium {
     this.viewer.entities.add(plot)
     this.plots.push(plot)
   }
+
+  /**
+   * 连续坐标绘制路线
+   * @param coordinates [[longitude, latitude], ...]
+   */
+  drawRouteByCoordinates(coordinates) {
+    const route = {
+      id: Cesium.createGuid(),
+      polyline: {
+        positions: Cesium.Cartesian3.fromDegreesArray(coordinates.flat()),
+        width: 2,
+        material: Cesium.Color.fromCssColorString('red'),
+        show: true,
+        clampToGround: true,
+      },
+      properties: {},
+    }
+    this.viewer.entities.add(route)
+    this.routes.push(route)
+  }
+
+  /**
+   * 连续坐标指定军标移动
+   * @param plotId 军标id
+   * @param coordinates [[longitude, latitude], ...]
+   */
+  initPlotMoving(plot, coordinates) {
+    // viewer.clock 控制了场景中时间的变化，从而驱动动画。
+    const startTime = Cesium.JulianDate.now()
+    const stopTime = Cesium.JulianDate.addSeconds(startTime, 1, new Cesium.JulianDate()) // 动画持续1秒
+    this.viewer.clock.startTime = startTime.clone()
+    this.viewer.clock.stopTime = stopTime.clone()
+    this.viewer.clock.currentTime = startTime.clone()
+    this.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED // 动画播放一次后停止:cite[2]
+    this.viewer.clock.multiplier = 1 // 时间流逝速度，默认为1
+    const positionProperty = new Cesium.SampledPositionProperty()
+    // 假设你获取到的路线坐标点数组是 positions（Cartesian3数组）
+    // 并且这些点应该在1秒内完成移动
+    const positions = Cesium.Cartesian3.fromDegreesArray(coordinates.flat()) // 你的坐标路线
+    const sampleTimeStep = 1 / (positions.length - 1) // 计算每个样本点之间的时间间隔（总时间为1秒）
+    for (let i = 0; i < positions.length; i++) {
+      const time = Cesium.JulianDate.addSeconds(startTime, i * sampleTimeStep, new Cesium.JulianDate())
+      positionProperty.addSample(time, positions[i])
+    }
+    // 将实体的位置关联到 SampledPositionProperty
+    plot.position = positionProperty
+    // 可选：让图标朝向运动方向
+    // plot.orientation = new Cesium.VelocityOrientationProperty(positionProperty) // cite[8]
+
+    plot._isMoving = true
+  }
+  movePlotByCoordinates(plotId, coordinates) {
+    // 实体
+    const targetPlot = this.viewer.entities.getById(plotId)
+    if (targetPlot._isMoving === true) {
+      // 1. 获取新的路线坐标点（假设是同步获取的，或者是在回调中）
+      const positions = Cesium.Cartesian3.fromDegreesArray(coordinates.flat()) // 你的坐标路线
+
+      // 2. 清除旧的位置样本
+      targetPlot.position._property._values = []
+      targetPlot.position._property._times = []
+
+      // 3. 计算新的开始时间和结束时间
+      const newStartTime = Cesium.JulianDate.now()
+      const newStopTime = Cesium.JulianDate.addSeconds(newStartTime, 1, new Cesium.JulianDate())
+
+      // 4. 添加新的位置样本
+      const newSampleTimeStep = 1 / (positions.length - 1)
+      for (let i = 0; i < positions.length; i++) {
+        const time = Cesium.JulianDate.addSeconds(newStartTime, i * newSampleTimeStep, new Cesium.JulianDate())
+        targetPlot.position.addSample(time, positions[i])
+      }
+
+      // 5. 重置时钟以立即开始新的动画
+      this.viewer.clock.startTime = newStartTime.clone()
+      this.viewer.clock.stopTime = newStopTime.clone()
+      this.viewer.clock.currentTime = newStartTime.clone()
+      this.viewer.clock.shouldAnimate = true // 确保动画开始播放:cite[2]
+    } else {
+      this.initPlotMoving(targetPlot, coordinates)
+    }
+  }
 }

src/views/subsystem/display/index.vue

@@ -41,15 +41,14 @@ export default {
     this.roomName = this.$route.params.roomName
     this.scenarioId = this.$route.params.scenarioId
     this.scenarioName = this.$route.params.scenarioName
+  },
+  mounted() {
+    this.cesium = new window.MyCesium('display-cesium-container')
     this.initWebsocket()
-
     window.addEventListener('beforeunload', (e) => {
       this.closeWebsocket()
       return true
     })
-  },
-  mounted() {
-    this.cesium = new window.MyCesium('display-cesium-container')
     this.getZzbzllTreeData(true)
   },
   beforeDestroy() {
@@ -65,6 +64,12 @@ export default {
             this.roomInfo.remainTime = response.data.remain_time
             this.roomInfo.duringTime = response.data.during_time
             break
+          case 'path_init':
+            this.cesium.drawRouteByCoordinates(response.data.coordinates)
+            break
+          case 'path_update':
+            this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates)
+            break
           default:
             break
         }

src/views/subsystem/model/index.vue

@@ -304,15 +304,14 @@ export default {
     this.roomName = this.$route.params.roomName
     this.scenarioId = this.$route.params.scenarioId
     this.scenarioName = this.$route.params.scenarioName
+  },
+  mounted() {
+    this.cesium = new window.MyCesium('model-cesium-container')
     this.initWebsocket()
-
     window.addEventListener('beforeunload', (e) => {
       this.closeWebsocket()
       return true
     })
-  },
-  mounted() {
-    this.cesium = new window.MyCesium('model-cesium-container')
     this.getZzbzllTreeData(true)
   },
   beforeDestroy() {
@@ -328,6 +327,12 @@ export default {
             this.roomInfo.remainTime = response.data.remain_time
             this.roomInfo.duringTime = response.data.during_time
             break
+          case 'path_init':
+            this.cesium.drawRouteByCoordinates(response.data.coordinates)
+            break
+          case 'path_update':
+            this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates)
+            break
           default:
             break
         }

src/views/subsystem/scene/index.vue

@@ -285,15 +285,14 @@ export default {
     this.roomName = this.$route.params.roomName
     this.scenarioId = this.$route.params.scenarioId
     this.scenarioName = this.$route.params.scenarioName
+  },
+  mounted() {
+    this.cesium = new window.MyCesium('scene-cesium-container')
     this.initWebsocket()
-
     window.addEventListener('beforeunload', (e) => {
       this.closeWebsocket()
       return true
     })
-  },
-  mounted() {
-    this.cesium = new window.MyCesium('scene-cesium-container')
     this.getZzbzllTreeData(true)
     this.getModelListData()
   },
@@ -310,6 +309,12 @@ export default {
             this.roomInfo.remainTime = response.data.remain_time
             this.roomInfo.duringTime = response.data.during_time
             break
+          case 'path_init':
+            this.cesium.drawRouteByCoordinates(response.data.coordinates)
+            break
+          case 'path_update':
+            this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.coordinates)
+            break
           default:
             break
         }