将地图外部的内容拖放到要素（openlayers）上？

Question

我正在开发一个带有 openlayers 的网站，用户应该能够将建筑物的名称从建筑物列表（地图外）拖动到地图上的要素上。

由于我找不到使用 openlayers 执行此操作的方法，因此我考虑使用 interact.js 框架来执行此操作。我的计划是 select 通过鼠标悬停功能，因此当用户放下东西并释放鼠标按钮时，功能已经 selected。

是否可以使用 openlayers 将地图外部的内容拖到地图项上？

如果没有，你有没有更好的建议如何像上面描述的那样做？

Answer 1

我会使用 ol.control.MousePosition 来获取鼠标在地图上的位置。然后使用鼠标位置获取您想要与之交互的功能。

Answer 2

一个想法是为每个建筑物创建一个 overlay (see also this example)，其中包含一个 div 作为 interact.js 的 "dropzone"。

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/

Answer 3

我找到了一个解决方案，方法是使用 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>

为了检测放置元素的特征，我使用了 select 交互，select 是鼠标悬停时的一个特征。这是处理放置事件并找到目标特征的 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...
        }
    }
});

将地图外部的内容拖放到要素（openlayers）上？

Drag & drop something from outside the map onto a feature (openlayers)?

javascript

drag-and-drop

openlayers-3