javascript - 开放层 3 : "movestart" event on map

Question

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

OpenLayers 2 在 map 上有一个 movestart 事件。我在 OpenLayers3 中寻找完全平行的东西

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

用例!有人可能会问:我在几乎全屏信息窗口的 map 上停了下来。用户可以从信息窗口切换到下一个标记。我将窗口设为半透明以显示下方的 map 平移，以便用户了解下一个位置的上下文。这项工作在 OpenLayers2 中使用 movestart 和 moveend 事件非常棒。但是在OL3新版 map 中，我无法获取到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 仅在 map 中有实际移动时触发，这就是我能够实现的方式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 returns一个 ol.PreRenderFunction，如果动画未完成则返回 false

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

   <

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

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

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

UPDATE

关于此的更多讨论 thread @ahocevar 建议还有另一种解决方案.那就是像这样在 View 上使用 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