It's simple: create L.Map with scrollWheelZoom: false option, then add a listener:
map.once('focus', function() { map.scrollWheelZoom.enable(); });
If you need to toggle zooming:
map.on('click', function() {
if (map.scrollWheelZoom.enabled()) {
map.scrollWheelZoom.disable();
}
else {
map.scrollWheelZoom.enable();
}
});
Simplest way I've found is to set the interaction defaults to false when you instantiate your map like so:
var map = new ol.Map({
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
...
});
Then once it is disabled you will need to provide your own functions to zoom on mouse scroll. Something like this should do the trick:
map.on('mousewheel', function(e){
e.browserEvent.preventDefault();
var now = new Date();
if(lastScrollZoom === null || now > lastScrollZoom ) {
var zoom_in = e.browserEvent.deltaY < 0;
_panAndZoom(e.map, zoom_in, e.coordinate);
lastScrollZoom = now.setMilliseconds(now.getMilliseconds() + scrollDelta)
}
});
This is what I use to prevent the scroll wheel from zooming all the way in or out too rapidly. However it relies on you creating a function _panAndZoom(map,zoom_in, coordinates) and setting the lastScrollZoom and scrollDelta settings in your app.
This is my _panAndZoom function:
_panAndZoom: function(map, zoom_in, coordinates){
var view = map.getView();
var currentResolution = view.getResolution();
var delta = zoom_in ? 1 : -1;
var pan = ol.animation.pan({
duration: 500,
source: view.getCenter(),
easing: ol.easing.easeOut
});
var zoom = ol.animation.zoom({
resolution: currentResolution,
duration: 500,
easing: ol.easing.easeOut
});
map.beforeRender(pan,zoom);
var newResolution = view.constrainResolution(currentResolution, delta);
view.setResolution(newResolution);
view.setCenter(coordinates);
},
Best Answer
Here the answers to your questions:
OpenLayers doesn't have this functionality but you can do it by creating something like in this link.
Also, you can do it with only (shift key) or (alt key)