Add a zoom setting to MouseWheelZoomInteraction

By default, zooming in or out zooms using the mouse's location
as an anchor, which makes it possible to navigate the map
using scrolling only, and makes zooming in more intuitive.

This commit adds a new useAnchor option to the MouseWheelZoom
interaction. It is enabled by default, which changes nothing
to the current behavior of the interaction. When disabled,
the interaction stops registering its lastAnchor_ value. This
turns the zoom into a very basic one, that zooms to the center
of the screen.

To use the map center zoom, set the useAnchor option to
false when creating the MouseWheelZoomInteraction, or use its
setMouseAnchor function.

externs/olx.js

@@ -2648,7 +2648,8 @@ olx.interaction.ModifyOptions.prototype.wrapX;
 
 
 /**
- * @typedef {{duration: (number|undefined)}}
+ * @typedef {{duration: (number|undefined),
+ *     useAnchor: (boolean|undefined)}}
  * @api
  */
 olx.interaction.MouseWheelZoomOptions;
@@ -2662,6 +2663,16 @@ olx.interaction.MouseWheelZoomOptions;
 olx.interaction.MouseWheelZoomOptions.prototype.duration;
 
 
+/**
+ * Enable zooming using the mouse's location as the anchor. Default is `true`.
+ * When set to false, zooming in and out will zoom to the center of the screen
+ * instead of zooming on the mouse's location.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.MouseWheelZoomOptions.prototype.useAnchor;
+
+
 /**
  * @typedef {{threshold: (number|undefined),
  *     duration: (number|undefined)}}

src/ol/interaction/mousewheelzoominteraction.js

@@ -39,6 +39,13 @@ ol.interaction.MouseWheelZoom = function(opt_options) {
    */
   this.duration_ = goog.isDef(options.duration) ? options.duration : 250;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.useAnchor_ = goog.isDef(options.useAnchor) ?
+      options.useAnchor : true;
+
   /**
    * @private
    * @type {?ol.Coordinate}
@@ -78,7 +85,10 @@ ol.interaction.MouseWheelZoom.handleEvent = function(mapBrowserEvent) {
     goog.asserts.assertInstanceof(mouseWheelEvent, goog.events.MouseWheelEvent,
         'mouseWheelEvent should be of type MouseWheelEvent');
 
+    if (this.useAnchor_) {
       this.lastAnchor_ = mapBrowserEvent.coordinate;
+    }
+
     this.delta_ += mouseWheelEvent.deltaY;
 
     if (!goog.isDef(this.startTime_)) {
@@ -119,3 +129,17 @@ ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) {
   this.startTime_ = undefined;
   this.timeoutId_ = undefined;
 };
+
+
+/**
+ * Enable or disable using the mouse's location as an anchor when zooming
+ * @param {boolean} useAnchor true to zoom to the mouse's location, false
+ * to zoom to the center of the map
+ * @api
+ */
+ol.interaction.MouseWheelZoom.prototype.setMouseAnchor = function(useAnchor) {
+  this.useAnchor_ = useAnchor;
+  if (!useAnchor) {
+    this.lastAnchor_ = null;
+  }
+};

test/spec/ol/map.test.js

@@ -243,6 +243,9 @@ describe('ol.Map', function() {
         var interactions = ol.interaction.defaults(options);
         expect(interactions.getLength()).to.eql(1);
         expect(interactions.item(0)).to.be.a(ol.interaction.MouseWheelZoom);
+        expect(interactions.item(0).useAnchor_).to.eql(true);
+        interactions.item(0).setMouseAnchor(false);
+        expect(interactions.item(0).useAnchor_).to.eql(false);
       });
     });