zooming out option for ol.interaction.DragZoom

externs/olx.js

@@ -2520,7 +2520,8 @@ olx.interaction.DragRotateOptions.prototype.duration;
 /**
  * @typedef {{className: (string|undefined),
  *     condition: (ol.events.ConditionType|undefined),
- *     duration: (number|undefined)}}
+ *     duration: (number|undefined),
+ *     out: (boolean|undefined)}}
  * @api
  */
 olx.interaction.DragZoomOptions;
@@ -2552,6 +2553,14 @@ olx.interaction.DragZoomOptions.prototype.condition;
 olx.interaction.DragZoomOptions.prototype.duration;
 
 
+/**
+ * Use interaction for zooming out. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.DragZoomOptions.prototype.out;
+
+
 /**
  * @typedef {{clickTolerance: (number|undefined),
  *     features: (ol.Collection.<ol.Feature>|undefined),

src/ol/interaction/dragzoominteraction.js

@@ -34,6 +34,12 @@ ol.interaction.DragZoom = function(opt_options) {
    */
   this.duration_ = options.duration !== undefined ? options.duration : 200;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.out_ = options.out !== undefined ? options.out : false;
+
   goog.base(this, {
     condition: condition,
     className: options.className || 'ol-dragzoom'
@@ -57,6 +63,17 @@ ol.interaction.DragZoom.prototype.onBoxEnd = function() {
 
   var extent = this.getGeometry().getExtent();
 
+  if (this.out_) {
+    var mapExtent = view.calculateExtent(size);
+    var boxPixelExtent = ol.extent.createOrUpdateFromCoordinates([
+      map.getPixelFromCoordinate(ol.extent.getBottomLeft(extent)),
+      map.getPixelFromCoordinate(ol.extent.getTopRight(extent))]);
+    var factor = view.getResolutionForExtent(boxPixelExtent, size);
+
+    ol.extent.scaleFromCenter(mapExtent, 1 / factor);
+    extent = mapExtent;
+  }
+
   var resolution = view.constrainResolution(
       view.getResolutionForExtent(extent, size));
 

test/spec/ol/interaction/dragzoominteraction.test.js

@@ -77,6 +77,31 @@ describe('ol.interaction.DragZoom', function() {
 
     });
 
+    it('sets new resolution while zooming out', function(done) {
+      var interaction = new ol.interaction.DragZoom({
+        duration: 10,
+        out: true
+      });
+      map.addInteraction(interaction);
+
+      var box = new ol.render.Box();
+      var extent = [-11.25, -11.25, 11.25, 11.25];
+      box.geometry_ = ol.geom.Polygon.fromExtent(extent);
+      interaction.box_ = box;
+
+      map.getView().setResolution(0.25);
+      setTimeout(function() {
+        interaction.onBoxEnd();
+        setTimeout(function() {
+          var view = map.getView();
+          var resolution = view.getResolution();
+          expect(resolution).to.eql(view.constrainResolution(0.5));
+          done();
+        }, 50);
+      }, 50);
+
+    });
+
   });