OpenLayers 6/7拖拽平移模式左键单击地图后卡顿无法取消

问题现象 #

在Vue项目中使用OpenLayers 6或7版本时，左键单击地图后会触发DragPan模式异常：无需按住鼠标按键，移动鼠标地图就会跟随平移，且无法手动取消该状态。

临时方案的风险 #

直接修改node_modules/ol/events/MapBrowserEventHandler.js虽然能临时解决问题，但这种方式存在诸多隐患：

• 依赖包更新后，修改的代码会被覆盖，问题会复现
• 团队协作时，其他成员无法同步本地的源码修改
• 随意修改依赖包源码可能引发未知的兼容性问题

可行的修复方案 #

方案一：监听鼠标事件重置拖拽状态 #

在Vue组件的生命周期钩子中，获取默认的DragPan交互，监听地图的点击和鼠标抬起事件，强制重置拖拽状态：

import { Map, interaction } from 'ol';
import DragPan from 'ol/interaction/DragPan';

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = new Map({
      // 你的地图配置（目标容器、图层、视图等）
      target: 'map-container',
      // ...
    });

    // 获取默认的DragPan交互实例
    const dragPanInteraction = this.map.getInteractions().getArray().find(
      item => item instanceof DragPan
    );

    // 监听地图点击事件，重置拖拽状态
    this.map.on('click', () => {
      if (dragPanInteraction.get('dragging')) {
        dragPanInteraction.set('dragging', false);
      }
    });

    // 监听鼠标抬起事件，确保拖拽状态正确重置
    this.map.getViewport().addEventListener('mouseup', () => {
      if (dragPanInteraction.get('dragging')) {
        dragPanInteraction.set('dragging', false);
      }
    });
  },
  beforeUnmount() {
    // 组件销毁时清理事件监听
    this.map?.getViewport().removeEventListener('mouseup', () => {});
    this.map?.dispose();
  }
};

方案二：自定义修正版DragPan交互 #

通过继承原生DragPan类，重写鼠标抬起事件的处理逻辑，确保拖拽状态被正确重置，然后替换默认的DragPan交互：

import { Map, interaction } from 'ol';
import DragPan from 'ol/interaction/DragPan';

// 自定义修正的DragPan交互
class FixedDragPan extends DragPan {
  handleUpEvent(mapBrowserEvent) {
    // 调用原生方法
    const result = super.handleUpEvent(mapBrowserEvent);
    // 强制重置拖拽状态
    this.set('dragging', false);
    return result;
  }
}

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = new Map({
      target: 'map-container',
      // 禁用默认的DragPan，替换为自定义的版本
      interactions: interaction.defaults({ dragPan: false }).extend([
        new FixedDragPan()
      ]),
      // ...其他配置（视图、图层等）
    });
  },
  beforeUnmount() {
    this.map?.dispose();
  }
};

问题原因 #

该异常通常是由于OpenLayers的MapBrowserEventHandler未能正确捕获鼠标抬起事件，导致DragPan的拖拽状态没有被重置。Vue组件的事件冒泡机制或生命周期钩子可能干扰了原生鼠标事件的正常触发，使得OpenLayers无法识别鼠标按键已松开。

内容的提问来源于stack exchange，提问作者robtot