Question

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

由于我发现没有办法用openlayers做这个，我想通过使用interact.js框架来做到这一点。我的计划是通过鼠标悬停选择功能，这样当用户丢弃某些东西并释放鼠标按钮时，该功能就已经被选中了。

是否可以将地图外部的内容拖到带有openlayers的功能上？

如果没有，请你如何更好地建议如何做到这一点？

Answer 1

一个想法是为每个建筑创建一个overlay（另见此example），其中包含一个div作为＆＃34; dropzone＆＃34; for interact.js。

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 2

一旦将某些内容放到地图上，我会使用ol.control.MousePosition来获取鼠标位置。然后使用鼠标位置获取您想要与之交互的功能。

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>

为了检测元素被丢弃的特征，我使用了一个选择交互来选择鼠标悬停时的特征。以下是处理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...
        }
    }
});

拖拽从地图外部删除一些功能（openlayers）？

3 个答案: