我们能制造油吗?覆盖可拖动在OpenLayers 3

Can we make ol.Overlay draggable on OpenLayers 3?

本文关键字：拖动 OpenLayers 覆盖 制造 我们      更新时间：2023-09-26

我正在努力使它成为一个ol。overlay是可拖动的，但是我做不到。我找到了这个例子(http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag)，但它是使用ol完成的。功能和我需要的是一个覆盖，因为我可以使用自定义-htmldiv-来显示我需要的东西。我还发现了一个非常有趣的例子，可以做我想做的事情，但它是使用谷歌地图v3完成的，我需要它的ol3。

您可以简单地在覆盖的div上注册'mousedown'事件监听器。在该监听器中，在窗口上注册' mousmove '和'mouseup'事件。要更新'mousemove'上的位置，请使用ol.Map#getEventPixel()方法，该方法将'mousemove'事件作为参数。在'mouseup'中，您只需注销窗口侦听器。

marker_el.addEventListener('mousedown', function(evt) {
  function move(evt) {
    marker.setPosition(map.getEventCoordinate(evt));
  }
  function end(evt) {
    window.removeEventListener('mousemove', move);
    window.removeEventListener('mouseup', end);
  }
  window.addEventListener('mousemove', move);
  window.addEventListener('mouseup', end);
});

UPDATE:

不需要这个ol.Map.prototype.forEachOverlayAtPixel方法(参见https://github.com/openlayers/ol3/issues/5760)。

只需在DOM覆盖元素上注册一个mousedown侦听器，就可以了。小提琴更新。

ol.Overlay是OL3中较差的类型，但通过一些工作，是的，您可以实现它。ol.Feature是万能的，如果你真的需要ol.Overlay，我拿出了这个演示小提琴。

思路是:

  • 监听pointerdown地图事件，检查点击像素处是否有覆盖;

    • ol.Map.prototype.forEachOverlayAtPixel -刚刚为问题
      • 创建

  • 取消ol.interaction.DragPan - map规划;

  • 监听pointermove并设置叠加位置;

  • 监听pointerup并恢复ol.interaction.DragPan;

我想在讨论中添加一点内容。我喜欢Jonatas的解决方案，但是如果覆盖层不是很小，除非你在覆盖层的正中央点击，否则它会有一点跳跃，所以我通过找到点击和覆盖元素当前位置之间的距离来改进他的解决方案。然后，在设置位置时，使用这些距离，以便鼠标在覆盖层上的位置不会随着您拖动覆盖层而改变。

let deltaX, deltaY
const getAdjustedCoords = coordinate => {
  const resultCoord = [coordinate[0] - deltaX, coordinate[1] - deltaY] 
  return resultCoord
}
marker_el.addEventListener('mousedown', function(evt) {
  dragPan.setActive(false);
  let markerpos = marker.getPosition();
  let clickPixel = [evt.x, evt.y]
  let clickCoords = map.getCoordinateFromPixel(clickPixel)
  
  deltaX = clickCoords[0] - markerpos[0]
  deltaY = clickCoords[1] - markerpos[1]
  marker.set('dragging', true);
  console.info('start dragging');
});
map.on('pointermove', function(evt) {
  if (marker.get('dragging') === true) {
    marker.setPosition(getAdjustedCoords(evt.coordinate));
  }
});
map.on('pointerup', function(evt) {
  if (marker.get('dragging') === true) {
    console.info('stop dragging');
    dragPan.setActive(true);
    marker.set('dragging', false);
  }
});

这是我的小提琴:https://jsfiddle.net/sxc24re8/

干杯!

相关文章：