我正在编写一个使用 OpenLayers 的应用程序使用户能够将文件拖放到一组预定义的功能上,这些功能将通过 AJAX 发送到服务器。这些文件本身是来自地球物理设备的原始数据,将由服务器呈现为栅格图层。
我有 map 的拖放功能:
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 .
问题是,当将文件拖到 map Canvas 上时,OpenLayers 悬停选择不再有效,我希望它能给用户提供反馈,以确保他们将文件拖放到他们期望的位置。
我可以得到光标在 Canvas 上的位置:
map.events.register("mousemove", map, function(e) {
lonlat = map.getLonLatFromPixel(e.xy);
});
所以我可以在那个函数中做一个特征点测试,但如果能够使用现有的功能就更好了。
有什么方法可以将拖动消息传播到我的 OpenLayers 层?
最佳答案
来自 MDN 拖放文档 [1]:«请注意,只有拖动事件会被触发; mousemove
等鼠标事件不会在拖动操作期间触发。»
因此您将无法将拖动处理程序注册到 map 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);
})
希望对您有所帮助。
关于javascript - 我如何让 OpenLayers 功能选择和 Javascript 拖放一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11148303/