diff --git a/rendering/cases/layer-tile-2layers-extentclip/main.js b/rendering/cases/layer-tile-2layers-extentclip/main.js index 70d81c4d08..b4c4fe3260 100644 --- a/rendering/cases/layer-tile-2layers-extentclip/main.js +++ b/rendering/cases/layer-tile-2layers-extentclip/main.js @@ -1,19 +1,12 @@ import Map from '../../../src/ol/CompositeMap.js'; import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from "../../../src/ol/proj"; -import XYZ from "../../../src/ol/source/XYZ"; -import {getSize} from "../../../src/ol/extent"; +import {fromLonLat} from '../../../src/ol/proj'; +import XYZ from '../../../src/ol/source/XYZ'; +import {getSize} from '../../../src/ol/extent'; const center = fromLonLat([8.6, 50.1]); -function centerExtent() { - const c = map.getView().calculateExtent([256, 256]); - const qw = getSize(c)[0] / 4; - const qh = getSize(c)[1] / 4; - return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh]; -} - const map = new Map({ target: 'map', view: new View({ @@ -43,3 +36,12 @@ map.addLayer( ); render(); + +function centerExtent() { + const c = map.getView().calculateExtent([256, 256]); + const qw = getSize(c)[0] / 4; + const qh = getSize(c)[1] / 4; + return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh]; +} + + diff --git a/rendering/cases/layer-tile-simple/main.js b/rendering/cases/layer-tile-simple/main.js index b6fa080574..365b572850 100644 --- a/rendering/cases/layer-tile-simple/main.js +++ b/rendering/cases/layer-tile-simple/main.js @@ -1,8 +1,8 @@ import Map from '../../../src/ol/CompositeMap.js'; import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from "../../../src/ol/proj"; -import XYZ from "../../../src/ol/source/XYZ"; +import {fromLonLat} from '../../../src/ol/proj'; +import XYZ from '../../../src/ol/source/XYZ'; const center = fromLonLat([8.6, 50.1]); diff --git a/rendering/cases/layer-tile-transition/main.js b/rendering/cases/layer-tile-transition/main.js index dece675c16..78282f1bb6 100644 --- a/rendering/cases/layer-tile-transition/main.js +++ b/rendering/cases/layer-tile-transition/main.js @@ -1,8 +1,8 @@ import Map from '../../../src/ol/CompositeMap.js'; import View from '../../../src/ol/View.js'; import TileLayer from '../../../src/ol/layer/Tile.js'; -import {fromLonLat} from "../../../src/ol/proj"; -import XYZ from "../../../src/ol/source/XYZ"; +import {fromLonLat} from '../../../src/ol/proj'; +import XYZ from '../../../src/ol/source/XYZ'; const center = fromLonLat([8.6, 50.1]); diff --git a/rendering/cases/layer-vectortile-rotate-vector/expected.png b/rendering/cases/layer-vectortile-rotate-vector/expected.png new file mode 100644 index 0000000000..94878d923d Binary files /dev/null and b/rendering/cases/layer-vectortile-rotate-vector/expected.png differ diff --git a/rendering/cases/layer-vectortile-rotate-vector/main.js b/rendering/cases/layer-vectortile-rotate-vector/main.js new file mode 100644 index 0000000000..f034255152 --- /dev/null +++ b/rendering/cases/layer-vectortile-rotate-vector/main.js @@ -0,0 +1,53 @@ +import Map from '../../../src/ol/Map.js'; +import View from '../../../src/ol/View.js'; +import VectorTileSource from '../../../src/ol/source/VectorTile'; +import MVT from '../../../src/ol/format/MVT'; +import {createXYZ} from '../../../src/ol/tilegrid'; +import VectorTileLayer from '../../../src/ol/layer/VectorTile'; +import VectorSource from '../../../src/ol/source/Vector'; +import Feature from '../../../src/ol/Feature'; +import Point from '../../../src/ol/geom/Point'; +import VectorLayer from '../../../src/ol/layer/Vector'; +import Style from '../../../src/ol/style/Style'; +import CircleStyle from '../../../src/ol/style/Circle'; +import Fill from '../../../src/ol/style/Fill'; + +const vectorSource = new VectorSource({ + features: [ + new Feature(new Point([1825727.7316762917, 6143091.089223046])) + ] +}); +const layer = new VectorLayer({ + zIndex: 1, + source: vectorSource, + style: new Style({ + image: new CircleStyle({ + radius: 10, + fill: new Fill({ + color: 'red' + }) + }) + }) +}); + +new Map({ + layers: [ + layer, + new VectorTileLayer({ + source: new VectorTileSource({ + format: new MVT(), + tileGrid: createXYZ(), + url: '/data/tiles/mvt/{z}-{x}-{y}.vector.pbf', + transition: 0 + }) + }) + ], + target: 'map', + view: new View({ + center: [1825927.7316762917, 6143091.089223046], + zoom: 14, + rotation: Math.PI / 4 + }) +}); + +render({message: 'Vector tile layer rotates with vector layer on top'}); diff --git a/rendering/cases/layer-vectortile-rotate/expected.png b/rendering/cases/layer-vectortile-rotate/expected.png new file mode 100644 index 0000000000..4422c694e9 Binary files /dev/null and b/rendering/cases/layer-vectortile-rotate/expected.png differ diff --git a/rendering/cases/layer-vectortile-rotate/main.js b/rendering/cases/layer-vectortile-rotate/main.js index 39367b18f7..a765534920 100644 --- a/rendering/cases/layer-vectortile-rotate/main.js +++ b/rendering/cases/layer-vectortile-rotate/main.js @@ -1,9 +1,9 @@ import Map from '../../../src/ol/Map.js'; import View from '../../../src/ol/View.js'; -import VectorTileSource from "../../../src/ol/source/VectorTile"; -import MVT from "../../../src/ol/format/MVT"; -import {createXYZ} from "../../../src/ol/tilegrid"; -import VectorTileLayer from "../../../src/ol/layer/VectorTile"; +import VectorTileSource from '../../../src/ol/source/VectorTile'; +import MVT from '../../../src/ol/format/MVT'; +import {createXYZ} from '../../../src/ol/tilegrid'; +import VectorTileLayer from '../../../src/ol/layer/VectorTile'; const map = new Map({ layers: [ @@ -23,5 +23,5 @@ const map = new Map({ }) }); -map.getView().setRotation( Math.PI / 4); +map.getView().setRotation(Math.PI / 4); render({message: 'Vector tile layer rotates'}); diff --git a/rendering/cases/layer-vectortile-simple/main.js b/rendering/cases/layer-vectortile-simple/main.js index c1e564c9da..4146d12424 100644 --- a/rendering/cases/layer-vectortile-simple/main.js +++ b/rendering/cases/layer-vectortile-simple/main.js @@ -1,9 +1,9 @@ import Map from '../../../src/ol/CompositeMap.js'; import View from '../../../src/ol/View.js'; -import VectorTileSource from "../../../src/ol/source/VectorTile"; -import MVT from "../../../src/ol/format/MVT"; -import {createXYZ} from "../../../src/ol/tilegrid"; -import VectorTileLayer from "../../../src/ol/layer/VectorTile"; +import VectorTileSource from '../../../src/ol/source/VectorTile'; +import MVT from '../../../src/ol/format/MVT'; +import {createXYZ} from '../../../src/ol/tilegrid'; +import VectorTileLayer from '../../../src/ol/layer/VectorTile'; new Map({ layers: [ diff --git a/test/rendering/ol/layer/vectortile.test.js b/test/rendering/ol/layer/vectortile.test.js index 94ee5dbdc8..40b90d374e 100644 --- a/test/rendering/ol/layer/vectortile.test.js +++ b/test/rendering/ol/layer/vectortile.test.js @@ -1,12 +1,8 @@ -import Feature from '../../../../src/ol/Feature.js'; import Map from '../../../../src/ol/Map.js'; import View from '../../../../src/ol/View.js'; import MVT from '../../../../src/ol/format/MVT.js'; -import Point from '../../../../src/ol/geom/Point.js'; -import VectorLayer from '../../../../src/ol/layer/Vector.js'; import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js'; import {assign} from '../../../../src/ol/obj.js'; -import VectorSource from '../../../../src/ol/source/Vector.js'; import VectorTileSource from '../../../../src/ol/source/VectorTile.js'; import CircleStyle from '../../../../src/ol/style/Circle.js'; import Fill from '../../../../src/ol/style/Fill.js'; @@ -76,32 +72,6 @@ describe('ol.rendering.layer.VectorTile', function() { }); }); - it('renders rotated view correctly with vector layer on top', function(done) { - createMap(); - const vectorSource = new VectorSource({ - features: [ - new Feature(new Point([1825727.7316762917, 6143091.089223046])) - ] - }); - map.addLayer(new VectorLayer({ - zIndex: 1, - source: vectorSource, - style: new Style({ - image: new CircleStyle({ - radius: 10, - fill: new 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(2); waitForTiles(source, {}, function() {