cesium CZML时间动态图形场景

上一节我们学习了cesium 加载CZML格式文件，这一节我们来学习CZML时间动态图形场景。

绘制第一个圆点，并且让其随着时间的变化而移动。

kml代码

// 加载kml数据
  const czml = [
    {
      id: "document",
      name: "CZML Point - Time Dynamic",
      version: "1.0",
    },
    {
      id: "point",
      // 物体在什么时间范围可用
      availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
      position: {
        // 设置物体的起始时间
        epoch: "2012-08-04T16:00:00Z",
        // 设置了四个维度，1维是时间，2维是经度，3维是纬度，4维是高度
        cartographicDegrees: [
          0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300,
          -98, 52, 150000,
        ],
      },
      point: {
        color: {
          rgba: [255, 255, 255, 128],
        },
        outlineColor: {
          rgba: [255, 0, 0, 128],
        },
        outlineWidth: 3,
        pixelSize: 15,
      },
    },
  ];

这个点能够移动是因为它的位置属性（position）被设置为一个时间动态的数组。这个数组由多个时间点（以秒为单位，相对于epoch时间）和对应的经纬度坐标以及高度组成。

epoch: "2012-08-04T16:00:00Z"：这是一个基准时间，所有的其它时间都是相对于这个时间来定义的。
cartographicDegrees: [0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98, 52, 150000]

这个数组可以分解为以下四组数据：
1. 时间为 epoch + 0 秒（即 2012-08-04T16:00:00Z），经度为 -70，纬度为 20，高度为 150000 米。
2. 时间为 epoch + 100 秒（即 2012-08-04T16:01:40Z），经度为 -80，纬度为 44，高度为 150000 米。
3. 时间为 epoch + 200 秒（即 2012-08-04T16:03:20Z），经度为 -90，纬度为 18，高度为 150000 米。
4. 时间为 epoch + 300 秒（即 2012-08-04T16:05:00Z），经度为 -98，纬度为 52，高度为 150000 米。

Cesium 会根据这些时间动态的位置数据，在每一个指定的时间点把点移动到相应的经纬度和高度位置。这就是为什么这个点会动态移动的原因。

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

实例演示地址

cesium CZML时间动态图形场景

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium CZML时间动态图形场景-实践的学习笔记

实例代码下载

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