我如何让 OpenLayers 功能选择和 Javascript 拖放一起工作？答案

【问题标题】：How would I get OpenLayers feature selection and Javascript drag and drop working together?我如何让 OpenLayers 功能选择和 Javascript 拖放一起工作？
【发布时间】：2012-06-21 23:32:35
【问题描述】：

我正在编写一个应用程序，它使用OpenLayers 使用户能够将文件拖放到一组预定义的功能上，这些功能通过 AJAX 发送到服务器。这些文件本身是来自地球物理设备的原始数据，将由服务器呈现为栅格图层。

我已经为地图拖放工作：

var mapelem = $id("map");
mapelem.addEventListener("dragover", FileDragHover, false);
mapelem.addEventListener("dragleave", FileDragHover, false);
mapelem.addEventListener("drop", FileSelectHandler, false);

我在使用此代码时突出显示了悬停：

var sf = new OpenLayers.Control.SelectFeature(boxes, {
    hover: true,
    multiple: false,
    highlightOnly: true
});
map.addControl(sf);
sf.activate();

其余代码大多只是Boxes Example - Vector。

问题在于，当将文件拖到地图画布上时，OpenLayers 悬停选择不再起作用，我希望它为用户提供反馈，以确保他们将文件拖放到他们期望的位置。

我可以得到光标在画布上的位置：

map.events.register("mousemove", map, function(e) { 
    lonlat = map.getLonLatFromPixel(e.xy);
});

所以我也许可以在那个功能中做一个功能点测试，但如果能够使用现有的功能那就太好了。

有什么方法可以将拖动消息传播到我的 OpenLayers 层？

【问题讨论】：

标签： javascript drag-and-drop openlayers

【解决方案1】：

来自 MDN 拖放文档 [1]：«注意只有拖动事件被触发；在拖动操作期间不会触发诸如mousemove 之类的鼠标事件。»

因此，您将无法将拖动处理程序注册到地图 div。也许您可以尝试在每个功能上注册一个拖动处理程序。这里有一些半测试的代码（仅使用 SVG 渲染器）：

boxes.features.forEach(function(f){
    elem = $(f.geometry.id);
    elem.addEventListener("dragover", FileDragHover, false);
    elem.addEventListener("dragleave", FileDragHover, false);
    elem.addEventListener("drop", FileSelectHandler, false);
})

希望能有所帮助。

1 - https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

【讨论】：

那么您应该能够以编程方式选择处理程序中的功能。