Add approximatelyEquals function for comparing extents

src/ol/extent.js

@@ -295,6 +295,18 @@ export function equals(extent1, extent2) {
       extent1[1] == extent2[1] && extent1[3] == extent2[3];
 }
 
+/**
+ * Determine if two extents are approximately equivalent.
+ * @param {Extent} extent1 Extent 1.
+ * @param {Extent} extent2 Extent 2.
+ * @param {number} tolerance Tolerance in extent coordinate units.
+ * @return {boolean} The two extents differ by less than the tolerance.
+ */
+export function approximatelyEquals(extent1, extent2, tolerance) {
+  return Math.abs(extent1[0] - extent2[0]) < tolerance && Math.abs(extent1[2] - extent2[2]) < tolerance &&
+  Math.abs(extent1[1] - extent2[1]) < tolerance && Math.abs(extent1[3] - extent2[3]) < tolerance;
+}
+
 
 /**
  * Modify an extent to include another extent.

src/ol/layer/Graticule.js

@@ -18,7 +18,7 @@ import {
   applyTransform,
   containsCoordinate,
   containsExtent,
-  equals,
+  approximatelyEquals,
   getCenter,
   getHeight,
   getIntersection,
@@ -481,17 +481,15 @@ class Graticule extends VectorLayer {
    */
   strategyFunction(extent, resolution) {
     // extents may be passed in different worlds, to avoid endless loop we use only one
-    const realExtent = extent.slice();
+    const realWorldExtent = extent.slice();
     if (this.projection_ && this.getSource().getWrapX()) {
-      wrapExtentX(realExtent, this.projection_);
+      wrapExtentX(realWorldExtent, this.projection_);
     }
-    realExtent[0] = Math.round(realExtent[0] * 1e8) / 1e8;
-    realExtent[2] = Math.round(realExtent[2] * 1e8) / 1e8;
-    if (this.loadedExtent_ && !equals(this.loadedExtent_, realExtent)) {
+    if (this.loadedExtent_ && !approximatelyEquals(this.loadedExtent_, realWorldExtent, resolution)) {
       // we should not keep track of loaded extents
       this.getSource().removeLoadedExtent(this.loadedExtent_);
     }
-    return [realExtent];
+    return [realWorldExtent];
   }
 
   /**
@@ -508,7 +506,7 @@ class Graticule extends VectorLayer {
     const layerExtent = this.getExtent() || [-Infinity, -Infinity, Infinity, Infinity];
     const renderExtent = getIntersection(layerExtent, extent);
 
-    if (this.renderedExtent_ && equals(this.renderedExtent_, renderExtent)) {
+    if (this.renderedExtent_ && approximatelyEquals(this.renderedExtent_, renderExtent, resolution)) {
       return;
     }
     this.renderedExtent_ = renderExtent;

test/spec/ol/extent.test.js

@@ -851,4 +851,13 @@ describe('ol.extent', function() {
 
   });
 
+  describe('approximatelyEquals', function() {
+    it('returns true when within tolerance', function() {
+      expect(_ol_extent_.approximatelyEquals([16, 48, 17, 49], [16.09, 48, 17, 49], 0.1)).to.be(true);
+    });
+    it('returns false when not within tolerance', function() {
+      expect(_ol_extent_.approximatelyEquals([16, 48, 17, 49], [16.11, 48, 17, 49], 0.1)).to.be(false);
+    });
+  });
+
 });