我們可以在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/的工作示例。