Cesium 句柄查看器动画 playing/pause

Question

我看到有几种方法可以在 Cesium 中处理 playing/pause 动画。首先 - 将事件侦听器绑定到所有可以 start/stop 动画的按钮，如下所示：

let ctrls = document.getElementsByClassName("CONTROLS_THAT_COULD_CHANGE_ANIMATING_STATE");
Array.from(classname).forEach(function(ctrls) {
  element.addEventListener('click', () => {
    /* handle change animating state */
  });
});

但我觉得有点残忍

另一种方法是使用铯钟及其onTick事件

viewer.clock.onTick.addEventListener((clock) => {
  console.log(clock._shouldAnimate);
});

如果属性标题中没有 lodash，这个决定会很好，这表示 cesium 的开发人员让我们知道，不要使用它。

所以，我对在 Cesium 中处理动画 playing/pause 的真正正确方法很感兴趣。

Answer 1

除了Clock，Cesium Viewer还维护了一个ClockViewModel，这是时钟的UI绑定。 ClockViewModel 有一个名为 shouldAnimate 的布尔值属性，它指示时钟当前是否正在设置动画。 documentation for shouldAnimate 末尾有一个小注释：

This property is observable.

在内部，Cesium 使用 Knockout observables 将视图模型绑定到 UI。所以我们需要去获取那个 observable，然后观察它。

Live Demo - Sandcastle

var viewer = new Cesium.Viewer('cesiumContainer');

Cesium.knockout.getObservable(viewer.clockViewModel,
                              'shouldAnimate').subscribe(function(isAnimating) {
    if (isAnimating) {
        console.log('Cesium clock is animating.');
    } else {
        console.log('Cesium clock is paused.');
    }
});

除此之外，您可以添加自己的任何类型的 play/pause 控件，将布尔值写入 shouldAnimate，如下所示：

function onMyCustomPlayButtonClicked() {
    viewer.clockViewModel.shouldAnimate = true;
}

这样做时，您自己的 play/pause 控件不仅会控制 play/pause 状态，它们还会影响原始 play/pause 控件的视觉亮点，因为这些控件也在监听 Observable。感谢 Knockout，订阅仅在状态实际改变时触发，因此用户重复点击播放按钮不会产生多个回调。

Cesium 句柄查看器动画 playing/pause

Cesium handle viewer animation playing/pause

javascript

cesium