Cesium 快速入门（十） JulianDate（儒略日期）详解

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二

作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

🌌 Cesium 中的 JulianDate（儒略日期）详解

什么是儒略日期？

JulianDate（儒略日期）是天文学和航天领域中广泛使用的一种连续时间表示法。它表示从公元前 4713 年 1 月 1 日中午 12 时（世界时）开始连续计算的天数。

为什么需要 JulianDate？

时间连续性：没有日期中断（如闰年、闰秒问题）
高精度计算：支持毫秒级甚至微秒级时间精度
跨平台兼容：避免时区和日历系统的差异
科学计算标准：航天、天文领域的通用时间表示

JulianDate 的结构

js 复制代码

{
  day: 2460830,      // 整数部分 - 从儒略日起始日算起的天数
  secondsOfDay: 43200 // 小数部分 - 当天已过去的秒数（0-86400）
}

JulianDate 与常规日期的转换

JulianDate 与北京时间

JulianDate 比北京时间晚 8 个小时, 加上东 8 时，就是当前的真正时间

js 复制代码

// 创建当前时间对应的 JulianDate
const julianDate = Cesium.JulianDate.fromDate(new Date());
// 将 JulianDate 转换为北京时间
const beijingDate = Cesium.JulianDate.addHours(
  julianDate,
  8,
  new Cesium.JulianDate()
);

常规日期 → JulianDate

从当前时间创建

js 复制代码

// 创建当前时间的JulianDate（推荐）
const nowJulian = Cesium.JulianDate.now();

// 从JavaScript Date创建
const jsDate = new Date();
const fromJsDate = Cesium.JulianDate.fromDate(jsDate);

从 ISO 8601 字符串创建

js 复制代码

// 从ISO 8601字符串创建（UTC时间）
const isoString = "2025-06-04T12:00:00Z"; // Z表示UTC时间
const fromIso = Cesium.JulianDate.fromIso8601(isoString);

// 带时区的ISO字符串（会自动转换为UTC）
const localIsoString = "2025-06-04T20:00:00+08:00"; // 北京时间
const fromLocalIso = Cesium.JulianDate.fromIso8601(localIsoString);

JulianDate → 常规日期

转换为 JavaScript Date

js 复制代码

const julianDate = Cesium.JulianDate.now();

// 转换为JavaScript Date（会丢失纳秒精度）
const jsDate = Cesium.JulianDate.toDate(julianDate);

格式化为 ISO 8601 字符串

js 复制代码

const julianDate = Cesium.JulianDate.now();

// 格式化为ISO 8601字符串（UTC）
const isoString = Cesium.JulianDate.toIso8601(julianDate);
// 输出: "2025-06-04T12:00:00.000Z"

// 带毫秒精度
const isoWithMs = Cesium.JulianDate.toIso8601(julianDate, 3);
// 输出: "2025-06-04T12:00:00.500Z"（假设500ms）

时间操作实用函数

时间加减

addDays：增加天数
addHours：增加小时数
addMinutes：增加分钟数
addSeconds：增加秒数

增加时间

js 复制代码

const baseDate = Cesium.JulianDate.fromIso8601("2025-06-04T12:00:00Z");
const result = new Cesium.JulianDate();

// 增加1天3小时30分钟
const newDate = Cesium.JulianDate.addDays(baseDate, 1, result);
Cesium.JulianDate.addHours(newDate, 3, result);
Cesium.JulianDate.addMinutes(result, 30, result);

console.log(Cesium.JulianDate.toIso8601(result));
// 输出: "2025-06-05T15:30:00Z"

减少时间（使用负数）

js 复制代码

const baseDate = Cesium.JulianDate.fromIso8601("2025-06-04T12:00:00Z");
const result = new Cesium.JulianDate();

// 减少2小时
Cesium.JulianDate.addHours(baseDate, -2, result);
console.log(Cesium.JulianDate.toIso8601(result));
// 输出: "2025-06-04T10:00:00Z"

Cesium 中的时钟 Clock

Clock 是一个核心组件，用于控制场景的时间动态，管理时间流逝、动画播放、时间范围等

属性

属性	类型	说明
`currentTime`	JulianDate	当前场景时间（可读写）
`startTime`	JulianDate	时间轴起始时间
`stopTime`	JulianDate	时间轴结束时间
`multiplier`	Number	时间流逝倍率（正=正向播放，负=倒放）
`clockStep`	ClockStep	判断对 Clock#tick 的调用是否依赖于帧或系统时钟。
`clockRange`	ClockRange	到达时间边界的行为：UNBOUNDED：不停止，CLAMPED：停止在边界，LOOP_STOP：循环播放
`shouldAnimate`	Boolean	是否自动播放（true=播放，false=暂停）

ClockStep 详解

ClockStep 决定时间如何前进：

ClockStep 值	说明	适用场景
`SYSTEM_CLOCK`	与系统时间同步	实时模拟
`SYSTEM_CLOCK_MULTIPLIER`	系统时间 × 倍率	加速/减速模拟
`TICK_DEPENDENT`	每帧前进固定时间	精确控制动画

ClockRange 详解

ClockRange 控制到达边界时的行为：

ClockRange 值	说明	适用场景
`UNBOUNDED`	不受限制继续前进	无边界时间
`CLAMPED`	停在边界	固定区间动画
`LOOP_STOP`	循环播放	重复动画

基础配置

js 复制代码

const clock = new Cesium.Clock({
  startTime: Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z"),
  currentTime: Cesium.JulianDate.fromIso8601("2023-01-01T12:00:00Z"),
  stopTime: Cesium.JulianDate.fromIso8601("2023-01-02T00:00:00Z"),
  clockRange: Cesium.ClockRange.LOOP_STOP, // 循环播放
  multiplier: 2.0, // 2倍速播放
  clockStep: Cesium.ClockStep.SYSTEM_CLOCK,
});

// 在 Viewer 中使用
const viewer = new Cesium.Viewer("cesiumContainer", {
  clock: clock,
  shouldAnimate: true, // 播放
});

动态控制

js 复制代码

// 播放/暂停
viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;

// 调整播放速度
viewer.clock.multiplier = 4.0; // 4倍速

// 倒放
viewer.clock.multiplier = -1.0; // 倒放

// 跳转到特定时间
const targetTime = Cesium.JulianDate.fromIso8601("2025-06-04T18:00:00Z");
Cesium.JulianDate.clone(targetTime, viewer.clock.currentTime);

// 重置时钟
viewer.clock.currentTime = Cesium.JulianDate.clone(viewer.clock.startTime);