Cesium Vue（九）— 模拟飞机飞行

1. CZML

CZML是一种用来描述动态场景的JSON架构的语言，主要用于Cesium在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元，同时定义他们是怎样随时间变化的。

• CZML 是基于JSON的。
• CZML可以准确的描述值随时间变化的属性。
• CZML通过增量流的方式传送到客户端。

文件结构：

 [
    {
      id: "document",
      name: "box",
      version: "1.0",
    },
    {
      id: "shape1",
      name: "Blue box",
      position: {
        cartographicDegrees: [-114.0, 40.0, 300000.0],
      },
      box: {
        dimensions: {
          cartesian: [400000.0, 300000.0, 500000.0],
        },
        material: {
          solidColor: {
            color: {
              rgba: [0, 0, 255, 255],
            },
          },
        },
      },
    },
  ]

2. 加载czml

  let czmlUrl = "./Assets/box.czml";
  // 加载czml数据
  let promiseData = Cesium.CzmlDataSource.load(czmlUrl);
  promiseData.then((dataSource) => {
    console.log(dataSource);
    viewer.dataSources.add(dataSource);
    viewer.flyTo(dataSource);
  });

3. 模拟飞机跨洋飞行

需要先导入模拟路径的JSON文件

import planeData from "@/assets/json/plane.json";

具体脚本

  const positionProperty = new Cesium.SampledPositionProperty();
  // 时间间隔 30秒
  const timeStepInSeconds = 30;
  // 整个飞行花费的时间
  const totalSeconds = (planeData.length - 1) * timeStepInSeconds;
  // 设置起点时间
  const time = new Date("2023-10-17T18:37:00Z");
  // cesium，默认使用的是儒略日的时间
  // 所以需要起点时间转换成儒略日的时间
  const startJulianDate = Cesium.JulianDate.fromDate(time);
  // 设置终点时间
  const stopJulianDate = Cesium.JulianDate.addSeconds(
    startJulianDate,
    totalSeconds,
    new Cesium.JulianDate()
  );

  // 将查看器的时间调整到起点和结束点的范围
  viewer.clock.startTime = startJulianDate.clone();
  viewer.clock.stopTime = stopJulianDate.clone();
  viewer.clock.currentTime = startJulianDate.clone();
  viewer.timeline.zoomTo(startJulianDate, stopJulianDate);

  planeData.forEach((dataPoint, i) => {
    // 当前点的时间
    const time = Cesium.JulianDate.addSeconds(
      startJulianDate,
      i * 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,
      },
    });
  });
  // 创建飞机
  const planeEntity = viewer.entities.add({
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: startJulianDate,
        stop: stopJulianDate,
      }),
    ]),
    name: "飞机",
    // 设置飞机的可用
    position: positionProperty,
    // VelocityOrientationProperty会自动根据采样点，计算出飞机的速度和方向
    orientation: new Cesium.VelocityOrientationProperty(positionProperty),
    model: {
      uri: "./model/Air.glb",
      // minimumPixelSize: 128,
      // maximumScale: 20000,
    },
    // 绘制轨迹线
    path: new Cesium.PathGraphics({
      width: 5,
    }),
  });

  // 相机追踪运动的问题
  viewer.trackedEntity = planeEntity;
  // 设置时间速率
  viewer.clock.multiplier = 60;

效果展示