Openlayers 3 ol.animation.pan超時？

Question

我已經用ol3創建了一張地圖，並添加了ol.animation以便從一個城市「飛」到另一個城市。點擊開始按鈕後，動畫應該開始幾秒鐘。所以，它應該像這樣工作：

1. 該地圖集中在一個名爲「艾弗爾」
2. 點擊開始按鈕
3. 點三秒飛行「柏林」啓動後（這將需要2秒）
4. 留在柏林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

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

如果您想要飛往另一個城市，您可以添加另一個平移功能。我會說，如果你有很多這樣的多城市鍋，你會想要更多地抽象這個。