原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Clock.html&label=All

效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * 创建一个在 2013 年圣诞节循环并以 4000 倍真实时间运行的时钟。
 */
const clock = new Cesium.Clock({
  startTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
  currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
  stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"),
  clockRange: Cesium.ClockRange.LOOP_STOP, // 当我们达到结束时间时(继续)循环
  clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
  multiplier: 4000, // 每个 tick 前进多少时间，这里表示4000倍
  shouldAnimate: true,
});

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  clockViewModel: new Cesium.ClockViewModel(clock),
});

viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.scene.debugShowFramesPerSecond = true;

//启用照明
viewer.scene.globe.enableLighting = true;

Sandcastle.addToolbarButton("重置当前时间", function () {
  const resetTime = viewer.clockViewModel.startTime;
  viewer.clockViewModel.currentTime = resetTime;
  //viewer.timeline.updateFromClock();//由于上面禁用了timeline，这里注释改行
});

Sandcastle.addToolbarButton("减慢时钟", function () {
  viewer.clockViewModel.multiplier /= 2;
});

Sandcastle.addToolbarButton("加速时钟", function () {
  viewer.clockViewModel.multiplier *= 2;
});