如何在Cesium JS中创建独立时钟并通过自定义控件控制

问题根源 #

你当前的实现存在三个核心问题，导致动画没有触发：

• 自定义Clock仅完成了实例化，没有和Cesium的帧渲染循环绑定，独立Clock的时间不会自动步进更新
• Cesium实体的路径插值默认以viewer.clock.currentTime作为时间基准，你没有把自定义Clock的时间同步给viewer，实体位置不会随自定义时钟更新
• 按钮控制逻辑错误，Start和Stop都调用同一个暂停切换命令，无法正确控制播放状态

修正方案 #

1. 绑定自定义时钟到帧渲染循环 #

在初始化自定义Clock后，添加帧监听事件，每帧手动更新自定义时钟时间，并同步到viewer，驱动实体插值计算：

// 先禁用viewer自带时钟的自动动画，避免时间冲突
viewer.clock.shouldAnimate = false;

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
  start,
  360,
  new Cesium.JulianDate()
);

var clock = new Cesium.Clock();
clock.startTime = start.clone();
clock.stopTime = stop.clone();
clock.currentTime = start.clone();
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 10;
clock.shouldAnimate = true;
var clockViewModel = new Cesium.ClockViewModel(clock);
var viewModel = new Cesium.AnimationViewModel(clockViewModel);

// 关键：绑定渲染事件，每帧更新自定义时钟并同步到viewer
viewer.scene.postRender.addEventListener(() => {
  if (!clock.shouldAnimate) return;
  // 手动更新自定义时钟时间
  const currentTime = clock.tick();
  // 同步时间到viewer，驱动实体位置插值
  viewer.clock.currentTime = currentTime;
});

2. 修正按钮控制逻辑 #

分别对应播放、暂停状态设置时钟属性：

Sandcastle.addDefaultToolbarButton("Start", function () {
  clock.shouldAnimate = true;
});

Sandcastle.addDefaultToolbarButton("Stop", function () {
  clock.shouldAnimate = false;
});

内容的提问来源于stack exchange，提问作者Jacky