diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index 513021d1a3..e235d55e06 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -77,6 +77,19 @@ ol.proj.getPointResolution(projection, resolution, point); Note that if you were previously creating a projection with a `getPointResolution` function in the constructor (or calling `projection.setGetPointResolution()` after construction), this function will be used by `ol.proj.getPointResolution()`. +#### `ol.interaction.PinchZoom` no longer zooms to a whole-number zoom level after the gesture ends + +The old behavior of `ol.interaction.PinchZoom` was to zoom to the next integer zoom level after the user ends the gesture. + +Now the pinch zoom keeps the user selected zoom level even if it is a fractional zoom. + +To get the old behavior set the new `constrainResolution` parameter to `true` like this: +```js +new ol.interaction.PinchZoom({constrainResolution: true}) +``` + +See the new `pinchZoom` example for a complete implementation. + ### v3.19.1 #### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern` diff --git a/examples/pinchZoom.html b/examples/pinchZoom.html new file mode 100644 index 0000000000..d7056048a1 --- /dev/null +++ b/examples/pinchZoom.html @@ -0,0 +1,10 @@ +--- +layout: example.html +title: PinchZoom +shortdesc: A basic example for a pinch zoom with a restriction to integer zooms. +docs: > +
Use a pinch zoom gesture to zoom the map. + After the gesture the map will zoomed to the next whole-number zoom level with an animtation.
+tags: "pinch, zoom, interaction" +--- + diff --git a/examples/pinchZoom.js b/examples/pinchZoom.js new file mode 100644 index 0000000000..5e3227f167 --- /dev/null +++ b/examples/pinchZoom.js @@ -0,0 +1,25 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.interaction'); +goog.require('ol.interaction.PinchZoom'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + interactions: ol.interaction.defaults({pinchZoom: false}).extend([ + new ol.interaction.PinchZoom({ + constrainResolution: true // force zooming to a integer zoom + }) + ]), + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); diff --git a/externs/olx.js b/externs/olx.js index 2ae1aab718..c112d37ce9 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -3145,6 +3145,13 @@ olx.interaction.PinchZoomOptions; */ olx.interaction.PinchZoomOptions.prototype.duration; +/** + * Zoom to the closest integer zoom level after the pinch gesture ends. Default is `false`. + * @type {boolean|undefined} + * @api + */ +olx.interaction.PinchZoomOptions.prototype.constrainResolution; + /** * @typedef {{handleDownEvent: (function(ol.MapBrowserPointerEvent):boolean|undefined), diff --git a/src/ol/interaction/pinchzoom.js b/src/ol/interaction/pinchzoom.js index ac0bc45f3a..412cc7ce12 100644 --- a/src/ol/interaction/pinchzoom.js +++ b/src/ol/interaction/pinchzoom.js @@ -27,6 +27,12 @@ ol.interaction.PinchZoom = function(opt_options) { var options = opt_options ? opt_options : {}; + /** + * @private + * @type {boolean} + */ + this.constrainResolution_ = options.constrainResolution || false; + /** * @private * @type {ol.Coordinate} @@ -111,13 +117,15 @@ ol.interaction.PinchZoom.handleUpEvent_ = function(mapBrowserEvent) { var map = mapBrowserEvent.map; var view = map.getView(); view.setHint(ol.View.Hint.INTERACTING, -1); - var resolution = view.getResolution(); - // Zoom to final resolution, with an animation, and provide a - // direction not to zoom out/in if user was pinching in/out. - // Direction is > 0 if pinching out, and < 0 if pinching in. - var direction = this.lastScaleDelta_ - 1; - ol.interaction.Interaction.zoom(map, view, resolution, - this.anchor_, this.duration_, direction); + if (this.constrainResolution_) { + var resolution = view.getResolution(); + // Zoom to final resolution, with an animation, and provide a + // direction not to zoom out/in if user was pinching in/out. + // Direction is > 0 if pinching out, and < 0 if pinching in. + var direction = this.lastScaleDelta_ - 1; + ol.interaction.Interaction.zoom(map, view, resolution, + this.anchor_, this.duration_, direction); + } return false; } else { return true;