时间戳

首页 > 解决方案 > 铯处理查看器动画播放/暂停

javascript - 铯处理查看器动画播放/暂停

问题描述

我看到有几种方法可以在 Cesium 中处理播放/暂停动画。首先 - 将事件侦听器绑定到所有可以开始/停止动画的按钮，如下所示：

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 中处理动画播放/暂停的真正正确方法感兴趣。

标签： javascriptcesium

解决方案

除了Clock，Cesium Viewer 还维护了一个ClockViewModel，它是时钟的 UI 绑定。 ClockViewModel有一个名为的布尔属性shouldAnimate，指示时钟当前是否正在动画。的文档shouldAnimate末尾有一个小注释，上面写着：

该属性是可观察的。

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

现场演示 - 沙堡

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.');
    }
});

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

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

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

推荐阅读