ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add layer background

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

63
test/browser/spec/ol/layer/MapboxVector.test.js
View File

@@ -4,7 +4,7 @@ import MapboxVectorLayer, {
normalizeSpriteUrl,
normalizeStyleUrl,
} from '../../../../../src/ol/layer/MapboxVector.js';
import {get} from '../../../../../src/ol/proj.js';
import {asString} from '../../../../../src/ol/color.js';
import {unByKey} from '../../../../../src/ol/Observable.js';
describe('ol/layer/MapboxVector', () => {
@@ -199,7 +199,7 @@ describe('ol/layer/MapboxVector', () => {
});
describe('background', function () {
it('adds a feature for the background', function (done) {
it('configures the layer with a background function', function (done) {
const layer = new MapboxVectorLayer({
styleUrl:
'data:,' +
@@ -229,15 +229,45 @@ describe('ol/layer/MapboxVector', () => {
const key = source.on('change', function () {
if (source.getState() === 'ready') {
unByKey(key);
source.getTile(14, 8938, 5680, 1, get('EPSG:3857')).load();
source.once('tileloadend', (event) => {
const features = event.tile.getFeatures();
expect(features[0].get('layer')).to.be('background');
expect(
features[0].getStyleFunction()().getFill().getColor()
).to.eql([255, 0, 0, 0.8]);
done();
});
expect(layer.getBackground()(1)).to.eql(asString([255, 0, 0, 0.8]));
done();
}
});
});
it("avoids the style's background with `background: false`", function (done) {
const layer = new MapboxVectorLayer({
styleUrl:
'data:,' +
encodeURIComponent(
JSON.stringify({
version: 8,
sources: {
'foo': {
tiles: ['/spec/ol/data/{z}-{x}-{y}.vector.pbf'],
type: 'vector',
},
},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#ff0000',
'background-opacity': 0.8,
},
},
],
})
),
background: false,
});
const source = layer.getSource();
const key = source.on('change', function () {
if (source.getState() === 'ready') {
unByKey(key);
expect(layer.getBackground()).to.be(false);
done();
}
});
});
@@ -274,15 +304,8 @@ describe('ol/layer/MapboxVector', () => {
const key = source.on('change', function () {
if (source.getState() === 'ready') {
unByKey(key);
source.getTile(14, 8938, 5680, 1, get('EPSG:3857')).load();
source.once('tileloadend', (event) => {
const features = event.tile.getFeatures();
expect(features[0].get('layer')).to.be('landuse');
expect(
layer.getStyleFunction()(features[0])[0].getFill().getColor()
).to.eql('rgba(255,0,0,0.8)');
done();
});
expect(layer.getBackground()).to.be(undefined);
done();
}
});
});

74
test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
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 () {