From 006f8d49ec3591483546a2bc8fb0c89caca9d718 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 16 Nov 2017 16:09:49 +0100 Subject: [PATCH] Reset rotation after rendering --- src/ol/renderer/canvas/vectortilelayer.js | 13 +++++-- .../expected/vectortile-vector-rotated.png | Bin 0 -> 6718 bytes test/rendering/ol/layer/vectortile.test.js | 32 ++++++++++++++++-- 3 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 test/rendering/ol/layer/expected/vectortile-vector-rotated.png diff --git a/src/ol/renderer/canvas/vectortilelayer.js b/src/ol/renderer/canvas/vectortilelayer.js index 9e724e2c86..43958b25a3 100644 --- a/src/ol/renderer/canvas/vectortilelayer.js +++ b/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 offsetY = Math.round(pixelRatio * size[1] / 2); - ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY); + var offsetX, offsetY; + if (rotation) { + 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); }; diff --git a/test/rendering/ol/layer/expected/vectortile-vector-rotated.png b/test/rendering/ol/layer/expected/vectortile-vector-rotated.png new file mode 100644 index 0000000000000000000000000000000000000000..e15480331e042322e36867efee6ad4a43962c071 GIT binary patch literal 6718 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 U0xp$GdH?_b07*qoM6N<$g8O}oHvj+t literal 0 HcmV?d00001 diff --git a/test/rendering/ol/layer/vectortile.test.js b/test/rendering/ol/layer/vectortile.test.js index 12291b135e..c0a7a1f9a6 100644 --- a/test/rendering/ol/layer/vectortile.test.js +++ b/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() {