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

Cesium快速入门到精通系列教程八：时间系统

news 来源：原创 2025/6/9 6:27:00

Cesium 1.93 的时间系统是其实现动态数据可视化的关键组成部分，通过该系统可在三维场景基础上增加时间维信息，生成 “四维” 场景。

一、时间表示核心：JulianDate类

Cesium使用儒略日期（Julian Date）作为时间基准，通过JulianDate类实现高精度天文计时。其结构包含两个关键属性：

dayNumber：从公元前4713年1月1日（儒略日起点）起算的总天数。
secondsOfDay：当前日内已流逝的秒数（从午夜0点计算）。

示例代码：

const currentTime = Cesium.JulianDate.now(); // 获取当前时间（UTC）
const isoTime = Cesium.JulianDate.toIso8601(currentTime); // 转为ISO 8601格式字符串

优势：避免公历（Gregorian）的闰年/时区问题，适用于全球空间数据同步。

二、时间推进机制：Clock系统

Clock对象控制场景时间流速与范围，通过tick()方法驱动帧更新：

multiplier：时间流速乘数（默认1.0）。

例：viewer.clock.multiplier = 3600; 表示每帧推进1小时（模拟加速）。

shouldAnimate：布尔值，控制是否自动播放时间动画。
clockRange：设置时间循环行为（如LOOP_STOP到达终点后重置）。

时间更新流程：

三、时间轴控制：TimeLine组件

可视化交互组件，需在Viewer初始化时启用：

const viewer = new Cesium.Viewer('container', {timeline: true,  // 显示时间轴animation: true  // 显示播放控件
});

关键操作：

viewer.timeline.zoomTo(start, end)：缩放到指定时间区间。
与Clock联动：拖动时间轴触发currentTime更新，驱动场景动态渲染（如卫星轨道移动）。

四、应用场景与开发实践

1、动态数据可视化

气象/交通等时序数据：通过SampledPositionProperty绑定实体位置随时间变化。
示例：卫星轨道根据预设时间路径运动：

const positionProperty = new Cesium.SampledPositionProperty();
positionProperty.addSample(time, cartesian3); // 添加时间-位置关键帧
entity.position = positionProperty; // 实体绑定时间属性

2、光照与昼夜模拟

启用地球光照并关联时钟，实现自动昼夜交替：

viewer.scene.globe.enableLighting = true; // 光照随太阳角度变化[2](@ref)

3、性能优化建议

减少高频时间更新：对静态实体禁用shouldAnimate。
使用ClockStep.SYSTEM_CLOCK_MULTIPLIER避免帧率波动导致时间失真。

五、完整实例

<template><div id="cesiumContainer"></div><input type="range" id="speedSlider" min="1" max="100" value="36">
</template><script setup>
Cesium.Ion.defaultAccessToken = '默认defaultAccessToken'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）onMounted(async () => {const viewer = new Cesium.Viewer("cesiumContainer", {timeline: true,  // 显示时间轴animation: true  // 显示播放控件[1,3](@ref)});// 设置时间范围（UTC时间）const startTime = Cesium.JulianDate.fromIso8601('2025-01-01T00:00:00Z');const endTime = Cesium.JulianDate.addDays(startTime, 1, new Cesium.JulianDate()); // 增加1天// 配置时钟参数viewer.clock.startTime = startTime.clone();viewer.clock.stopTime = endTime.clone();viewer.clock.currentTime = startTime.clone();viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放至结束时间后重置[1,3](@ref)viewer.timeline.zoomTo(startTime, endTime); // 时间轴缩放至指定范围// 设置时间流速：每帧推进1小时（3600秒/帧）viewer.clock.multiplier = 3600;viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // 基于系统时钟步进[1,6](@ref)// 动态调整流速（例如通过滑块交互）document.getElementById('speedSlider').addEventListener('input', (e) => {viewer.clock.multiplier = e.target.value * 1000; // 根据滑块值调整倍率[2](@ref)});// 创建实体（红色点）const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),point: { pixelSize: 50, color: Cesium.Color.RED }});// 绑定时间变化事件：颜色随进度渐变viewer.clock.onTick.addEventListener(clock => {const elapsed = Cesium.JulianDate.secondsDifference(clock.currentTime, startTime);const total = Cesium.JulianDate.secondsDifference(endTime, startTime);const hue = (elapsed / total) * 360; // 计算色相值entity.point.color = Cesium.Color.fromHsl(hue / 360, 1.0, 0.5); // 更新颜色[3](@ref)});viewer.flyTo(entity);
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}#speedSlider{position: fixed;top: 20px;left: 20px;
}
</style>