OpenLayers 3: "地图上的事件

OpenLayers 3: "movestart" event on map

本文关键字：地图 事件 quot OpenLayers      更新时间：2023-09-26

OpenLayers3 API有一个map.on("moveend")，但是我找不到movestart。有人知道我该怎么做吗?是否存在等效事件?

OpenLayers 2在地图上有一个movestart事件。我正在寻找OpenLayers3中的精确并行

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

用例!有人可能会问:我在地图上的站点有几乎全屏的信息窗口。用户可以从信息窗口切换到下一个标记。我将窗口做成半透明，以显示下面的地图平移，这样用户就可以获得下一个位置的上下文。这项工作在OpenLayers2与movestart和moveend事件中非常出色。但是在新的OL3版本的地图中，我无法获得movestart事件。

更新:我自己回答了这个问题，但如果有人愿意提出更好的解决方案，我仍然提供赏金。

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返回ol.PreRenderFunction，如果动画未完成则返回false

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

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

"moveend"的行为moveend回调只在map 实际移动时触发。这很好，但它阻止了我们在动画完成之前执行预动画活动。如果你有一个场景，地图实际上没有移动，那么你之前做的动画永远不会undo，因为这个行为是在moveend中，永远不会被调用!

希望这能帮助到别人。我不得不花了整整两个小时让它为我工作，因为movestart回调是缺席的:(

更新

在更多的讨论这个线程有另一个解决方案由@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

您可以使用pointerdrag或pointermove事件，但您将希望揭穿它们。我在这里使用了一个名为dragStarted

的变量http://jsfiddle.net/sean9999/j2cP4/115/

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

相关文章：