Cesium快速入门

Appearance

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

什么是儒略日期？ ​

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

为什么需要 JulianDate？ ​

  1. 时间连续性：没有日期中断（如闰年、闰秒问题）

  2. 高精度计算：支持毫秒级甚至微秒级时间精度

  3. 跨平台兼容：避免时区和日历系统的差异

  4. 科学计算标准：航天、天文领域的通用时间表示

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 julianDate = Cesium.JulianDate.fromDate(new Date());
// 上面代码等同于
const julianDate = Cesium.JulianDate.now();

// 从 ISO 8601 字符串创建
const isoDate = "2025-06-04T12:00:00Z";
const julianDate = Cesium.JulianDate.fromIso8601(isoDate);

JulianDate → 常规日期 ​

js
// 转换为 JavaScript Date 对象
const dateObj = Cesium.JulianDate.toDate(julianDate);

// 转换为 ISO 8601 字符串
const isoString = Cesium.JulianDate.toIso8601(julianDate);

时间操作实用函数 ​

时间加减 ​

  • addDays：增加天数
  • addHours：增加小时数
  • addMinutes：增加分钟数
  • addSeconds：增加秒数
  • 以上使用方法同理，示例：
js
Cesium.JulianDate.addHours(
  new Cesium.JulianDate.now(),
  1, // 增加1小时,减少的话传入负数即可
  new Cesium.JulianDate()
);

Cesium 中的时钟 Clock ​

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

属性 ​

属性类型说明
currentTimeJulianDate当前场景时间（可读写）
startTimeJulianDate时间轴起始时间
stopTimeJulianDate时间轴结束时间
multiplierNumber时间流逝倍率（正=正向播放，负=倒放）
clockStepClockStep判断对 Clock#tick 的调用是否依赖于帧或系统时钟。
clockRangeClockRange到达时间边界的行为：UNBOUNDED：不停止，CLAMPED：停止在边界，LOOP_STOP：循环播放
shouldAnimateBoolean是否自动播放（true=播放，false=暂停）

使用示例 ​

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 = false; // 暂停

// 调整速度
viewer.clock.multiplier = -1.0; // 倒放

// 跳转到特定时间
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
  "2023-01-01T18:00:00Z"
);