如何在 OpenLayers 3 中禁用 DragPan？

Question

如何在 Openlayers 3 中禁用 DragPan 交互（当地图已经定义时）？

另外，为什么我无法使用 mousemove 事件？
我正在这样做：map.on('mousemove',function(e){ ...}); 但它不起作用。

Answer 1

要禁用交互，您需要将其从地图中删除。如果您没有对您的交互的引用，您可以使用 getInteractions 映射方法找到它：

var dragPan;
map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.DragPan) {
    dragPan = interaction;
  }
}, this);
if (dragPan) {
  map.removeInteraction(dragPan);
}

对于鼠标移动事件，正确使用的事件是“pointermove”，请参阅此处的使用示例：http://openlayers.org/en/v3.3.0/examples/icon.html

知道您可以配置要默认创建和添加到地图的交互。例如，如果您想创建一个没有 dragPan 交互的地图，您可以这样做：

var map = new ol.Map({
  layers: layers,
  interactions: ol.interaction.defaults({
    dragPan: false
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

有关 ol.interaction.defaults 所有可能选项的列表，请参阅 here。

Answer 2

开放层 3 中现在有一个 setActive 方法：

map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.DragPan) {
    interaction.setActive(false);
  }
}, this);

Answer 3

OpenLayers v5.3.1 最新版本

如果要激活或停用 MouseWheelZoom、DoubleClickZoom、DragPan

先添加引用

import { defaults as defaultInteractions, MouseWheelZoom,
DoubleClickZoom, DragPan } from 'ol/interaction';

创建您的地图并在您的地图中添加交互 MouseWheelZoom、DoubleClickZoom、DragPan。

this._map = new Map({
      interactions: defaultInteractions({
        mouseWheelZoom: true,
        doubleClickZoom: true,
        dragPan: true,
      }).extend([]),
      layers: this.getBaseLayersFromConfig(this.baseLayers),
      controls: defaultControls({ rotate: false })
    });

    this._map.setTarget(this.host.nativeElement.firstElementChild);
    this._map.on('moveend', this.onMoveEnd.bind(this));
    this._map.on('click', this.onClick.bind(this));
    // debounce pointermove event so as to not flood other components
    this.pointerMoveSubscription$ = fromEvent(this._map, 'pointermove')
      .pipe(debounceTime(200))
      .subscribe((res) => {
        this.onMove(res);
        // console.log('######pointer move ');
      });
    this._map.on('dblclick', this.onDoubleClick.bind(this));
    this.initialised.emit();

并像这样使用 instanceof 来停用。您可以将这些代码放在某些事件中。

this._map.getInteractions().forEach(e => {
       if((e instanceof MouseWheelZoom) || (e instanceof DoubleClickZoom) || (e instanceof DragPan))
       {
                 e.setActive(false);
       }
      });

将 false 替换为 true 以激活。

如何在 OpenLayers 3 中禁用 DragPan？

How to disable DragPan in OpenLayers 3?

openlayers-3