Go to specific zoom values on mouse wheel movements in openlayers

Question

I have created a map using openlayers and have created an array of zoom values which are in decimals (for ex. [0.2, 1.13, 2.15, 3.45, 4.23, 5.14]. Now when I use mouse wheel to zoom in or zoom out of the map the zoom values changes in integer (for ex. 1 to 2 or 1 to 0). I want the zoom values to change to the values in the array. How can I achieve this?

Here's my map code:

let map = new Map({
        controls: [],
        interactions: defaults({mouseWheelZoom: false}).extend([
            new MouseWheelZoom({
              constrainResolution: true
            })
          ]),
        target: null,
        layers: [
            layer,
        ],
        view: view,
        keyboardEventTarget: setKeyboardInteractions ? document : null,
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true
    });

I have implemented my own Increment and decrement zoom level functions:

incrementZoomLevel = () => {
        let index = Math.floor(zoom); //Get current zoom level
        if(index != ZValues.length - 1) { //ZValues is my decimal zoom array
             view.setZoom(ZValues[index + 1]);
         }
    }

decrementZoomLevel = () => {
        let index = Math.floor(zoom);
        if(index != 0) {
            view.setZoom(ZValues[index - 1]);
        }
    }

So if I can find any scroll event listeners of openlayers then I can call these functions and change the values but I'm not able to find any such listener.

Mike Mike · Accepted Answer · 2020-07-31T13:21:58

You could create a custom view where the resolutions of the zoom levels are based on the fractional values of a standard view

let defaultView = new View();

zooms = [0.2, 1.13, 2.15, 3.45, 4.23, 5.14];

let resolutions = zooms.map(function(zoom) {
  return defaultView.getResolutionForZoom(zoom);
});

let customView = new View({resolutions: resolutions})

Are you using OpenLayers 5? In OpenLayers 6 the constrainResolution option must be set in the view, not in the interactions.

Go to specific zoom values on mouse wheel movements in openlayers

1 Answers