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图层？

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

我如何获得OpenLayers功能选择和Javascript拖放一起工作？

1 个答案: