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, // 底部时间轴 });

1. 设定播放速度

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

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

viewer.shouldAnimate = true;

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

---

四、小结与扩展

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

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

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