Merge pull request #13832 from mike-000/vector-tile-grids

Base vector tile render tile grid on the source grid

src/ol/renderer/canvas/VectorTileLayer.js

@@ -496,7 +496,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         let hitDetectionImageData = tile.hitDetectionImageData[layerUid];
         if (!hitDetectionImageData && !this.animatingOrInteracting_) {
           const tileSize = toSize(
-            tileGrid.getTileSize(tileGrid.getZForResolution(resolution))
+            tileGrid.getTileSize(
+              tileGrid.getZForResolution(resolution, source.zDirection)
+            )
           );
           const rotation = this.renderedRotation_;
           const transforms = [

src/ol/source/VectorTile.js

@@ -5,19 +5,17 @@
 import EventType from '../events/EventType.js';
 import Tile from '../VectorTile.js';
 import TileCache from '../TileCache.js';
+import TileGrid from '../tilegrid/TileGrid.js';
 import TileState from '../TileState.js';
 import UrlTile from './UrlTile.js';
 import VectorRenderTile from '../VectorRenderTile.js';
+import {DEFAULT_MAX_ZOOM} from '../tilegrid/common.js';
 import {
   buffer as bufferExtent,
   getIntersection,
   intersects,
 } from '../extent.js';
-import {
+import {createXYZ, extentFromProjection} from '../tilegrid.js';
-  createForProjection,
-  createXYZ,
-  extentFromProjection,
-} from '../tilegrid.js';
 import {fromKey, getCacheKeyForTileKey, getKeyZXY} from '../tilecoord.js';
 import {isEmpty} from '../obj.js';
 import {loadFeaturesXhr} from '../featureloader.js';
@@ -274,7 +272,10 @@ class VectorTile extends UrlTile {
       if (sourceExtent) {
         getIntersection(extent, sourceExtent, extent);
       }
-      const sourceZ = sourceTileGrid.getZForResolution(resolution, 1);
+      const sourceZ = sourceTileGrid.getZForResolution(
+        resolution,
+        this.zDirection
+      );
 
       sourceTileGrid.forEachTileCoord(extent, sourceZ, (sourceTileCoord) => {
         const tileUrl = this.tileUrlFunction(
@@ -428,13 +429,25 @@ class VectorTile extends UrlTile {
       // A tile grid that matches the tile size of the source tile grid is more
       // likely to have 1:1 relationships between source tiles and rendered tiles.
       const sourceTileGrid = this.tileGrid;
-      tileGrid = createForProjection(
+      const resolutions = sourceTileGrid.getResolutions().slice();
-        projection,
+      const origins = resolutions.map(function (resolution, z) {
-        undefined,
+        return sourceTileGrid.getOrigin(z);
-        sourceTileGrid
+      });
-          ? sourceTileGrid.getTileSize(sourceTileGrid.getMinZoom())
+      const tileSizes = resolutions.map(function (resolution, z) {
-          : undefined
+        return sourceTileGrid.getTileSize(z);
-      );
+      });
+      const length = DEFAULT_MAX_ZOOM + 1;
+      for (let z = resolutions.length; z < length; ++z) {
+        resolutions.push(resolutions[z - 1] / 2);
+        origins.push(origins[z - 1]);
+        tileSizes.push(tileSizes[z - 1]);
+      }
+      tileGrid = new TileGrid({
+        extent: sourceTileGrid.getExtent(),
+        origins: origins,
+        resolutions: resolutions,
+        tileSizes: tileSizes,
+      });
       this.tileGrids_[code] = tileGrid;
     }
     return tileGrid;

src/ol/tilegrid/TileGrid.js

@@ -51,7 +51,7 @@ const DECIMALS = 5;
  * negative because OpenLayers tile coordinates use the top left as the origin.
  * @property {number|import("../size.js").Size} [tileSize] Tile size.
  * Default is `[256, 256]`.
- * @property {Array<import("../size.js").Size>} [tileSizes] Tile sizes. If given, the array length
+ * @property {Array<number|import("../size.js").Size>} [tileSizes] Tile sizes. If given, the array length
  * should match the length of the `resolutions` array, i.e. each resolution can have a different
  * tile size.
  */

src/ol/tilegrid/WMTS.js

@@ -34,7 +34,7 @@ import {get as getProjection} from '../proj.js';
  * an extent is used as `origin` or `origins`, then the `y` value must be
  * negative because OpenLayers tile coordinates use the top left as the origin.
  * @property {number|import("../size.js").Size} [tileSize] Tile size.
- * @property {Array<import("../size.js").Size>} [tileSizes] Tile sizes. The length of
+ * @property {Array<number|import("../size.js").Size>} [tileSizes] Tile sizes. The length of
  * this array needs to match the length of the `resolutions` array.
  */
 
@@ -108,7 +108,7 @@ export function createFromCapabilitiesMatrixSet(
   const matrixIds = [];
   /** @type {!Array<import("../coordinate.js").Coordinate>} */
   const origins = [];
-  /** @type {!Array<import("../size.js").Size>} */
+  /** @type {!Array<number|import("../size.js").Size>} */
   const tileSizes = [];
   /** @type {!Array<import("../size.js").Size>} */
   const sizes = [];

test/browser/spec/ol/source/vectortile.test.js

@@ -228,17 +228,13 @@ describe('ol.source.VectorTile', function () {
   });
 
   describe('different source and render tile grids', function () {
-    let source, map, loaded, requested, target;
+    let source, map, loaded, target;
 
     beforeEach(function () {
       loaded = [];
-      requested = 0;
 
       function tileUrlFunction(tileCoord) {
-        ++requested;
+        return tileCoord.join('/');
-        if (tileCoord.toString() == '5,13,-29') {
-          return tileCoord.join('/');
-        }
       }
 
       function tileLoadFunction(tile, src) {
@@ -286,11 +282,10 @@ describe('ol.source.VectorTile', function () {
       document.body.removeChild(target);
     });
 
-    it('loads available tiles', function (done) {
+    it('loads only required tiles', function (done) {
       map.renderSync();
       setTimeout(function () {
-        expect(requested).to.be.greaterThan(1);
+        expect(loaded).to.eql(['5/13/-28']);
-        expect(loaded).to.eql(['5/13/-29']);
         done();
       }, 0);
     });

test/browser/spec/ol/vectorrendertile.test.js

@@ -63,6 +63,7 @@ describe('ol.VectorRenderTile', function () {
   });
 
   it("only loads tiles within the source tileGrid's extent", function (done) {
+    let tile;
     const url = 'spec/ol/data/point.json';
     const source = new VectorTileSource({
       projection: 'EPSG:4326',
@@ -77,8 +78,12 @@ describe('ol.VectorRenderTile', function () {
       },
       url: url,
     });
-    const tile = source.getTile(0, 0, 0, 1, source.getProjection());
 
+    tile = source.getTile(0, 0, 0, 1, source.getProjection());
+    expect(tile.getState()).to.be(TileState.EMPTY);
+
+    tile = source.getTile(0, 16, 9, 1, source.getProjection());
+    expect(tile.getState()).to.be(TileState.IDLE);
     tile.load();
     const key = listen(tile, EventType.CHANGE, function () {
       if (tile.getState() === TileState.LOADED) {