代码之家  ›  专栏  ›  技术社区  ›  maxdownunder

CesiumJS-如何控制查看器时间和滴答声?

  •  4
  • maxdownunder  · 技术社区  · 7 年前

    我想做的是控制时钟滴答作响 铯应用。想象一下,运行的代码很昂贵,而且我希望在继续之前给查看器一些时间来加载互动程序。所以 如何禁用自动勾选,然后手动调用tick() 我的代码什么时候准备好了?

    文档 说“只有当时钟#canAnimate和时钟#shouldAnimate都为真时,时钟才会滴答作响。”但这不是我得到的。

    viewer.clock.canAnimate = false;
    viewer.clock.shouldAnimate = false;
    viewer.clock.onTick.addEventListener(function(clock){
        console.log("Tick");
    });
    

    控制台中的结果显示时钟仍在滴答作响:

    Tick
    Tick
    Tick
    Tick
    ...
    

    viewer.clock.stopTicking(); // or whatever that command would be...
    while (someCondition){
        // run expensive code
        tick(); // issue manual tick
    }
    

    谢谢你的帮助!

    2 回复  |  直到 7 年前
        1
  •  2
  •   emackey    7 年前

    onTick

    如果您想自己控制铯的渲染循环,可以这样做:

    viewer.useDefaultRenderLoop = false;
    
    function myOwnRenderLoop() {
        viewer.resize();
        viewer.render();
        Cesium.requestAnimationFrame(myOwnRenderLoop);
    }
    
    Cesium.requestAnimationFrame(myOwnRenderLoop);
    

    上面,我正在使用 requestAnimationFrame setTimeout 为了获得较慢的循环,模拟较差的渲染性能。注意,当使用更长的时间间隔时,使用这种方法会减慢交互和屏幕更新。

    viewer.useDefaultRenderLoop = false;
    
    function myOwnRenderLoop() {
        viewer.resize();
        viewer.render();
        window.setTimeout(myOwnRenderLoop, 500);
    }
    
    window.setTimeout(myOwnRenderLoop, 500);
    
        2
  •  2
  •   ethorn10    7 年前

    那么,你的 console.log 仍在打印“勾号”,因为 onTick canAnimate shouldAnimate ,正如你所怀疑的。因此,您的示例代码基本上是:

    viewer.clock.canAnimate = false; 
    viewer.clock.shouldAnimate = false;
    while (someCondition){
        // run expensive code
        // toggle someCondition so we can exit this
    }
    // set the animate bools back to true so the clock can advance
    viewer.clock.canAnimate = true;
    viewer.clock.shouldAnimate = true;
    

    为了更好地看到这一点,请尝试以下操作(并可能将if条件设置为1000而不是100):

    viewer.clock.canAnimate = false;
    viewer.clock.shouldAnimate = false;
    var s = 0;
    viewer.clock.onTick.addEventListener(function(clock){
        if (s < 100) {
            console.log(viewer.clock.currentTime);
        } else {
            viewer.clock.canAnimate = true;
            viewer.clock.shouldAnimate = true;        
        }
        s++;
    });
    

    你会看到 正在打印相同的值100(或1000)次…这是因为 currentTime 不是因为 应该设置动画 true 这个 当前时间