Fix vector tile rotation on HiDPI devices

src/ol/renderer/canvas/vectortilelayer.js

@@ -117,7 +117,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
   var size = frameState.size;
   var pixelScale = pixelRatio / resolution;
   var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
-  var tilePixelRatio = source.getTilePixelRatio(pixelRatio);
+  var tilePixelRatio = source.getTilePixelRatio();
 
   var transform = this.getTransform(frameState, 0);
 
@@ -207,7 +207,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
   var resolution = tileGrid.getResolution(tileCoord[0]);
   var extent, reproject, tileResolution;
   if (pixelSpace) {
-    var tilePixelRatio = tileResolution = source.getTilePixelRatio(pixelRatio);
+    var tilePixelRatio = tileResolution = source.getTilePixelRatio();
     var tileSize = ol.size.toSize(tileGrid.getTileSize(tileCoord[0]));
     extent = [0, 0, tileSize[0] * tilePixelRatio, tileSize[1] * tilePixelRatio];
   } else {
@@ -276,7 +276,6 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
  * @inheritDoc
  */
 ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = function(coordinate, frameState, callback, thisArg) {
-  var pixelRatio = frameState.pixelRatio;
   var resolution = frameState.viewState.resolution;
   var rotation = frameState.viewState.rotation;
   var layer = this.getLayer();
@@ -299,7 +298,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
     }
     if (tile.getProjection().getUnits() === ol.proj.Units.TILE_PIXELS) {
       origin = ol.extent.getTopLeft(tileExtent);
-      tilePixelRatio = source.getTilePixelRatio(pixelRatio);
+      tilePixelRatio = source.getTilePixelRatio();
       tileResolution = tileGrid.getResolution(tileCoord[0]) / tilePixelRatio;
       tileSpaceCoordinate = [
         (coordinate[0] - origin[0]) / tileResolution,
@@ -421,7 +420,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
     tileContext.translate(width / 2, height / 2);
     var pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
     var pixelScale = pixelRatio / resolution;
-    var tilePixelRatio = source.getTilePixelRatio(pixelRatio);
+    var tilePixelRatio = source.getTilePixelRatio();
     var tilePixelResolution = tileResolution / tilePixelRatio;
     var tileExtent = tileGrid.getTileCoordExtent(
         tile.getTileCoord(), this.tmpExtent);

src/ol/source/tile.js

@@ -242,10 +242,14 @@ ol.source.Tile.prototype.getTileCacheForProjection = function(projection) {
 
 
 /**
- * @param {number} pixelRatio Pixel ratio.
+ * 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.
  * @return {number} Tile pixel ratio.
  */
-ol.source.Tile.prototype.getTilePixelRatio = function(pixelRatio) {
+ol.source.Tile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
   return this.tilePixelRatio_;
 };
 

src/ol/source/tilearcgisrest.js

@@ -121,7 +121,7 @@ ol.source.TileArcGISRest.prototype.getRequestUrl_ = function(tileCoord, tileSize
  * @inheritDoc
  */
 ol.source.TileArcGISRest.prototype.getTilePixelRatio = function(pixelRatio) {
-  return pixelRatio;
+  return /** @type {number} */ (pixelRatio);
 };
 
 

src/ol/source/tilewms.js

@@ -271,7 +271,8 @@ ol.source.TileWMS.prototype.getRequestUrl_ = function(tileCoord, tileSize, tileE
  * @inheritDoc
  */
 ol.source.TileWMS.prototype.getTilePixelRatio = function(pixelRatio) {
-  return (!this.hidpi_ || this.serverType_ === undefined) ? 1 : pixelRatio;
+  return (!this.hidpi_ || this.serverType_ === undefined) ? 1 :
+      /** @type {number} */ (pixelRatio);
 };
 
 

src/ol/source/vectortile.js

@@ -104,12 +104,22 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.source.VectorTile.prototype.getTilePixelRatio = function(opt_pixelRatio) {
+  return opt_pixelRatio == undefined ?
+      ol.source.UrlTile.prototype.getTilePixelRatio.call(this, opt_pixelRatio) :
+      opt_pixelRatio;
+};
+
+
 /**
  * @inheritDoc
  */
 ol.source.VectorTile.prototype.getTilePixelSize = function(z, pixelRatio, projection) {
   var tileSize = ol.size.toSize(this.tileGrid.getTileSize(z));
-  return [tileSize[0] * pixelRatio, tileSize[1] * pixelRatio];
+  return [Math.round(tileSize[0] * pixelRatio), Math.round(tileSize[1] * pixelRatio)];
 };
 
 

test_rendering/spec/ol/layer/vectortile.test.js

@@ -13,10 +13,11 @@ describe('ol.rendering.layer.VectorTile', function() {
 
   var target, map;
 
-  function createMap(renderer) {
+  function createMap(renderer, opt_pixelRatio) {
     target = createMapDiv(50, 50);
 
     map = new ol.Map({
+      pixelRatio: opt_pixelRatio,
       target: target,
       renderer: renderer,
       view: new ol.View({
@@ -79,6 +80,32 @@ describe('ol.rendering.layer.VectorTile', function() {
       });
     });
 
+    it('renders rotated view correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      map.getView().setRotation(Math.PI / 4);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/vectortile-canvas-rotated.png',
+            13.4, done);
+      });
+    });
+
+    it('renders correctly with the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/vectortile-canvas-hidpi.png',
+            11.3, done);
+      });
+    });
+
+    it('renders rotated view correctly with the canvas renderer (HiDPI)', function(done) {
+      map = createMap('canvas', 2);
+      map.getView().setRotation(Math.PI / 4);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'spec/ol/layer/expected/vectortile-canvas-rotated-hidpi.png',
+            14.8, done);
+      });
+    });
+
   });
 
 });