OpenLayers 3：地圖上的“movestart”事件

Question

OpenLayers3 API有一個map.on（“moveend”） ，但是我找不到一個movestart 。 誰知道我怎么能做到這一點？ 有同等的事件嗎？

OpenLayers 2在地圖上有一個movestart事件。 我在OpenLayers3中看起來完全平行

這是一個基本的jsFiddle 。 如果有人想玩的話。 我確實在那里添加了一個movestart事件，以顯示我想要的東西，但我認為它實際上並不存在。

用例！ 有人可能會問：我在地圖上停了幾乎全屏的信息窗口。 用戶可以從infowindow切換到下一個標記。 我讓窗戶半透明地顯示下面的地圖平移，因此用戶可以獲得下一個位置的上下文。 這項工作在OpenLayers2中非常出色，包括movestart和moveend事件。 但是在地圖的新OL3版本中，我無法獲得movestart事件。

更新：我確實回答了我自己的問題，但如果有人想提出更好的解決方案，我仍然會提供賞金。

Answer 1

UPDATE v4.2.0現在支持本機movestart和moveend事件

map.on('movestart', function(event) {

    //To Remove after first use: ol.Observable.unByKey(event);
});

map.on('moveend', function(event) {

    //To Remove after first use:  ol.Observable.unByKey(event);
});

對於v4.2.0發布之前的OpenLayers 3版本

好的，所以在沒有movestart事件的movestart下，並且只有在地圖中存在實際移動時才會觸發moveend ，這就是我如何能夠實現movestart和moveend行為。

jsFiddle ：

var pan = ol.animation.pan({
    duration: 700,
    source: this.map.getView().getCenter()
});
map.beforeRender(function(map, frameState) {
    var stillPanning = pan(map, frameState); // returns false panning is done
    if (stillPanning) {
        // do movestart stuff here
        if (!everDone) {
            doSomething();
            everDone = true;
        }
    } else {
        // do move end stuff here
        undoSomething();
        everDone = false;
    }
    return stillPanning;
});
map.getView().setCenter(geom);

那么為什么會這樣呢？

1. ol.animation.pan 返回一個ol.PreRenderFunction ，如果動畫未完成則返回false

2. 編寫自定義函數並將其提供給map.renderBefore現在可用於編寫平移動畫的包裝器 ，如上所示

3. 與everDone的整個業務是因為， stillPanning部分將被多次調用。 如果你想在那里做什么可以重復調用，這是沒關系的，但如果你想要切換一些東西，那么你只想做一次。

“moveend” moveend回調的行為僅在地圖實際移動時觸發。 這很好，但它阻止我們做動畫前的活動，只需在完成動畫之前完成它們。 如果你有一個地圖實際上沒有移動的場景，那么你在動畫之前所做的事情永遠不會undo因為這種行為是在一個永遠不會被調用的moveend中！

希望這有助於某人。 我不得不花兩個小時讓它為我工作，因為沒有一個movestart回調:(

UPDATE

在對這個主題進行更多討論之后，還有另一個解決方案，如@ahocevar所示 。 那就是在視圖上使用propertychange事件，如下所示：

function onpropertychange() {
  map.dispatchEvent('movestart');
  var view = map.getView();
  view.un('propertychange', onpropertychange);
  map.on('moveend', function() {
    view.on('propertychange', onpropertychange);
  });
};
map.getView().on('propertychange', onpropertychange);

這是這種方法的一個有效例子： jsFiddle

Answer 2

你可以使用pointerdrag或pointermove事件，但你會想要pointermove它們。 我在這里使用一個名為dragStarted的變量

http://jsfiddle.net/sean9999/j2cP4/115/

http://openlayers.org/en/v3.8.2/apidoc/ol.MapBrowserEvent.html