Openlayers 3 ol.animation.pan 超时？

Question

我用 ol3 创建了一张地图，并将 ol.animation 添加到 "fly" 从一个城市到另一个城市。单击开始按钮后，动画应开始几秒钟。所以，它应该像这样工作：

地图以名为 "Eifel"
单击开始按钮
三秒后飞往 "Berlin" 的航班开始（需要 2 秒）
在柏林停留1秒后飞往"Stuttgart"

下面的代码几乎可以工作，但它直接切换到 "Stuttgart"。我认为问题在于最后的 "map.getView().setCenter(Stuttgart);" 。我怎样才能让它按预期工作？

    // Klick auf Button -> Start
var startflight = document.getElementById('start-flight');

// Flug 1: Eifel > Berlin
startflight.addEventListener('click', function() {
  var duration = 2000;
  var start = (new Date()).getTime()+3000;
  var pan = ol.animation.pan({
    source: (view.getCenter(Eifel)),
    start: start
  });

  map.beforeRender(pan);
  map.getView().setCenter(Berlin);
},
true);

// Flug 2: Berlin > Stuttgart
    startflight.addEventListener('click', function() {
  var duration = 2000;
  var start = (new Date()).getTime()+6000;
  var pan = ol.animation.pan({
    source: (view.getCenter(Berlin)),
    start: start
  });

  map.beforeRender(pan);
  map.getView().setCenter(Stuttgart);
},
true);

期待您的回答，

jsc

Answer 1

你可以这样做：

startflight.addEventListener('click', function() {
  var duration = 2000;
  var start = Date.now() + 3000;  // use Date.now()
  var pan = ol.animation.pan({
    duration: duration,
    source: (view.getCenter(Eifel)),
    start: start
  });

  map.beforeRender(pan);
  map.getView().setCenter(Berlin);
}, true);

但是当你渲染时，它会在 setCenter() 调用之后立即触发。所以地图将变为空白然后渲染。可能更好的方法是将整个内容包装在 setTimeout.

中

startflight.addEventListener('click', function() {
  var duration = 2000;
  setTimeout(function () {
    var pan = ol.animation.pan({
      duration: duration,
      source: view.getCenter()
    });
    map.beforeRender(pan);
    map.getView().setCenter(Berlin);
  }, 3000);
}, true);

如果你想再飞到另一个城市，你可以再增加一个平移功能。我会说，如果你有很多这样的多城市平底锅，你会想要更多地抽象它。

Openlayers 3 ol.animation.pan 超时？

Openlayers 3 ol.animation.pan with timeout?

openlayers-3