Constrain the center in zoomByDelta

src/ol/interaction/interaction.js

@@ -180,6 +180,23 @@ ol.interaction.Interaction.zoom = function(view, resolution, opt_anchor, opt_dur
 ol.interaction.Interaction.zoomByDelta = function(view, delta, opt_anchor, opt_duration) {
   var currentResolution = view.getResolution();
   var resolution = view.constrainResolution(currentResolution, delta, 0);
+
+  // If we have a constraint on center, we need to change the anchor so that the
+  // new center is within the extent. We first calculate the new center, apply
+  // the constraint to it, and then calculate back the anchor
+  if (opt_anchor && resolution !== undefined && resolution !== currentResolution) {
+    var currentCenter = view.getCenter();
+    var center = view.calculateCenterZoom(resolution, opt_anchor);
+    center = view.constrainCenter(center);
+
+    opt_anchor = [
+      (resolution * currentCenter[0] - currentResolution * center[0]) /
+          (resolution - currentResolution),
+      (resolution * currentCenter[1] - currentResolution * center[1]) /
+          (resolution - currentResolution)
+    ];
+  }
+
   ol.interaction.Interaction.zoomWithoutConstraints(
       view, resolution, opt_anchor, opt_duration);
 };

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

@@ -58,4 +58,67 @@ describe('ol.interaction.Interaction', function() {
 
   });
 
+  describe('zoomByDelta()', function() {
+
+    it('changes view resolution', function() {
+      var view = new ol.View({
+        resolution: 1,
+        resolutions: [4, 2, 1, 0.5, 0.25]
+      });
+
+      ol.interaction.Interaction.zoomByDelta(view, 1);
+      expect(view.getResolution()).to.be(0.5);
+
+      ol.interaction.Interaction.zoomByDelta(view, -1);
+      expect(view.getResolution()).to.be(1);
+
+      ol.interaction.Interaction.zoomByDelta(view, 2);
+      expect(view.getResolution()).to.be(0.25);
+
+      ol.interaction.Interaction.zoomByDelta(view, -2);
+      expect(view.getResolution()).to.be(1);
+    });
+
+    it('changes view resolution and center relative to the anchor', function() {
+      var view = new ol.View({
+        center: [0, 0],
+        resolution: 1,
+        resolutions: [4, 2, 1, 0.5, 0.25]
+      });
+
+      ol.interaction.Interaction.zoomByDelta(view, 1, [10, 10]);
+      expect(view.getCenter()).to.eql([5, 5]);
+
+      ol.interaction.Interaction.zoomByDelta(view, -1, [0, 0]);
+      expect(view.getCenter()).to.eql([10, 10]);
+
+      ol.interaction.Interaction.zoomByDelta(view, 2, [0, 0]);
+      expect(view.getCenter()).to.eql([2.5, 2.5]);
+
+      ol.interaction.Interaction.zoomByDelta(view, -2, [0, 0]);
+      expect(view.getCenter()).to.eql([10, 10]);
+    });
+
+    it('changes view resolution and center relative to the anchor, while respecting the extent', function() {
+      var view = new ol.View({
+        center: [0, 0],
+        extent: [-2.5, -2.5, 2.5, 2.5],
+        resolution: 1,
+        resolutions: [4, 2, 1, 0.5, 0.25]
+      });
+
+      ol.interaction.Interaction.zoomByDelta(view, 1, [10, 10]);
+      expect(view.getCenter()).to.eql([2.5, 2.5]);
+
+      ol.interaction.Interaction.zoomByDelta(view, -1, [0, 0]);
+      expect(view.getCenter()).to.eql([2.5, 2.5]);
+
+      ol.interaction.Interaction.zoomByDelta(view, 2, [10, 10]);
+      expect(view.getCenter()).to.eql([2.5, 2.5]);
+
+      ol.interaction.Interaction.zoomByDelta(view, -2, [0, 0]);
+      expect(view.getCenter()).to.eql([2.5, 2.5]);
+    });
+  });
+
 });