Unable to add event listener for MouseWheelZoom event in Openlayer map

0
votes

I am trying to implement a functionality using openlayers with Angular in which I have to add one interaction using MouseWheelZoom.

Interaction gets added but control does not come inside the event listener for this when I move my mouse wheel in map.

ngOnInit() {
    this.createMap();
    const mapInteraction = new MouseWheelZoom();
    this.map.addInteraction(mapInteraction);
    mapInteraction.on('change', (event) => {
      console.log('event', event);
    });
  }

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

Please find a simple stackblitz for this here

angularopenlayersopenlayers-6angular-openlayers
If you call mapInteraction.changed(); the event fires as expected. MouseWheelZoom is included in the default interactions, you do not need to add another one. - Mike
Do I need to add the interaction in this way ? code import Interaction from 'ol/interaction/Interaction'; const mapInteraction = new Interaction(); this.map.addInteraction(mapInteraction); mapInteraction.changed(); mapInteraction.on('change', (event) => { console.log('event', event); }); - user2454954
@Mike calling "changed" method would trigger the event manually, but we want to listen to the event when its triggered by user interaction - user2454954
Before adding a customised interaction you must exclude the default when you create the map nteractions: defaultInteractions({mouseWheelZoom: false}), The interaction does not fire change events in response to user actions, it causes the view to fire a change:resolution event. - Mike