当前位置：首页 > news >正文

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

news 2025/8/30 6:09:31

文章目录

一，Cesium 实际示例（含源代码）
- - 1、vue+cesium：使用CallbackProperty动态更改位置
  - 2、vue+cesium：实现动态图片旋转
  - 3、vue+cesium：加载czml文件，显示小汽车运行状态
  - 4、vue+cesium：飞机根据经纬度高度数据，沿着轨迹飞行
  - 5、vue+cesium：实现地球自转效果
二，时间动画基础知识
- - 1. 时间系统基础
  - 2. 时间驱动的实体动画
  - 3. 时间动画控制
  - 4. 时间动态图层
  - 5. 关键概念
  - 6. 实际应用场景
三，Cesium 入门教程 -系列文章列表

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);