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

debugcn 发表于 Dev

杰西

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

期待您的回答，

杰西

蒂姆

您可以执行以下操作：

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

如果您想然后飞往另一个城市，则可以添加另一个平移功能。我要说的是，如果您有很多这样的多城市平底锅，那么您将需要对其进行更多抽象。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。