[英]How would I get OpenLayers feature selection and Javascript drag and drop working together?
我正在编写一个使用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层吗?
从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);
})
希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.