我们可以在OpenLayers 3上制作ol.Overlay吗？

Question

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

Answer 1

UPDATE：

有没有必要这个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;

Answer 2

您可以简单地在叠加层的div上注册'mousedown'事件监听器。在该监听器中，在窗口上注册'mousemove'和'mouseup'事件。要更新'mousemove'上的位置，请使用将'mousemove'事件作为参数的ol.Map#getEventPixel()方法。在'mouseup'上，你只需取消注册窗口监听器。

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/的工作示例。