javascript - 将 map 外部的内容拖放到要素(openlayers)上?

标签 javascript drag-and-drop openlayers-3

我正在开发一个带有 openlayers 的网站,用户应该能够将建筑物的名称从建筑物列表( map 外)拖动到 map 上的要素上。

由于我找不到使用 openlayers 执行此操作的方法,因此我考虑使用 interact.js 框架来执行此操作。我的计划是通过鼠标悬停来选择功能,这样当用户放下东西并释放鼠标按钮时,该功能就已经被选中。

是否可以使用 openlayers 将 map 外部的内容拖到要素上?

如果没有,你有没有更好的建议如何像上面描述的那样做?

最佳答案

一个想法是创建一个 overlay (另请参阅此 example )对于每个建筑物,其中包含一个作为 interact.js 的“dropzone”的 div。

var dropZone = new ol.Overlay({
  position: [0, 0],
  positioning: 'center-center',
  element: document.getElementById('inner-dropzone'),
  stopEvent: false
});
map.addOverlay(dropZone);

我通过复制 interact.js 的拖放示例快速制作了一个简单的概念验证: http://jsfiddle.net/96gao5nu/2/

关于javascript - 将 map 外部的内容拖放到要素(openlayers)上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30847101/

相关文章:

javascript - 将模块模式用于大型项目

javascript - 检测某些元素外的点击

javascript - 如何为脚本元素内的数据属性设置值

javascript - 使用 jQuery 进行拖放

html - 如何以编程方式创建 DragEvent?

javascript - Open Layers 3 中的样式向量

javascript - Openlayers源码tileWMS?类型错误 : a. addEventListener 不是函数

javascript - JSON.stringify 忽略嵌套对象

delphi - 如何从 JvtThumbview 拖动缩略图?

javascript - 在 map 制作器上创建事件