Clock 时钟

viewer.clock 属性表示系统时钟，类型为 Clock，其使用的时间为 儒略日（Julian Day） 。

属性

startTime：开始时间，默认为程序启动时的时间

endTime：结束时间，默认为开始时间的 24 小时后

currentTime：当前时间，当前时间是实时改变的

multiplier：时间速率，时间运行的快慢，默认为 1 正常时间速度。

clockRange：时钟运行到结束时间后如何处理，暂停/重新开始/继续

onTick：时钟运行事件，触发频率相当高

onStop：时钟暂停事件

常见代码

设置时钟的起止时间

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1;

设置时间轴上的时间范围

viewer.timeline.zoomTo(start.clone(), stop.clone());

格式化时间显示

• 格式化时间轴上的时间显示

时间轴上的时间显示格式是 UTC 格式，很不符合我们的观看习惯，我们可以通过覆写时间轴的 makeLabel 方法来实现自定义格式化，makeLabel 是一个私有方法，文档中看不到，其源码如下。

/**
 * @private
 */
Timeline.prototype.makeLabel = function (time) {
  const gregorian = JulianDate.toGregorianDate(time);
  const millisecond = gregorian.millisecond;
  let millisecondString = " UTC";
  if (millisecond > 0 && this._timeBarSecondsSpan < 3600) {
    millisecondString = Math.floor(millisecond).toString();
    while (millisecondString.length < 3) {
      millisecondString = `0${millisecondString}`;
    }
    millisecondString = `.${millisecondString}`;
  }
  return `${timelineMonthNames[gregorian.month - 1]} ${gregorian.day} ${
    gregorian.year
  } ${twoDigits(gregorian.hour)}:${twoDigits(gregorian.minute)}:${twoDigits(
    gregorian.second
  )}${millisecondString}`;
};

可以看到就是接收一个时间值然后根据该时间返回一个字符串，我们将其修改为

viewer.timeline.makeLabel = function (time) {
  const julianDT = new Cesium.JulianDate();
  Cesium.JulianDate.addHours(time, 8, julianDT);
  var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);

  let hour = gregorianDT.hour + "";
  let minute = gregorianDT.minute + "";
  let second = gregorianDT.second + "";
  return `${gregorianDT.year}年${gregorianDT.month}月${
    gregorianDT.day
  }日${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(
    2,
    "0"
  )}`;
};

因为北京时间是东八区区时，所以我们加了 8 个小时，这样才能显示正常的北京时间，运行效果

• 格式化动画部件上的时间

动画部件和时间轴是两个部件，是相对独立的，上面我们格式化时间轴上的时间显示，并没有作用到动画组件上，我们可以按照相同的思路来完成动画部件上时间格式化。

动画部件的类型为 Animation，该类有一个属性 viewModel，类型为 AnimationViewModel，这里面提供了格式的方法。

查看文档可以看到也是传入一个时间，返回一个字符串

所以我们编写以下代码

viewer.animation.viewModel.timeFormatter = function (datetime, viewModel) {
  const julianDT = new Cesium.JulianDate();
  Cesium.JulianDate.addHours(datetime, 8, julianDT);
  let gregorianDate = Cesium.JulianDate.toGregorianDate(julianDT);
  let hour = gregorianDate.hour + "";
  let minute = gregorianDate.minute + "";
  let second = gregorianDate.second + "";
  return `${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(
    2,
    "0"
  )}`;
};
viewer.animation.viewModel.dateFormatter = function (datetime, viewModel) {
  const julianDT = new Cesium.JulianDate();
  Cesium.JulianDate.addHours(datetime, 8, julianDT);
  let gregorianDate = Cesium.JulianDate.toGregorianDate(julianDT);
  return `${gregorianDate.year}年${gregorianDate.month}月${gregorianDate.day}日`;
};