Base render tile grid on the source grid

Use source zDirection for both grids

src/ol/renderer/canvas/VectorTileLayer.js

@@ -510,7 +510,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 {
-  createForProjection,
-  createXYZ,
-  extentFromProjection,
-} from '../tilegrid.js';
+import {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(
-        projection,
-        undefined,
-        sourceTileGrid
-          ? sourceTileGrid.getTileSize(sourceTileGrid.getMinZoom())
-          : undefined
-      );
+      const resolutions = sourceTileGrid.getResolutions().slice();
+      const origins = resolutions.map(function (resolution, z) {
+        return sourceTileGrid.getOrigin(z);
+      });
+      const tileSizes = resolutions.map(function (resolution, z) {
+        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;

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

@@ -228,18 +228,14 @@ 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;
-        if (tileCoord.toString() == '5,13,-29') {
         return tileCoord.join('/');
       }
-      }
 
       function tileLoadFunction(tile, src) {
         tile.setLoader(function () {});
@@ -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/-29']);
+        expect(loaded).to.eql(['5/13/-28']);
         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) {