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

Question

OpenLayers3 API 有一个 map.on("moveend")，但是我找不到 movestart。有谁知道我怎么能做到这一点？有没有等价的事件？

OpenLayers 2 在地图上有一个movestart 事件。我在 OpenLayers3 中寻找一个完全平行的地方

这是一个基本的jsFiddle。如果有人想玩。我确实在那里添加了一个movestart 事件，以显示我想要的，但我认为它实际上并不存在。

用例！有人可能会问：我在几乎全屏信息窗口的地图上停靠。用户可以从信息窗口切换到下一个标记。我将窗口设置为半透明以显示在下方平移的地图，以便用户了解下一个位置的上下文。这项工作在带有movestart 和moveend 事件的OpenLayers2 中非常棒。但是在新的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 事件的情况下，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.panreturnsol.PreRenderFunction，如果动画未完成则返回false

2. 编写自定义函数并将其提供给map.renderBefore 现在可用于围绕平移动画编写包装器，如上所示

3. everDone 的整个业务是因为，stillPanning 部分将被多次调用。如果你想在那里做的事情可以重复调用，这没关系，但如果你想切换某些东西，那么你只想做一次。

“moveend”的行为 moveend 回调仅在地图实际移动时触发。这很好，但它阻止了我们进行动画前活动，只是在动画完成之前进行。如果您遇到地图实际上没有移动的情况，那么您在动画之前所做的一切将永远不会undo，因为该行为在moveend 中永远不会被调用！

希望这对某人有所帮助。我不得不花两个小时让它为我工作，因为没有movestart 回调:(

更新

在对此thread 进行更多讨论后，@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 事件，但您需要对它们进行去抖动处理。我在这里使用了一个名为 dragStarted

的变量

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

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