New MouseWheelZoom behavior

Describe the bug The old MouseWheelZoom behavior was, to only stop at the predefined resolutions. Now, when zooming multiple ticks at once, I end up at intermediate levels. Additionally it wont ever realign with the predefined resolutions.

To Reproduce Steps to reproduce the behavior:

1. Go to ‘https://www.geoportal.ch/iggis/map/40?y=2738843.52&x=1249912.36&scale=100000’
2. Zoom in a few ticks with the mousewheel. Notice the scale (bottom center of the page) will show not align with pre-defined levels in the dropdown.

Expected behavior Zooming a few ticks should end at a predefined resolution, even without constrainResolution: true. An acceptable solution would be, to at least realign with predefined resolutions when zooming one tick again.

[bschaepper]

Today I gave it a go to make MouseWheelZoom behave the way I want. It’s not thoroughly tested as of yet, but here’s what I ended up with. I copied a lot from ol/interaction/MouseWheelZoom, deleted what I didn’t understand 😉 and inlined zoomByDelta in order to round the current zoom level.

I also saw the constrainResolution in in the latest development version, but I don’t think this would do the trick.

"use strict";

import OlView from "ol/View";
import { DEVICE_PIXEL_RATIO, FIREFOX } from "ol/has";
import OlInteractionMouseWheelZoom from "ol/interaction/MouseWheelZoom";
import { easeOut } from "ol/easing";
import OlMapBrowserEvent from "ol/MapBrowserEvent";
import EventType from "ol/events/EventType";


export default class ContrainedMouseWheelZoom extends OlInteractionMouseWheelZoom {

    protected conditionInternal_: (mapBrowserEvent: OlMapBrowserEvent) => boolean;

    public handleEvent(mapBrowserEvent: OlMapBrowserEvent) {
        if (!this.conditionInternal_(mapBrowserEvent)) {
            return true;
        }
        const type = mapBrowserEvent.type;
        if (type !== EventType.WHEEL) {
            return true;
        }

        mapBrowserEvent.preventDefault();
        const map = mapBrowserEvent.map;
        const delta = this.normalizeDelta(mapBrowserEvent);
        if (delta === 0) {
            return false;
        }

        this.handleWheelZoom(map, delta, mapBrowserEvent.coordinate);
        return false;
    }

    private normalizeDelta(mapBrowserEvent) {
        // Delta normalisation inspired by
        // https://github.com/mapbox/mapbox-gl-js/blob/001c7b9/js/ui/handler/scroll_zoom.js
        let delta;
        const wheelEvent = mapBrowserEvent.originalEvent;

        if (mapBrowserEvent.type == EventType.WHEEL) {
            delta = wheelEvent.deltaY;
            if (FIREFOX &&
                wheelEvent.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
                delta /= DEVICE_PIXEL_RATIO;
            }
            if (wheelEvent.deltaMode === WheelEvent.DOM_DELTA_LINE) {
                delta *= 40;
            }
        }

        return delta ? delta > 0 ? -1 : 1 : 0;
    }

    protected handleWheelZoom(map, delta, anchor) {
        const view: OlView = map.getView();

        const currentZoom = Math.round(view.getZoom());
        if (currentZoom === undefined) {
            return;
        }

        const newZoom = view.getConstrainedZoom(currentZoom + delta);
        const newResolution = view.getResolutionForZoom(newZoom);
        if (view.getAnimating()) {
            view.cancelAnimations();
        }

        view.animate({
            resolution: newResolution,
            anchor: anchor,
            duration: this.duration_,
            easing: easeOut
        });
    }

}

[ahocevar]

Using the new constraints system, you should be able to write your own interaction that behaves exactly like you desire. When you use the latest ol@dev, constrainResolution: true has a much improved behaviour over v6.2.1. See https://openlayers.org/en/master/examples/pinch-zoom.html.