Cesium 入门教程（十二）：时间动画实例

一，Cesium 实际示例（含源代码）

1、vue+cesium： 使用CallbackProperty动态更改位置

查看源代码：https://dajianshi.blog.csdn.net/article/details/145725150

2、vue+cesium： 实现动态图片旋转

查看源代码： https://dajianshi.blog.csdn.net/article/details/139420210

3、vue+cesium： 加载czml文件，显示小汽车运行状态

查看源代码：https://dajianshi.blog.csdn.net/article/details/130038751

4、vue+cesium： 飞机根据经纬度高度数据，沿着轨迹飞行

查看源代码：https://dajianshi.blog.csdn.net/article/details/145884863

5、vue+cesium： 实现地球自转效果

查看源代码：https://dajianshi.blog.csdn.net/article/details/129714282

二，时间动画基础知识

1. 时间系统基础

Cesium 使用 JulianDate 处理时间，它支持高精度的日期和时间计算，适合处理从过去到未来的时间序列数据。

// 创建一个特定时间（2023年1月1日）
const start = Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z");

// 创建结束时间（2023年1月2日）
const end = Cesium.JulianDate.addDays(start, 1, new Cesium.JulianDate());

// 设置场景的时间范围
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = end.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放到结束时间
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // 按倍数播放
viewer.clock.multiplier = 1000; // 时间流逝速度（1000倍实时速度）

2. 时间驱动的实体动画

通过给实体（Entity）的属性设置时间变化规律（SampledProperty），可实现随时间动态变化的效果。

// 创建一个随时间移动的点
const position = new Cesium.SampledPositionProperty();

// 添加时间点和对应的位置（经纬度）
position.addSample(
  Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z"),
  Cesium.Cartesian3.fromDegrees(116, 40, 1000) // 起点：北京附近
);

position.addSample(
  Cesium.JulianDate.fromIso8601("2023-01-01T01:00:00Z"),
  Cesium.Cartesian3.fromDegrees(117, 40, 1000) // 1小时后移动到东边
);

position.addSample(
  Cesium.JulianDate.fromIso8601("2023-01-01T02:00:00Z"),
  Cesium.Cartesian3.fromDegrees(118, 41, 1000) // 2小时后继续移动
);

// 创建实体
viewer.entities.add({
  position: position,
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED
  },
  path: { // 显示移动轨迹
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.1,
      color: Cesium.Color.YELLOW
    }),
    width: 5
  }
});

3. 时间动画控制

Cesium 提供了默认的时间控制组件（播放/暂停、速度调节），也可通过代码手动控制：

// 播放动画
viewer.clock.shouldAnimate = true;

// 暂停动画
viewer.clock.shouldAnimate = false;

// 跳转到指定时间
const targetTime = Cesium.JulianDate.fromIso8601("2023-01-01T00:30:00Z");
viewer.clock.currentTime = targetTime;

// 调整播放速度
viewer.clock.multiplier = 2000; // 加快到2000倍

// 监听时间变化事件
viewer.clock.onTick.addEventListener((clock) => {
  const currentTime = clock.currentTime;
  console.log("当前时间:", Cesium.JulianDate.toIso8601(currentTime));
});

4. 时间动态图层

除了实体，Cesium 中的图层也可随时间变化，例如时序影像图层：

// 创建时序影像图层（示例：假设已有多个不同时间的影像）
const timeDynamicImagery = new Cesium.TimeDynamicImagery({
  clock: viewer.clock,
  imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    url: "https://example.com/tdt/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
    // 时间格式化模板
    timeInterval: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: end,
        data: { Time: "${year}-${month}-${day}" } // 动态替换URL中的时间参数
      })
    ])
  })
});

// 添加到图层
viewer.imageryLayers.add(timeDynamicImagery);

5. 关键概念

• Clock：场景的时间控制器，管理当前时间、播放状态、速度等。
• SampledProperty：存储随时间变化的属性值（如位置、颜色、大小），支持插值计算。
• TimeInterval：定义时间区间，用于关联数据与时间范围。
• ClockRange：控制时间到达结束点后的行为（LOOP_STOP 循环，CLAMPED 停止）。

6. 实际应用场景

• 模拟车辆、船舶、飞机的历史轨迹或预测路径。
• 展示卫星的轨道运行和覆盖范围变化。
• 可视化气象数据（如云层移动、温度变化）随时间的演变。
• 播放城市建设的时序过程（如建筑施工进度）。

通过结合时间动画与 Cesium 的 3D 场景能力，可以创建极具沉浸感的动态可视化效果。

三，Cesium 入门教程 -系列文章列表

• Cesium 入门教程（一）：应该如何学习Cesium
• Cesium 入门教程（二）：界面的基础配置
• Cesium 入门教程（三）：加载不同的地图底图
• Cesium 入门教程（四）：利用entity显示图形
• Cesium 入门教程（五）：利用Primitive生成图形
• Cesium 入门教程（六）：不同的材质设置
• Cesium 入门教程（七）：加载、导出2D文件数据
• Cesium 入门教程（八）：加载3D瓦片及模型
• Cesium 入门教程（九）：通过鼠标绘制图形
• Cesium 入门教程（十）：利用shader、后处理重构图形
• Cesium 入门教程（十一）：camera相机功能展示
• Cesium 入门教程（十二）：时间动画实例
• Cesium 入门教程（十三）：粒子系统实例
• Cesium 入门教程（十四）：鼠标键盘交互