在Angular+OpenLayers中MouseWheelZoom交互事件监听器无响应

问题原因 #

1. 事件监听错误：你监听的change事件是MouseWheelZoom交互实例自身属性（如启用状态）改变时才会触发的事件，并非滚轮缩放动作的触发事件。
2. 重复添加交互冲突：OpenLayers地图默认已包含MouseWheelZoom交互，手动重复添加可能导致交互逻辑冲突。

解决方案 #

方案1：监听地图视图的缩放级别变化（推荐） #

缩放动作最终会反映在地图视图（View）的zoom属性上，直接监听视图的change:zoom事件即可捕获缩放变化：

ngOnInit() {
    this.createMap();
    // 监听视图缩放级别变化
    this.map.getView().on('change:zoom', (event) => {
      console.log('当前缩放级别:', event.target.getZoom());
    });
  }

  createMap() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  }

方案2：监听MouseWheelZoom交互的滚轮动作事件 #

如果需要针对滚轮操作本身监听，可以获取地图默认的MouseWheelZoom交互并监听其wheel事件：

ngOnInit() {
    this.createMap();
    // 获取地图默认的MouseWheelZoom交互
    const mouseWheelZoom = this.map.getInteractions().getArray().find(
      interaction => interaction instanceof MouseWheelZoom
    ) as MouseWheelZoom;
    
    // 监听滚轮动作事件
    mouseWheelZoom.on('wheel', (event) => {
      console.log('滚轮缩放动作触发:', event);
    });
  }

  createMap() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  }

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