Merge pull request #7482 from ahocevar/vectortile-unrotate

Reset rotation after rendering

src/ol/renderer/canvas/vectortilelayer.js

@@ -381,9 +381,12 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
   var pixelRatio = frameState.pixelRatio;
   var rotation = frameState.viewState.rotation;
   var size = frameState.size;
-  var offsetX = Math.round(pixelRatio * size[0] / 2);
+  var offsetX, offsetY;
-  var offsetY = Math.round(pixelRatio * size[1] / 2);
+  if (rotation) {
-  ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
+    offsetX = Math.round(pixelRatio * size[0] / 2);
+    offsetY = Math.round(pixelRatio * size[1] / 2);
+    ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
+  }
   var tiles = this.renderedTiles;
   var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
   var clips = [];
@@ -442,6 +445,10 @@ ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, fra
     ol.render.canvas.ReplayGroup.replayDeclutter(declutterReplays, context, rotation);
     this.declutterTree_.clear();
   }
+  if (rotation) {
+    ol.render.canvas.rotateAtOffset(context, rotation,
+        /** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
+  }
   ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
 };
 

test/rendering/ol/layer/vectortile.test.js

@@ -1,10 +1,12 @@
-
+goog.require('ol.Feature');
-
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.MVT');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Vector');
 goog.require('ol.layer.VectorTile');
 goog.require('ol.obj');
+goog.require('ol.source.Vector');
 goog.require('ol.source.VectorTile');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
@@ -92,6 +94,32 @@ describe('ol.rendering.layer.VectorTile', function() {
       });
     });
 
+    it('renders rotated view correctly with vector layer on top', function(done) {
+      createMap('canvas');
+      var vectorSource = new ol.source.Vector({
+        features: [
+          new ol.Feature(new ol.geom.Point([1825727.7316762917, 6143091.089223046]))
+        ]
+      });
+      map.addLayer(new ol.layer.Vector({
+        zIndex: 1,
+        source: vectorSource,
+        style: new ol.style.Style({
+          image: new ol.style.Circle({
+            radius: 10,
+            fill: new ol.style.Fill({
+              color: 'red'
+            })
+          })
+        })
+      }));
+      map.getView().setRotation(Math.PI / 4);
+      waitForTiles(source, {}, function() {
+        expectResemble(map, 'rendering/ol/layer/expected/vectortile-vector-rotated.png',
+            14, done);
+      });
+    });
+
     it('renders correctly with the canvas renderer (HiDPI)', function(done) {
       createMap('canvas', 2);
       waitForTiles(source, {}, function() {