OpenLayers 3："movestart" 地图上的事件

Question

OpenLayers3 API 有一个 map.on("moveend") ，但是我找不到 movestart。任何人都知道我怎样才能做到这一点？是否有等效的事件？

OpenLayers 2 在地图上有一个 movestart 事件。我在 OpenLayers3

中寻找完全平行的

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

用例！有人可能会问：我在几乎全屏信息 windows 的地图上停了下来。用户可以从信息窗口切换到下一个标记。我将 windows 设为半透明以显示下方的地图平移，以便用户了解下一个位置的上下文。这项工作在具有 movestart 和 moveend 事件的 OpenLayers2 中非常出色。但是在OL3新版地图中，我无法获取到movestart事件。

Update: I did answer the question my self, but I am still offering bounty if anyone would like to propose a better solution.

Answer 1

UPDATE v4.2.0 now supports native movestart and moveend events

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

For OpenLayers 3 versions before release of v4.2.0

好的，所以在没有 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);

那么为什么这有效？

ol.animation.pan returns a ol.PreRenderFunction，如果动画未完成returns false
编写自定义函数并将其提供给 map.renderBefore 现在可以用来编写 wrapper 围绕平移动画，如上所示
everDone 的整个业务是因为 stillPanning 部分将被多次调用。如果您想在那里做的事情可以重复调用，这没关系，但如果您想切换某些东西，那么您只想做一次。

'moveend'的行为 moveend回调仅在地图实际移动时触发。这很好，但它阻止我们做 pre-animation 活动，只是在动画完成之前做这些活动。如果你有一个地图实际上没有移动的场景，那么你在动画之前所做的任何事情都不会 undo 因为那个行为在 moveend 中永远不会被调用！

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

UPDATE

对此进行更多讨论 thread there is another solution as suggested by @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

OpenLayers 3："movestart" 地图上的事件

OpenLayers 3: "movestart" event on map

javascript

gis

openlayers-3