Cesium快速入门30：CMZL动画

这一节课，我们用 CZML 让物体真正"动"起来------

给它一个时间轴 ，让它按时走路、按时变色、按时消失，全程只靠 JSON，不写半行动画代码。

---

一、时间四维：时间 + 经度 + 纬度 + 高度

CZML 把"时间"当成第一维度，后面紧跟经典三维：
[ 0秒, 经度°, 纬度°, 高度米, 200秒, 经度°, 纬度°, 高度米 ... ]

数组里每 4 个数算一个"关键帧"，Cesium 会自动插值，物体就能平滑移动。

---

二、最小动画 CZML：盒子 从 A 飞到 B

const czml = [
  {
    id: "document",
    name: "box",
    version: "1.0", // 文档头，必须
  },
  {
    id: "shape1",
    name: "Blue box",
    availability: "2023-01-01T00:00:00Z/2023-01-01T00:00:01Z", // 可见时间段
    position: {
      epoch: "2023-01-01T00:00:00Z", // 0 秒起点
      cartographicDegrees: [
        0, -114.0, 40.0, 30000.0, // 0 秒时的经纬高
        200, -100.0, 0.0, 30000.0, // 200 秒时的经纬高
      ],
    },
    box: {
      dimensions: { cartesian: [40000, 30000, 50000] }, // 长 宽 高（米）
      material: {
        solidColor: { color: { rgba: [0, 0, 255, 255] } }, // 纯蓝
      },
    },
  },
];

现在画面是静止的，因为我们还没让"时间齿轮"转起来。

---

三、让时间跑起来：打开动画 + 时间轴

1. 先把动画条放出来

   const viewer = new Cesium.Viewer("container", {
   animation: true, // 左下角播放按钮
   timeline: true, // 底部时间轴
   });

2. 设定播放速度

   viewer.clock.multiplier = 1.0; // 1 倍现实速度
   viewer.animation.viewModel.playbackRate = 1.0;

3. 如果想一进页面就自动跑，再加一行：

   viewer.shouldAnimate = true;

刷新后，点击播放键或拖动时间轴，蓝色盒子会沿着刚才给定的两个关键帧平稳飞行，全程自动插值、自动朝向、自动旋转，零代码干预。

---

四、小结与扩展

• CZML 把时间当"第一维度"，后面紧跟经度、纬度、高度即可四维插值。

• availability 控制"生命周期"，时间轴外物体自动隐藏。

• 打开 animation + timeline + shouldAnimate，一条 JSON 就能让场景"活"起来。