將地圖外部的東西拖放到某個功能（openlayers）上？

我正在開發一個帶有openlayers的網站，用戶應該能夠從建築物列表（地圖外）拖動建築物的名稱到地圖上的某個功能上。將地圖外部的東西拖放到某個功能（openlayers）上？

因爲我發現沒有辦法做到這一點與openlayers我想通過使用interact.js框架來做到這一點。我的計劃是通過鼠標懸停選擇功能，以便當用戶放下某物並釋放鼠標按鈕時，該功能已被選中。

是否可以將地圖外部的東西拖到帶有開放層的功能上？

如果沒有，你有更好的建議如何做到這一點，如上所述？

2015-06-15 eztam

我找到了一個解決方案，通過使用HTML5拖拽&拖放功能，以拖動從地圖外的HTML元素到矢量圖層上的多邊形。它看起來有點髒，但它完美地工作。

下面是HTML代碼可投放元素的列表和地圖：

<ul class="list-group"> 
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 1</li> 
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 2</li> 
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 3</li> 
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 4</li> 
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 5</li> 
</ul> 
<div id="map" class="map" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

爲了檢測在其上元件滴加我使用的鼠標懸停選擇特徵的選擇交互的特徵。這裏是處理丟棄事件並查找目標特徵的JavaScript代碼：

var lastDropLocation = {}; 

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    lastDropLocation["x"] = ev.pageX; 
    lastDropLocation["y"] = ev.pageY; 
} 


selectInteraction.on('select', function (e) { 
    if (e.selected.length == 1) { 
     var browserEvent = e.mapBrowserEvent.browserEvent; 
     // Check if the drop location is the same as the location where the feature was selected 
     if (lastDropLocation.x == browserEvent.clientX && lastDropLocation.y == browserEvent.clientY) { 
      // Area was dragged to a polygon ... 
      var feature = e.selected[0]; 
      // Further code here... 
     } 
    } 
});

來源

2015-06-18 15:36:34 eztam

我會使用ol.control.MousePosition獲取鼠標位置，一旦有東西被放置到地圖上。然後使用鼠標位置獲取您想要與之交互的功能。

來源

2015-06-15 21:22:18

我能夠獲取當前鼠標位置的座標。但現在我問我如何通過座標來獲取特徵？我正在使用FeatureOverlay – eztam

您可以像這個[示例]（http://openlayers.org/en/master/examples/icon.html）一樣使用'map.forEachFeatureAtPixel'。請注意，功能疊加層將在版本3.7.0中刪除。見https://github.com/openlayers/ol3/pull/3758/commits和https://github.com/openlayers/ol3/blob/master/changelog/upgrade-notes.md – tsauerwein

據我發現ol .control.MousePosition在按下鼠標指針之前不起作用（在拖動模式下）。但我需要突出顯示鼠標懸停時的多邊形。感謝您的提示，我將從FeatureOverlay切換到ol.Collection – eztam

一個想法是爲每個建築物創建一個overlay（也請參閱此example），其中包含一個用作interact.js的「dropzone」的div。

var dropZone = new ol.Overlay({ 
    position: [0, 0], 
    positioning: 'center-center', 
    element: document.getElementById('inner-dropzone'), 
    stopEvent: false 
}); 
map.addOverlay(dropZone);

我迅速做了一個簡單證明了概念通過複製拖&下降例如通過interact.js： http://jsfiddle.net/96gao5nu/2/

來源

2015-06-16 16:00:37 tsauerwein

這很有用，但是建築物是非常複雜的多邊形，據我所知，不可能以複雜多邊形的形式創建疊加層。不是嗎？ – eztam

這個想法是，你像以前一樣繪製你的建築物的形狀，作爲真正的矢量。然後爲每個建築物另外創建一個覆蓋層。 – tsauerwein

將地圖外部的東西拖放到某個功能（openlayers）上？

回答

相關問題