如何让OpenLayers的要素选择和JavaScript拖放一起工作？

Question

我正在编写一个应用程序，使用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图层？

- MerseyViking

Answer 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

（此链接为关于拖放的技术文档，供参考）

- tonio

---

那么你应该能够在处理程序中以编程方式选择该功能。 - tonio