之前我们学习了cesium实现飞机飞行的效果，今天我们来实现动态插入飞行节点的效果。我们每隔一秒插入一个飞行轨迹节点，我们可以在这个模拟方法中请求接口获取数据插入到cesium飞行轨迹节点中。

cesium版本

"cesium": "1.93.0",

动态效果

关键代码

我们先增加10条轨迹数据，让飞机飞行起来，再每隔1秒向轨迹中增加一条数据。

 let currentIndex = 0;

  // 先加载前10条数据
  for (let i = 0; i < 10 && i < planeData.length; i++) {
    addDataPoint(i);
  }
  currentIndex = 10;

  // 每秒加载一条数据
  const interval = setInterval(() => {
    if (currentIndex >= planeData.length) {
      clearInterval(interval);
      return;
    }
    addDataPoint(currentIndex);
    currentIndex++;
  }, 1000);

  function addDataPoint(index) {
    const dataPoint = planeData[index];
    const time = Cesium.JulianDate.addSeconds(startJulianDate, index * timeStepInSeconds, new Cesium.JulianDate());
    const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);
    positionProperty.addSample(time, position);

    viewer.entities.add({
      position: position,
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
    });
  }

实例演示地址

cesium 实现跟随飞机飞行动态插入飞行节点

实例代码下载

代码运行环境：vue3 + vite + js nodejs 16