Add layer background

This commit is contained in:
Andreas Hocevar
2021-12-05 19:09:56 +01:00
parent 4ed1226411
commit 3638df90f8
9 changed files with 230 additions and 73 deletions

View File

@@ -22,7 +22,7 @@ import {getCenter} from '../../../../../../src/ol/extent.js';
import {get as getProjection} from '../../../../../../src/ol/proj.js';
import {getUid} from '../../../../../../src/ol/util.js';
describe('ol.renderer.canvas.VectorTileLayer', function () {
describe('ol/renderer/canvas/VectorTileLayer', function () {
describe('constructor', function () {
const head = document.getElementsByTagName('head')[0];
const font = document.createElement('link');
@@ -246,6 +246,78 @@ describe('ol.renderer.canvas.VectorTileLayer', function () {
done();
});
});
it('reuses render container when previous layer has a background', function (done) {
map.getLayers().insertAt(
0,
new TileLayer({
background: 'rgb(255, 0, 0)',
source: new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
}),
})
);
map.once('rendercomplete', function () {
expect(document.querySelector('.ol-layers').childElementCount).to.be(1);
expect(document.querySelector('.ol-layer').childElementCount).to.be(1);
map.removeLayer(map.getLayers().item(1));
map.renderSync();
expect(document.querySelector('.ol-layer').childElementCount).to.be(1);
done();
});
});
it('does not reuse render container when backgrounds are different', function (done) {
map.getLayers().insertAt(
0,
new TileLayer({
background: 'rgb(255, 0, 0)',
source: new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
}),
})
);
map.getLayers().insertAt(
0,
new TileLayer({
background: 'rgba(255, 0, 0, 0.1)',
source: new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
}),
})
);
map.once('rendercomplete', function () {
expect(document.querySelector('.ol-layers').childElementCount).to.be(2);
expect(document.querySelector('.ol-layer').childElementCount).to.be(1);
map.removeLayer(map.getLayers().item(1));
map.renderSync();
expect(document.querySelector('.ol-layers').childElementCount).to.be(1);
done();
});
});
it('sets the configured background (string) on the container', function (done) {
layer.setBackground('rgba(255, 0, 0, 0.5)');
map.once('rendercomplete', function () {
expect(layer.getRenderer().container.style.backgroundColor).to.be(
'rgba(255, 0, 0, 0.5)'
);
done();
});
});
it('sets the configured background (function) on the container', function (done) {
layer.setBackground(function (resolution) {
expect(resolution).to.be(map.getView().getResolution());
return 'rgba(255, 0, 0, 0.5)';
});
map.once('rendercomplete', function () {
expect(layer.getRenderer().container.style.backgroundColor).to.be(
'rgba(255, 0, 0, 0.5)'
);
done();
});
});
});
describe('#prepareFrame', function () {