CZML数据结构模拟小车运动

CZML

CZML 是一种在 Cesium 中用来描述动态场景的 JSON 架构的语言。CZML 结构主要用于在运行 Cesium 的 Web 浏览器中显示，它描述了线条、点、广告牌、模型和其他图形基元，并指定它们如何随时间变化。正是由于 CZML 的存在，用户可以简单、方便地构建出众多与时间相关的动态场景。 CZML 可以准确地描述值随时间变化的属性，比如，我们想要模拟小车移动，则只要在 CZML 中定义小车在两个不同时间点的位置，并使用 CZML 定义的插值算法，就可以准确地 在客户端显示小车在这两个时间点之间的位置。

模拟小车模型按照预设路线进行移动

1. 定义CZML数据结构：包括小车以及运动路线的位置信息(每个时间点的位置);
2. 加载czml数据中，获取小车模型、获取小车位置信息、设置小车模型朝向;
3. 视图飞到对应czml加载位置，并开启系统开启时钟动画;
4. 渲染监听模型实时位置、并计算在该位置的倾斜摄影模型高度，然后将其赋给小车，使其贴合在 3D Tiles 模型上来达到预期效果

//1.定义CZML数据结构
let czml = [
    {
      id: "document",
      version: "1.0",
      clock: {
        interval: "2022-04-14T15:18:00Z/2022-04-14T15:18:15Z",
        currentTime: "2022-04-14T15:18:00Z",
      },
    },
    {
      id: "CesiumMilkTruck",
      model: {
        gltf: "../../../src/assets/models/car.glb",
      },
	  //小车的czml数据：定义了不同时间下的位置信息，即车会随着时间的变化而变化（模拟车运动）
      position: {
        cartesian: [
          "2022-04-14T15:18:00Z",
          -1715306.5175099864,
          4993455.496718319,
          3566986.1689425386,
          "2022-04-14T15:18:12Z",
          -1715529.0193483282,
          4993383.694752825,
          3566984.256377016,
          "2022-04-14T15:18:15Z",
          -1715541.2997855775,
          4993376.825711799,
          3566988.324779788,
        ],
      },
    },
    {
      id: "Polyline",
      polyline: {
		// 运动路线的czml数据：由于运动轨迹一直存在，在此无需定义不同时间下的位置信息
        positions: {
          cartesian: [
            -1715306.5175099864, 4993455.496718319, 3566986.1689425386,
            -1715529.0193483282, 4993383.694752825, 3566984.256377016,
            -1715541.2997855775, 4993376.825711799, 3566988.324779788,
          ],
        },
        material: {
          polylineOutline: {
            color: {
              rgba: [125, 255, 128, 255],
            },
            outlineWidth: 0,
          },
        },
        width: 5,
        clampToGround: true,
      },
    },
  ];

/**
 * czml结构文件模拟小车移动
 * 直接调用loadCzml方法即可
 */
//定义 CZML 结构
export function loadCzml(viewer: Cesium.Viewer) {
  let entity; 
  let positionProperty; 
  //2.加载czml数据中，获取小车模型、获取小车位置信息、设置小车模型朝向
  let dataSourcePromise = Cesium.CzmlDataSource.load(czml); //创建 CZML 实例的Promise
  viewer.dataSources.add(dataSourcePromise).then(function (dataSource) {
    //获取小车模型
    entity = dataSource.entities.getById("CesiumMilkTruck");
    //设定小车朝向
    entity!.orientation = new Cesium.VelocityOrientationProperty(
      entity!.position
    ); //设置模型朝向
    //获取小车位置信息
    positionProperty = entity!.position;
  });
  //3.视图飞到对应czml加载位置，并开启系统开启时钟动画
  viewer.zoomTo(dataSourcePromise)
  //开启时钟动画
  viewer.clock.shouldAnimate = true;
  //4.渲染监听模型实时位置、高度并贴在 3D Tiles 模型上
  viewer.scene.postRender.addEventListener(function () {
    let position = positionProperty!.getValue(viewer.clock.currentTime);
    entity!.position = viewer.scene.clampToHeight(position, [entity!]);
  });
}