Merge pull request #11532 from ahocevar/tilegrid-docs

Make TileGrid behave as documented with extent and sizes options

src/ol/tilecoord.js

@@ -76,13 +76,7 @@ export function withinExtentAndZ(tileCoord, tileGrid) {
   if (tileGrid.getMinZoom() > z || z > tileGrid.getMaxZoom()) {
     return false;
   }
-  const extent = tileGrid.getExtent();
+  const tileRange = tileGrid.getFullTileRange(z);
-  let tileRange;
-  if (!extent) {
-    tileRange = tileGrid.getFullTileRange(z);
-  } else {
-    tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
-  }
   if (!tileRange) {
     return true;
   } else {

src/ol/tilegrid/TileGrid.js

@@ -188,6 +188,13 @@ class TileGrid {
           Math.min(0, size[1]),
           Math.max(size[1] - 1, -1)
         );
+        if (extent) {
+          const restrictedTileRange = this.getTileRangeForExtentAndZ(extent, z);
+          tileRange.minX = Math.max(restrictedTileRange.minX, tileRange.minX);
+          tileRange.maxX = Math.min(restrictedTileRange.maxX, tileRange.maxX);
+          tileRange.minY = Math.max(restrictedTileRange.minY, tileRange.minY);
+          tileRange.maxY = Math.min(restrictedTileRange.maxY, tileRange.maxY);
+        }
         return tileRange;
       }, this);
     } else if (extent) {
@@ -566,7 +573,9 @@ class TileGrid {
    */
   getFullTileRange(z) {
     if (!this.fullTileRanges_) {
-      return null;
+      return this.extent_
+        ? this.getTileRangeForExtentAndZ(this.extent_, z)
+        : null;
     } else {
       return this.fullTileRanges_[z];
     }

test/spec/ol/tilecoord.test.js

@@ -57,7 +57,7 @@ describe('ol.TileCoord', function () {
     it('restricts by extent when extent defines tile ranges', function () {
       const tileGrid = new TileGrid({
         extent: [10, 20, 30, 40],
-        sizes: [[3, -3]],
+        sizes: [[3, 3]],
         tileSize: 10,
         resolutions: [1],
       });

test/spec/ol/tilegrid/tilegrid.test.js

@@ -210,6 +210,26 @@ describe('ol.tilegrid.TileGrid', function () {
     });
   });
 
+  describe('create with sizes', function () {
+    let tileGrid;
+    beforeEach(function () {
+      tileGrid = new TileGrid({
+        origin: [10, 40],
+        sizes: [[3, 3]],
+        tileSize: 10,
+        resolutions: [1],
+      });
+    });
+
+    it('calculates full tile ranges from sizes', function () {
+      const fullTileRange = tileGrid.getFullTileRange(0);
+      expect(fullTileRange.minX).to.equal(0);
+      expect(fullTileRange.maxX).to.equal(2);
+      expect(fullTileRange.minY).to.equal(0);
+      expect(fullTileRange.maxY).to.equal(2);
+    });
+  });
+
   describe('create with extent and sizes', function () {
     let tileGrid;
     beforeEach(function () {
@@ -225,12 +245,31 @@ describe('ol.tilegrid.TileGrid', function () {
       expect(tileGrid.getExtent()).to.eql([10, 20, 30, 40]);
     });
 
-    it('calculates full tile ranges from sizes', function () {
+    it('calculates full tile ranges from sizes, further limited by extent', function () {
       const fullTileRange = tileGrid.getFullTileRange(0);
       expect(fullTileRange.minX).to.equal(0);
-      expect(fullTileRange.maxX).to.equal(2);
+      expect(fullTileRange.maxX).to.equal(1);
       expect(fullTileRange.minY).to.equal(0);
-      expect(fullTileRange.maxY).to.equal(2);
+      expect(fullTileRange.maxY).to.equal(1);
+    });
+  });
+
+  describe('create with extent', function () {
+    let tileGrid;
+    beforeEach(function () {
+      tileGrid = new TileGrid({
+        extent: [10, 20, 30, 40],
+        tileSize: 10,
+        resolutions: [1],
+      });
+    });
+
+    it('calculates full tile ranges from extent', function () {
+      const fullTileRange = tileGrid.getFullTileRange(0);
+      expect(fullTileRange.minX).to.equal(0);
+      expect(fullTileRange.maxX).to.equal(1);
+      expect(fullTileRange.minY).to.equal(0);
+      expect(fullTileRange.maxY).to.equal(1);
     });
   });
 
@@ -283,6 +322,66 @@ describe('ol.tilegrid.TileGrid', function () {
     });
   });
 
+  describe('create with complex configuration', function () {
+    let tileGrid;
+    beforeEach(function () {
+      tileGrid = new TileGrid({
+        extent: [
+          343870.8496458133,
+          5809157.009546259,
+          1905238.0275122682,
+          7515502.7821859205,
+        ],
+        sizes: [
+          [1, 2],
+          [2, 4],
+          [2, 4],
+          [11, 16],
+        ],
+        resolutions: [
+          4174.778550445067,
+          2087.3892752225333,
+          1043.6946376112667,
+          521.8473188056333,
+        ],
+        tileSizes: [
+          [374, 204],
+          [374, 204],
+          [748, 409],
+          [272, 204],
+        ],
+      });
+    });
+
+    it('creates correct tile ranges', function () {
+      const tileRanges = [
+        {minX: 0, maxX: 0, minY: 0, maxY: 1},
+        {minX: 0, maxX: 1, minY: 0, maxY: 3},
+        {minX: 0, maxX: 1, minY: 0, maxY: 3},
+        {minX: 0, maxX: 10, minY: 0, maxY: 15},
+      ];
+      for (let z = 0; z <= 3; ++z) {
+        const zTileRange = tileGrid.getFullTileRange(z);
+        for (const property in tileRanges[z]) {
+          expect(zTileRange[property]).to.be(tileRanges[z][property]);
+        }
+      }
+    });
+
+    it('returns correct withinExtentAndZ results with containsXY', function () {
+      const outOfRangeTileCoords = [
+        [1, 2, 0],
+        [1, 2, 1],
+        [1, 2, 2],
+        [1, 2, 3],
+      ];
+      outOfRangeTileCoords.forEach(function (tileCoord) {
+        const tileRange = tileGrid.getFullTileRange(tileCoord[0]);
+        expect(tileRange.containsXY(tileCoord[1], tileCoord[2])).to.be(false);
+      });
+    });
+  });
+
   describe('createForExtent', function () {
     it('allows creation of tile grid from extent', function () {
       const extent = createOrUpdate(-100, -100, 100, 100);