diff --git a/rendering/cases/layer-tile-2layers-extentclip/expected.png b/rendering/cases/layer-tile-2layers-extentclip/expected.png new file mode 100644 index 0000000000..e1e007a8a1 Binary files /dev/null and b/rendering/cases/layer-tile-2layers-extentclip/expected.png differ diff --git a/rendering/cases/layer-tile-2layers-extentclip/main.js b/rendering/cases/layer-tile-2layers-extentclip/main.js new file mode 100644 index 0000000000..70d81c4d08 --- /dev/null +++ b/rendering/cases/layer-tile-2layers-extentclip/main.js @@ -0,0 +1,45 @@ +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"; + +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({ + center: center, + zoom: 3 + }) +}); + +const layerExtent = centerExtent(); + +map.addLayer( + new TileLayer({ + source: new XYZ({ + url: '/data/tiles/satellite/{z}/{x}/{y}.jpg' + }), + extent: layerExtent + }), +); + +map.addLayer( + new TileLayer({ + source: new XYZ({ + url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png' + }), + extent: layerExtent + }) +); + +render(); diff --git a/test/rendering/ol/layer/tile.test.js b/test/rendering/ol/layer/tile.test.js index 4f577a23b1..693e669aee 100644 --- a/test/rendering/ol/layer/tile.test.js +++ b/test/rendering/ol/layer/tile.test.js @@ -103,14 +103,6 @@ describe('ol.rendering.layer.Tile', function() { return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh]; } - it('tests canvas layer extent clipping', function(done) { - createMap('canvas'); - waitForTiles('canvas', [source1, source2], [{}, {extent: centerExtent(map)}], function() { - expectResemble(map, 'rendering/ol/layer/expected/2-layers-canvas-extent.png', - IMAGE_TOLERANCE, done); - }); - }); - it('tests canvas layer extent clipping with rotation', function(done) { createMap('canvas'); map.getView().setRotation(Math.PI / 2);