Merge pull request #7070 from ahocevar/mvt-tilepixelratio

Get tilePixelRatio from MVT tiles

changelog/upgrade-notes.md

@@ -2,6 +2,16 @@
 
 ### Next release
 
+#### `ol.source.VectorTile` no longer has a `tilePixelRatio` option
+
+The `tilePixelRatio` option was only used for tiles in projections with `tile-pixels` as units. For tiles read with `ol.format.MVT` and the default tile loader, or tiles with the default pixel size of 4096 pixels, no changes are necessary. For the very rare cases that do not fall under these categories, a custom `tileLoadFunction` now needs to be configured on the `ol.source.VectorTile`. In addition to calling `tile.setFeatures()` and `tile.setProjection()`, it also needs to contain code like the following:
+```js
+var extent = tile.getFormat() instanceof ol.format.MVT ?
+  tile.getLastExtent() :
+  [0, 0, tilePixelRatio * tileSize, tilePixelRatio * tileSize];
+tile.setExtent(extent);
+```
+
 #### `ol.animate` now takes the shortest arc for rotation animation
 
 Usually rotation animations should animate along the shortest arc. There are rare occasions where a spinning animation effect is desired. So if you previously had something like

examples/geojson-vt.js

@@ -78,7 +78,6 @@ fetch(url).then(function(response) {
   var vectorSource = new ol.source.VectorTile({
     format: new ol.format.GeoJSON(),
     tileGrid: ol.tilegrid.createXYZ(),
-    tilePixelRatio: 16,
     tileLoadFunction: function(tile) {
       var format = tile.getFormat();
       var tileCoord = tile.getTileCoord();

examples/mapbox-vector-tiles-advanced.js

@@ -44,7 +44,6 @@ var map = new ol.Map({
           resolutions: resolutions,
           tileSize: 512
         }),
-        tilePixelRatio: 8,
         tileUrlFunction: tileUrlFunction
       }),
       style: createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.js

@@ -24,7 +24,6 @@ var map = new ol.Map({
           'OpenStreetMap contributors</a>',
         format: new ol.format.MVT(),
         tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}),
-        tilePixelRatio: 8,
         url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
             '{z}/{x}/{y}.vector.pbf?access_token=' + key
       }),

externs/olx.js

@@ -4898,7 +4898,6 @@ olx.source.TileImageOptions.prototype.wrapX;
  *                 ol.TileLoadFunctionType)|undefined),
  *            tileGrid: (ol.tilegrid.TileGrid|undefined),
  *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *            tilePixelRatio: (number|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
@@ -4994,6 +4993,8 @@ olx.source.VectorTileOptions.prototype.tileGrid;
  *     var format = tile.getFormat();
  *     tile.setFeatures(format.readFeatures(data));
  *     tile.setProjection(format.readProjection(data));
+ *     // uncomment the line below for ol.format.MVT only
+ *     //tile.setExtent(format.getLastExtent());
  *   };
  * });
  * ```
@@ -5003,17 +5004,6 @@ olx.source.VectorTileOptions.prototype.tileGrid;
 olx.source.VectorTileOptions.prototype.tileLoadFunction;
 
 
-/**
- * The pixel ratio used by the tile service. For example, if the tile
- * service advertizes 256px by 256px tiles but actually sends 512px
- * by 512px tiles (for retina/hidpi devices) then `tilePixelRatio`
- * should be set to `2`. Default is `1`.
- * @type {number|undefined}
- * @api
- */
-olx.source.VectorTileOptions.prototype.tilePixelRatio;
-
-
 /**
  * Optional function to get tile URL given a tile coordinate and the projection.
  * @type {ol.TileUrlFunctionType|undefined}

src/ol/featureloader.js

@@ -8,7 +8,7 @@ goog.require('ol.xml');
 /**
  * @param {string|ol.FeatureUrlFunction} url Feature URL service.
  * @param {ol.format.Feature} format Feature format.
- * @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
+ * @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection, ol.Extent)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
  *     Function called with the loaded features and optionally with the data
  *     projection. Called with the vector tile or source as `this`.
  * @param {function(this:ol.VectorTile)|function(this:ol.source.Vector)} failure
@@ -56,7 +56,7 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success, failure) {
           if (source) {
             success.call(this, format.readFeatures(source,
                 {featureProjection: projection}),
-            format.readProjection(source));
+            format.readProjection(source), format.getLastExtent());
           } else {
             failure.call(this);
           }

src/ol/format/feature.js

@@ -72,6 +72,15 @@ ol.format.Feature.prototype.adaptOptions = function(options) {
 };
 
 
+/**
+ * Get the extent from the source of the last {@link readFeatures} call.
+ * @return {ol.Extent} Tile extent.
+ */
+ol.format.Feature.prototype.getLastExtent = function() {
+  return null;
+};
+
+
 /**
  * @abstract
  * @return {ol.format.FormatType} Format.

src/ol/format/mvt.js

@@ -69,10 +69,25 @@ ol.format.MVT = function(opt_options) {
    */
   this.layers_ = options.layers ? options.layers : null;
 
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.extent_ = null;
+
 };
 ol.inherits(ol.format.MVT, ol.format.Feature);
 
 
+/**
+ * @inheritDoc
+ * @api
+ */
+ol.format.MVT.prototype.getLastExtent = function() {
+  return this.extent_;
+};
+
+
 /**
  * @inheritDoc
  */
@@ -161,14 +176,17 @@ ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
     }
     layer = tile.layers[name];
 
+    var rawFeature;
     for (var i = 0, ii = layer.length; i < ii; ++i) {
+      rawFeature = layer.feature(i);
       if (featureClass === ol.render.Feature) {
-        feature = this.readRenderFeature_(layer.feature(i), name);
+        feature = this.readRenderFeature_(rawFeature, name);
       } else {
-        feature = this.readFeature_(layer.feature(i), name, opt_options);
+        feature = this.readFeature_(rawFeature, name, opt_options);
       }
       features.push(feature);
     }
+    this.extent_ = layer ? [0, 0, layer.extent, layer.extent] : null;
   }
 
   return features;

src/ol/renderer/canvas/vectortilelayer.js

@@ -13,6 +13,7 @@ goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.render.replay');
 goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.renderer.vector');
+goog.require('ol.size');
 goog.require('ol.transform');
 
 
@@ -119,23 +120,24 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
     return;
   }
 
+  var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
+  var sourceTileGrid = source.getTileGrid();
+  var tileGrid = source.getTileGridForProjection(projection);
+  var resolution = tileGrid.getResolution(tile.tileCoord[0]);
+  var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+
   for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
     var sourceTile = tile.getTile(tile.tileKeys[t]);
     replayState.dirty = false;
 
-    var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
-    var sourceTileGrid = source.getTileGrid();
     var sourceTileCoord = sourceTile.tileCoord;
     var tileProjection = sourceTile.getProjection();
-    var tileGrid = source.getTileGridForProjection(projection);
-    var resolution = tileGrid.getResolution(tile.tileCoord[0]);
     var sourceTileResolution = sourceTileGrid.getResolution(sourceTile.tileCoord[0]);
-    var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
     var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
     var sharedExtent = ol.extent.getIntersection(tileExtent, sourceTileExtent);
     var extent, reproject, tileResolution;
     if (tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS) {
-      var tilePixelRatio = tileResolution = source.getTilePixelRatio();
+      var tilePixelRatio = tileResolution = this.getTilePixelRatio_(source, sourceTile);
       var transform = ol.transform.compose(this.tmpTransform_,
           0, 0,
           1 / sourceTileResolution * tilePixelRatio, -1 / sourceTileResolution * tilePixelRatio,
@@ -251,7 +253,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
         var sourceTileCoord = sourceTile.tileCoord;
         var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord, this.tmpExtent);
         origin = ol.extent.getTopLeft(sourceTileExtent);
-        tilePixelRatio = source.getTilePixelRatio();
+        tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
         tileResolution = sourceTileGrid.getResolution(sourceTileCoord[0]) / tilePixelRatio;
         tileSpaceCoordinate = [
           (coordinate[0] - origin[0]) / tileResolution,
@@ -294,7 +296,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile
     var tileGrid = source.getTileGrid();
     var tileCoord = tile.tileCoord;
     var tileResolution =
-        tileGrid.getResolution(tileCoord[0]) / source.getTilePixelRatio();
+        tileGrid.getResolution(tileCoord[0]) / this.getTilePixelRatio_(source, tile);
     var viewState = frameState.viewState;
     var pixelRatio = frameState.pixelRatio;
     var renderResolution = viewState.resolution / pixelRatio;
@@ -316,6 +318,18 @@ ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile
 };
 
 
+/**
+ * @private
+ * @param {ol.source.VectorTile} source Source.
+ * @param {ol.VectorTile} tile Tile.
+ * @return {number} The tile's pixel ratio.
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.getTilePixelRatio_ = function(source, tile) {
+  return ol.extent.getWidth(tile.getExtent()) /
+        ol.size.toSize(source.getTileGrid().getTileSize(tile.tileCoord[0]))[0];
+};
+
+
 /**
  * Handle changes in image style state.
  * @param {ol.events.Event} event Image style change event.
@@ -331,7 +345,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.handleStyleImageChange_ = function(
  */
 ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, frameState, layerState) {
   var layer = this.getLayer();
-  var source = layer.getSource();
+  var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
   var renderMode = layer.getRenderMode();
   var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[renderMode];
   var pixelRatio = frameState.pixelRatio;
@@ -340,7 +354,6 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
   var offsetX = Math.round(pixelRatio * size[0] / 2);
   var offsetY = Math.round(pixelRatio * size[1] / 2);
   var tiles = this.renderedTiles;
-  var tilePixelRatio = layer.getSource().getTilePixelRatio();
   var sourceTileGrid = source.getTileGrid();
   var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
   var clips = [];
@@ -355,6 +368,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
         tileGrid.getTileCoordExtent(tile.wrappedTileCoord)[0];
     for (var t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
       var sourceTile = tile.getTile(tile.tileKeys[t]);
+      var tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
       var replayGroup = sourceTile.getReplayGroup(layer, tileCoord.toString());
       if (renderMode != ol.layer.VectorTileRenderType.VECTOR && !replayGroup.hasReplays(replays)) {
         continue;
@@ -441,11 +455,10 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     var tileCoord = tile.wrappedTileCoord;
     var z = tileCoord[0];
     var pixelRatio = frameState.pixelRatio;
-    var source = layer.getSource();
+    var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
     var sourceTileGrid = source.getTileGrid();
     var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
     var resolution = tileGrid.getResolution(z);
-    var tilePixelRatio = source.getTilePixelRatio();
     var context = tile.getContext(layer);
     var size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
     context.canvas.width = size[0];
@@ -453,6 +466,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     var tileExtent = tileGrid.getTileCoordExtent(tileCoord);
     for (var i = 0, ii = tile.tileKeys.length; i < ii; ++i) {
       var sourceTile = tile.getTile(tile.tileKeys[i]);
+      var tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
       var sourceTileCoord = sourceTile.tileCoord;
       var pixelScale = pixelRatio / resolution;
       var transform = ol.transform.reset(this.tmpTransform_);

src/ol/source/bingmaps.js

@@ -141,7 +141,7 @@ ol.source.BingMaps.prototype.handleImageryMetadataResponse = function(response)
     extent: extent,
     minZoom: resource.zoomMin,
     maxZoom: maxZoom,
-    tileSize: tileSize / this.getTilePixelRatio()
+    tileSize: tileSize / (this.hidpi_ ? 2 : 1)
   });
   this.tileGrid = tileGrid;
 

src/ol/source/tile.js

@@ -244,12 +244,11 @@ ol.source.Tile.prototype.getTileCacheForProjection = function(projection) {
 /**
  * Get the tile pixel ratio for this source. Subclasses may override this
  * method, which is meant to return a supported pixel ratio that matches the
- * provided `opt_pixelRatio` as close as possible. When no `opt_pixelRatio` is
- * provided, it is meant to return `this.tilePixelRatio_`.
- * @param {number=} opt_pixelRatio Pixel ratio.
+ * provided `pixelRatio` as close as possible.
+ * @param {number} pixelRatio Pixel ratio.
  * @return {number} Tile pixel ratio.
  */
-ol.source.Tile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
+ol.source.Tile.prototype.getTilePixelRatio = function(pixelRatio) {
   return this.tilePixelRatio_;
 };
 

src/ol/source/vectortile.js

@@ -40,7 +40,6 @@ ol.source.VectorTile = function(options) {
     tileLoadFunction: options.tileLoadFunction ?
       options.tileLoadFunction : ol.VectorImageTile.defaultLoadFunction,
     tileUrlFunction: options.tileUrlFunction,
-    tilePixelRatio: options.tilePixelRatio,
     url: options.url,
     urls: options.urls,
     wrapX: options.wrapX === undefined ? true : options.wrapX
@@ -141,10 +140,8 @@ ol.source.VectorTile.prototype.getTileGridForProjection = function(projection) {
 /**
  * @inheritDoc
  */
-ol.source.VectorTile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
-  return opt_pixelRatio == undefined ?
-    ol.source.UrlTile.prototype.getTilePixelRatio.call(this, opt_pixelRatio) :
-    opt_pixelRatio;
+ol.source.VectorTile.prototype.getTilePixelRatio = function(pixelRatio) {
+  return pixelRatio;
 };
 
 

src/ol/vectorimagetile.js

@@ -276,7 +276,7 @@ ol.VectorImageTile.prototype.finishLoading_ = function() {
  */
 ol.VectorImageTile.defaultLoadFunction = function(tile, url) {
   var loader = ol.featureloader.loadFeaturesXhr(
-      url, tile.getFormat(), tile.onLoad_.bind(tile), tile.onError_.bind(tile));
+      url, tile.getFormat(), tile.onLoad.bind(tile), tile.onError.bind(tile));
 
   tile.setLoader(loader);
 };

src/ol/vectortile.js

@@ -23,6 +23,12 @@ ol.VectorTile = function(tileCoord, state, src, format, tileLoadFunction) {
    */
   this.consumers = 0;
 
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.extent_ = null;
+
   /**
    * @private
    * @type {ol.format.Feature}
@@ -82,6 +88,15 @@ ol.VectorTile.prototype.disposeInternal = function() {
 };
 
 
+/**
+ * Gets the extent of the vector tile.
+ * @return {ol.Extent} The extent.
+ */
+ol.VectorTile.prototype.getExtent = function() {
+  return this.extent_ || ol.VectorTile.DEFAULT_EXTENT;
+};
+
+
 /**
  * Get the feature format assigned for reading this tile's features.
  * @return {ol.format.Feature} Feature format.
@@ -147,21 +162,38 @@ ol.VectorTile.prototype.load = function() {
  * Handler for successful tile load.
  * @param {Array.<ol.Feature>} features The loaded features.
  * @param {ol.proj.Projection} dataProjection Data projection.
+ * @param {ol.Extent} extent Extent.
  */
-ol.VectorTile.prototype.onLoad_ = function(features, dataProjection) {
+ol.VectorTile.prototype.onLoad = function(features, dataProjection, extent) {
   this.setProjection(dataProjection);
   this.setFeatures(features);
+  this.setExtent(extent);
 };
 
 
 /**
  * Handler for tile load errors.
  */
-ol.VectorTile.prototype.onError_ = function() {
+ol.VectorTile.prototype.onError = function() {
   this.setState(ol.TileState.ERROR);
 };
 
 
+/**
+ * Sets the extent of the vector tile. For tiles in projections with
+ * `tile-pixels` as units, this should be set to
+ * `[0, 0, tilePixelSize, tilePixelSize]` by the source's `tileLoadFunction`.
+ * `tilePixelSize` is calculated by multiplying the tile size with the tile
+ * pixel ratio. When using `ol.format.MVT`, the format's `getLastExtent()`
+ * method returns the correct extent. The default is `[0, 0, 4096, 4096]`.
+ * @param {ol.Extent} extent The extent.
+ * @api
+ */
+ol.VectorTile.prototype.setExtent = function(extent) {
+  this.extent_ = extent;
+};
+
+
 /**
  * @param {Array.<ol.Feature>} features Features.
  * @api
@@ -200,3 +232,10 @@ ol.VectorTile.prototype.setReplayGroup = function(layer, key, replayGroup) {
 ol.VectorTile.prototype.setLoader = function(loader) {
   this.loader_ = loader;
 };
+
+
+/**
+ * @const
+ * @type {ol.Extent}
+ */
+ol.VectorTile.DEFAULT_EXTENT = [0, 0, 4096, 4096];

test/spec/ol/format/mvt.test.js

@@ -88,6 +88,13 @@ where('ArrayBuffer.isView').describe('ol.format.MVT', function() {
       expect(features[0].getId()).to.be(2);
     });
 
+    it('sets the extent of the last readFeatures call', function() {
+      var format = new ol.format.MVT();
+      format.readFeatures(data);
+      var extent = format.getLastExtent();
+      expect(extent.getWidth()).to.be(4096);
+    });
+
   });
 
 });

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -186,6 +186,14 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       spy2.restore();
     });
 
+    it('uses the extent of the source tile', function() {
+      var renderer = map.getRenderer().getLayerRenderer(layer);
+      var tile = new ol.VectorTile([0, 0, 0], 2);
+      tile.setExtent([0, 0, 4096, 4096]);
+      var tilePixelRatio = renderer.getTilePixelRatio_(source, tile);
+      expect(tilePixelRatio).to.be(16);
+    });
+
   });
 
   describe('#prepareFrame', function() {