diff --git a/rendering/cases/layer-tile-none-square/expected.png b/rendering/cases/layer-tile-none-square/expected.png new file mode 100644 index 0000000000..9807e3f508 Binary files /dev/null and b/rendering/cases/layer-tile-none-square/expected.png differ diff --git a/rendering/cases/layer-tile-none-square/main.js b/rendering/cases/layer-tile-none-square/main.js new file mode 100644 index 0000000000..c490ed252a --- /dev/null +++ b/rendering/cases/layer-tile-none-square/main.js @@ -0,0 +1,30 @@ +import Map from '../../../src/ol/Map.js'; +import View from '../../../src/ol/View.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; +import XYZ from '../../../src/ol/source/XYZ'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; + +const center = [-10997148, 4569099]; + +const layer = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/512x256/{z}/{x}/{y}.png', + tileGrid: createXYZ({ + tileSize: [512, 256] + }), + transition: 0 + }) +}); + +const map = new Map({ + target: 'map', + pixelRatio: 1, + view: new View({ + center: center, + zoom: 5 + }) +}); + +map.addLayer(layer); + +render(); diff --git a/rendering/cases/layer-tile-opacity/expected.png b/rendering/cases/layer-tile-opacity/expected.png new file mode 100644 index 0000000000..ab8f230eb1 Binary files /dev/null and b/rendering/cases/layer-tile-opacity/expected.png differ diff --git a/rendering/cases/layer-tile-opacity/main.js b/rendering/cases/layer-tile-opacity/main.js new file mode 100644 index 0000000000..c34fc5d55d --- /dev/null +++ b/rendering/cases/layer-tile-opacity/main.js @@ -0,0 +1,26 @@ +import Map from '../../../src/ol/Map.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'; + +const center = fromLonLat([8.6, 50.1]); + +new Map({ + layers: [ + new TileLayer({ + source: new XYZ({ + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + transition: 0 + }), + opacity: 0.2 + }) + ], + target: 'map', + view: new View({ + center: center, + zoom: 3 + }) +}); + +render(); diff --git a/rendering/cases/layer-tile-two-layers/expected.png b/rendering/cases/layer-tile-two-layers/expected.png new file mode 100644 index 0000000000..e037067f81 Binary files /dev/null and b/rendering/cases/layer-tile-two-layers/expected.png differ diff --git a/rendering/cases/layer-tile-two-layers/main.js b/rendering/cases/layer-tile-two-layers/main.js new file mode 100644 index 0000000000..709636fdfd --- /dev/null +++ b/rendering/cases/layer-tile-two-layers/main.js @@ -0,0 +1,35 @@ +import Map from '../../../src/ol/Map.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'; + +const center = fromLonLat([8.6, 50.1]); + +const layer1 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg', + transition: 0 + }), + opacity: 0.2 +}); +const layer2 = new TileLayer({ + source: new XYZ({ + url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png', + transition: 0 + }) +}); + +const map = new Map({ + pixelRatio: 1, + layers: [layer1, layer2], + target: 'map', + view: new View({ + center: center, + zoom: 3 + }) +}); + +map.getView().setRotation(Math.PI / 2); + +render(); diff --git a/rendering/data/tiles/512x256/5/3/12.png b/rendering/data/tiles/512x256/5/3/12.png new file mode 100644 index 0000000000..00f5a32857 Binary files /dev/null and b/rendering/data/tiles/512x256/5/3/12.png differ diff --git a/test/rendering/ol/layer/tile.test.js b/test/rendering/ol/layer/tile.test.js index 1653174f00..266d3a59da 100644 --- a/test/rendering/ol/layer/tile.test.js +++ b/test/rendering/ol/layer/tile.test.js @@ -1,17 +1,13 @@ import Map from '../../../../src/ol/Map.js'; import View from '../../../../src/ol/View.js'; -import {getSize} from '../../../../src/ol/extent.js'; import Point from '../../../../src/ol/geom/Point.js'; import TileLayer from '../../../../src/ol/layer/Tile.js'; import {assign} from '../../../../src/ol/obj.js'; import {transform} from '../../../../src/ol/proj.js'; -import TileImage from '../../../../src/ol/source/TileImage.js'; import XYZ from '../../../../src/ol/source/XYZ.js'; import CircleStyle from '../../../../src/ol/style/Circle.js'; import Fill from '../../../../src/ol/style/Fill.js'; import Stroke from '../../../../src/ol/style/Stroke.js'; -import {createXYZ} from '../../../../src/ol/tilegrid.js'; - describe('ol.rendering.layer.Tile', function() { @@ -71,140 +67,6 @@ describe('ol.rendering.layer.Tile', function() { }); } - describe('with tile transition', function() { - it('renders correctly after the transition', function(done) { - createMap('canvas'); - const source = new XYZ({ - url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png' - }); - waitForTiles('canvas', [source], {}, function() { - setTimeout(function() { - expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png', - IMAGE_TOLERANCE, done); - }, 500); - }); - }); - }); - - describe('single tile layer', function() { - let source; - - beforeEach(function() { - source = new XYZ({ - url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png', - transition: 0 - }); - }); - - it('tests the canvas renderer', function(done) { - createMap('canvas'); - waitForTiles('canvas', [source], {}, function() { - expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png', - IMAGE_TOLERANCE, done); - }); - }); - }); - - describe('two tile layers', function() { - let source1, source2; - - beforeEach(function() { - source1 = new XYZ({ - url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png', - transition: 0 - }); - source2 = new XYZ({ - url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png', - transition: 0 - }); - }); - - function centerExtent(map) { - const c = map.getView().calculateExtent(map.getSize()); - 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]; - } - - it('tests canvas layer extent clipping with rotation', function(done) { - createMap('canvas'); - map.getView().setRotation(Math.PI / 2); - waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() { - expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate.png', - IMAGE_TOLERANCE, done); - }); - }); - - it('tests canvas layer extent clipping (HiDPI)', function(done) { - createMap('canvas', undefined, undefined, 2); - waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() { - expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-hidpi.png', - IMAGE_TOLERANCE, done); - }); - }); - - it('tests canvas layer extent clipping with rotation (HiDPI)', function(done) { - createMap('canvas', undefined, undefined, 2); - map.getView().setRotation(Math.PI / 2); - waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() { - expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent-rotate-hidpi.png', - IMAGE_TOLERANCE, done); - }); - }); - - }); - - describe('tile layer with opacity', function() { - let source; - - beforeEach(function() { - source = new XYZ({ - url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png', - transition: 0 - }); - }); - - it('tests the canvas renderer', function(done) { - createMap('canvas'); - waitForTiles('canvas', [source], {opacity: 0.2}, function() { - expectResemble(map, 'rendering/ol/layer/expected/opacity-canvas.png', - IMAGE_TOLERANCE, done); - }); - }); - }); - - describe('tile layer with non-square tiles', function() { - - function createSource(tileSize) { - return new TileImage({ - url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png', - tileGrid: createXYZ({ - tileSize: tileSize.split('x') - }), - transition: 0 - }); - } - - it('512x256 renders correcly using the canvas renderer', function(done) { - const source = createSource('512x256'); - createMap('canvas', [-10997148, 4569099]); - waitForTiles('canvas', [source], {}, function() { - expectResemble(map, 'rendering/ol/layer/expected/512x256-canvas.png', - IMAGE_TOLERANCE, done); - }); - }); - - it('192x256 renders correcly using the canvas renderer', function(done) { - const source = createSource('192x256'); - createMap('canvas', [-11271098, 3747248], [100, 100], undefined, - source.getTileGrid().getResolutions()); - waitForTiles('canvas', [source], {}, function() { - expectResemble(map, 'rendering/ol/layer/expected/192x256-canvas.png', - IMAGE_TOLERANCE, done); - }); - }); - }); - describe('tile layer with render listener', function() { let source, onAddLayer;