Use same tile size in rendered and source tile grid

src/ol/source/vectortile.js

@@ -8,6 +8,7 @@ goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol.proj');
 goog.require('ol.size');
+goog.require('ol.tilegrid');
 goog.require('ol.source.UrlTile');
 
 
@@ -37,6 +38,7 @@ ol.source.VectorTile = function(options) {
     opaque: false,
     projection: options.projection,
     state: options.state,
+    tileGrid: options.tileGrid,
     tileLoadFunction: options.tileLoadFunction ?
         options.tileLoadFunction : ol.VectorImageTile.defaultLoadFunction,
     tileUrlFunction: options.tileUrlFunction,
@@ -58,12 +60,6 @@ ol.source.VectorTile = function(options) {
    */
   this.sourceTiles_ = {};
 
-  /**
-   * @type {ol.tilegrid.TileGrid}
-   */
-  this.sourceTileGrid_ = options.tileGrid ||
-      this.getTileGridForProjection(ol.proj.get(options.projection || 'EPSG:3857'));
-
   /**
    * @private
    * @type {boolean}
@@ -77,6 +73,16 @@ ol.source.VectorTile = function(options) {
    */
   this.tileClass = options.tileClass ? options.tileClass : ol.VectorTile;
 
+  /**
+   * @private
+   * @type {Object.<string,ol.tilegrid.TileGrid>}
+   */
+  this.tileGrids_ = {};
+
+  if (!this.tileGrid) {
+    this.tileGrid = this.getTileGridForProjection(ol.proj.get(options.projection || 'EPSG:3857'));
+  }
+
 };
 ol.inherits(ol.source.VectorTile, ol.source.UrlTile);
 
@@ -107,7 +113,7 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
         tileUrl !== undefined ? ol.TileState.IDLE : ol.TileState.EMPTY,
         tileUrl !== undefined ? tileUrl : '',
         this.format_, this.tileLoadFunction, urlTileCoord, this.tileUrlFunction,
-        this.sourceTileGrid_, this.getTileGridForProjection(projection),
+        this.tileGrid, this.getTileGridForProjection(projection),
         this.sourceTiles_, pixelRatio, projection, this.tileClass);
     ol.events.listen(tile, ol.events.EventType.CHANGE,
         this.handleTileChange, this);
@@ -121,8 +127,17 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
 /**
  * @inheritDoc
  */
-ol.source.VectorTile.prototype.getTileGrid = function() {
+ol.source.VectorTile.prototype.getTileGridForProjection = function(projection) {
-  return this.sourceTileGrid_;
+  var code = projection.getCode();
+  var tileGrid = this.tileGrids_[code];
+  if (!tileGrid) {
+    // 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.
+    var sourceTileGrid = this.tileGrid;
+    tileGrid = this.tileGrids_[code] = ol.tilegrid.createForProjection(projection, undefined,
+        sourceTileGrid ? sourceTileGrid.getTileSize(sourceTileGrid.getMinZoom()) : undefined);
+  }
+  return tileGrid;
 };
 
 

src/ol/tilegrid.js

@@ -126,7 +126,8 @@ ol.tilegrid.resolutionsFromExtent = function(extent, opt_maxZoom, opt_tileSize)
  * @param {ol.ProjectionLike} projection Projection.
  * @param {number=} opt_maxZoom Maximum zoom level (default is
  *     ol.DEFAULT_MAX_ZOOM).
- * @param {ol.Size=} opt_tileSize Tile size (default uses ol.DEFAULT_TILE_SIZE).
+ * @param {number|ol.Size=} opt_tileSize Tile size (default uses
+ *     ol.DEFAULT_TILE_SIZE).
  * @param {ol.extent.Corner=} opt_corner Extent corner (default is
  *     ol.extent.Corner.BOTTOM_LEFT).
  * @return {!ol.tilegrid.TileGrid} TileGrid instance.

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

@@ -12,7 +12,7 @@ describe('ol.source.VectorTile', function() {
   var format = new ol.format.MVT();
   var source = new ol.source.VectorTile({
     format: format,
-    tileGrid: ol.tilegrid.createXYZ(),
+    tileGrid: ol.tilegrid.createXYZ({tileSize: 512}),
     url: '{z}/{x}/{y}.pbf'
   });
   var tile;
@@ -40,4 +40,11 @@ describe('ol.source.VectorTile', function() {
     });
   });
 
+  describe('#getTileGridForProjection', function() {
+    it('creates a tile grid with the source tile grid\'s tile size', function() {
+      var tileGrid = source.getTileGridForProjection(ol.proj.get('EPSG:3857'));
+      expect(tileGrid.getTileSize(0)).to.be(512);
+    });
+  });
+
 });