Cesium实战三：飞行航线动画

飞行航线追踪

可视化从旧金山到哥本哈根的真实航班。

1、获取点位数据：构建飞行跟踪器 – Cesium (cesium.com)

2、在地图上添加飞行点位：循环遍历点位数据，利用Entity直接添加点至地图上。

//添加飞行点位
const addFlightPoint = () => {
  const length = filghtData.length;
  for (let i = 0; i < length; i++) {
    const dataPoint = filghtData[i];
    viewer.entities.add({
      description: `Location:(${dataPoint.longitude},${dataPoint.latitude},${dataPoint.height})`,
      position: Cesium.Cartesian3.fromDegrees(
        dataPoint.longitude, //经度
        dataPoint.latitude, //纬度
        dataPoint.height //高度
      ),
      point: {
        pixelSize: 8, //点尺寸
        color: Cesium.Color.RED, //点颜色
      },
    });
  }
};

3、将飞行点位连接起来，并创建飞行移动实体：

• 假设雷达样本采样间隔为30s,设定飞行开始时间，飞行结束时间由飞行开始时间+飞行持续时间计算出来。
• 将开始、结束时间绑定到viewer的时间轴上去，调整时间速率，开启时间动画。
• 利用采样位置属性实例Cesium.SampledPositionProperty()，循环遍历将所有点与时间创建成样本实例并利用addSample()添加进采样位置属性实例。
• 创建飞机模型实例，绑定时间间隔集合。利用 Cesium.VelocityOrientationProperty()将飞机实体方向设置为样本一致。
• 创建飞行路线，利用Cesium.PathGraphics({ width: 3 })设置线条宽度为3.
• 利用 viewer.trackedEntity = airPlaneEntity设置相机视角跟随飞机实体。

//将飞行点位连接起来，并创建飞行移动实体
const createFlyLine = () => {
  const length = filghtData.length;
  const timeStepInSeconds = 30; //雷达样本间隔
  const totalSeconds = timeStepInSeconds * (length - 1); //飞行的持续时间
  const start = Cesium.JulianDate.fromIso8601("2022-12-17T23:10:00Z"); //飞行开始时间
  const stop = Cesium.JulianDate.addSeconds(
    start,
    totalSeconds,
    new Cesium.JulianDate()
  ); //通过计算获得飞行结束时间

  viewer.clock.startTime = start; //开始时间
  viewer.clock.stopTime = stop; //停止时间
  viewer.clock.currentTime = start; //当前时间
  viewer.timeline.zoomTo(start, stop); //将视图设置为提供的时间。

  viewer.clock.multiplier = 50; //加快播放速度
  viewer.clock.shouldAnimate = true; //时针向前走
  //创建采样位置属性实例
  const positionProperty = new Cesium.SampledPositionProperty();
  for (let i = 0; i < length; i++) {
    const dataPoint = filghtData[i];
    const time = Cesium.JulianDate.addSeconds(
      start,
      i * timeStepInSeconds,
      new Cesium.JulianDate()
    );
    const position = Cesium.Cartesian3.fromDegrees(
      dataPoint.longitude,
      dataPoint.latitude,
      dataPoint.height
    );
    positionProperty.addSample(time, position); //调用addSample方法将样本实例添加进去
  }
  //添加飞机模型
  // const airPlaneUri = Cesium.IonResource.fromAssetId(1980066).then((a)=>{return a});
  // console.log(airPlaneUri);

  const airPlaneEntity = viewer.entities.add({
    //创建时间间隔集合
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({ start: start, stop: stop }), //创建时间间隔
    ]),
    position: positionProperty,
    //添加飞机模型
    model: {
      uri: "../public/GLB/Cesium_Air.glb",
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
    orientation: new Cesium.VelocityOrientationProperty(positionProperty), //设置方向与采样属性一致
    path: new Cesium.PathGraphics({ width: 3 }), //路径图形，并宽度为3
  });
  viewer.trackedEntity = airPlaneEntity; //视角跟随飞机实体
};

4、添加三维建筑、地形图层：

//添加三维建筑
const loadOSMBuildings = async () => {
  viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(96188, {
      show: true,
    })
  );
};
//添加地形
const addTerrainProvider = async () => {
  viewer.terrainProvider =
    await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
      {
        token:
          "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",
      }
    );
};

附：完整代码：