Openlayers 3 Openlayers 3 ol.animation.pan是否超时？

我已经用ol3创建了一张地图，并添加了ol.animation来从一个城市“飞”到另一个城市。单击“开始”按钮后，动画应在几秒钟内开始。所以，它应该是这样工作的：

地图以一个叫做“Eifel”的点为中心

单击开始按钮

三秒钟后，飞往“柏林”的航班开始（需要2秒钟）

在柏林停留1秒钟，然后飞往“斯图加特”

下面的代码几乎可以工作，但它直接切换到“斯图加特”。我认为问题在于最后的“map.getView（）.setCenter（斯图加特）；”。我怎样才能使它按预期工作

    // 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

您可以这样做：

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);

---

如果你想飞到另一个城市，你可以添加另一个平移功能。我想说的是，如果你有很多这样的多城市盘，你会想把它抽象一些。

非常感谢你，蒂姆，这很好用。有时候，只要想正确的方向，解决问题是很容易的。如果你的问题得到了回答，请把它标记为正确并完成这一题。