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事件的情况下,并且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 返回 a 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