我将如何让OpenLayers功能选择和Javascript拖放一起工作
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();
其余代码大多只是 Box 示例 - 矢量。
问题是,将文件拖动到地图画布上时,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);
})
希望能有所帮助。
1 - https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
相关文章:
- Javascript 拖放脚本
- JavaScript拖放 - 防止元素拖放到另一个可拖放的元素中
- Javascript拖放测试
- 用一点javascript拖放HTML5图像
- 使用 Javascript 拖放交叉淡入淡出
- 我将如何让OpenLayers功能选择和Javascript拖放一起工作
- HTML5 / JavaScript拖放购物车
- JavaScript拖放文档/文件
- javascript拖放中出错
- webkitGetAsEntry的Javascript拖放文件上传问题
- 如何使用JavaScript拖放表行以交换它们
- Javascript:拖放图片上传:打印错误信息
- Javascript拖放:成功拖放后移除被拖放的元素
- 使用JavaScript拖放
- 为孩子们创建一个JavaScript拖放编辑器,想要包含JSHint来检查语法-我该怎么做呢?
- 如何避免抓取图像时,使用javascript拖放
- 满足此要求的Javascript拖放插件
- HTML/JavaScript拖放,但在拖放过程中改变文本
- Javascript拖放,addeventlist.-完全迷路了
- Javascript拖放:ondragleave工作解决方案