将某些内容从地图外部拖放到要素(开放图层）上

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

本文关键字：图层 拖放 外部 地图      更新时间：2023-09-26

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

由于我发现没有办法用开放层来做到这一点，我想通过使用 interact.js 框架来做到这一点。我的计划是通过鼠标悬停来选择功能，因此当用户放下某些内容并释放鼠标按钮时，该功能已被选中。

是否可以将某些内容从地图外部拖动到具有开放图层的要素上？

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

一个想法是为每个建筑物创建一个覆盖层（另请参阅此示例），其中包含一个充当交互.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/

我会使用 ol.control.MousePosition 来获取鼠标位置，一旦有东西被放到地图上。然后使用鼠标位置获取要与之交互的功能。

我通过使用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>

为了检测元素被丢弃的特征，我使用了选择交互，在鼠标悬停时选择一个特征。下面是处理 drop 事件并查找目标功能的 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...
        }
    }
});
相关文章：