如何在 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的所有可能選項的列表，請參見此處。

Answer 2

現在在 Open Layers 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 以激活。