Question

我试图让ol.overlay可以拖动，但我无法做到。我找到了这个例子（http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag），但它是使用ol.Features完成的，我需要的是一个叠加层，因为我可以使用自定义-html div来显示我需要的东西。我还发现了一个非常有趣的例子，它可以做我想要的，但它是使用谷歌地图v3完成的，我需要它为ol3。
提前谢谢。

Answer 1

您只需注册一个“mousedown＆＃39;叠加层div上的事件监听器。在那个听众里面，注册“mousemove＆＃39;和＆＃39; mouseup＆＃39;窗户上的事件。要更新＆＃39; mousemove＆＃39;上的位置，请使用ol.Map#getEventPixel()方法，该方法将鼠标移动到＆＃39;事件作为参数。在＆＃39; mouseup＆＃39;上，您只需取消注册窗口侦听器。

marker_el.addEventListener('mousedown', function(evt) {
  function move(evt) {
    marker.setPosition(map.getEventCoordinate(evt));
  }
  function end(evt) {
    window.removeEventListener('mousemove', move);
    window.removeEventListener('mouseup', end);
  }
  window.addEventListener('mousemove', move);
  window.addEventListener('mouseup', end);
});

有关工作示例，请参阅http://jsfiddle.net/rnzgfg89/6/。

Answer 2

<强>更新

不需要这种ol.Map.prototype.forEachOverlayAtPixel方法（参见https://github.com/openlayers/ol3/issues/5760）。

只需在DOM覆盖元素上注册一个mousedown侦听器，您就可以了。的 Fiddle updated

ol.Overlay在OL3中是一个糟糕的类型，但有一些工作，是的，你可以实现它。 ol.Feature是无所不能的，如果你真的需要ol.Overlay我提出了 demo fiddle 。

这个想法是：

收听pointerdown地图事件，并检查点击的像素是否有叠加层;

ol.Map.prototype.forEachOverlayAtPixel - 刚为问题创建

停用ol.interaction.DragPan - 地图平移;

倾听pointermove并设置叠加位置;

倾听pointerup并恢复ol.interaction.DragPan;

我们可以在OpenLayers 3上使ol.Overlay可拖动吗？

2 个答案: