81 lines
1.6 KiB
JavaScript
81 lines
1.6 KiB
JavaScript
import DataTileSource from '../../../../src/ol/source/DataTile.js';
|
|
import Map from '../../../../src/ol/Map.js';
|
|
import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
|
|
import View from '../../../../src/ol/View.js';
|
|
|
|
const high = new Uint8Array(256 * 256).fill(255);
|
|
const low = new Uint8Array(256 * 256).fill(0);
|
|
|
|
const red = new TileLayer({
|
|
transition: 0,
|
|
source: new DataTileSource({
|
|
minZoom: 2,
|
|
loader: function (z, x, y) {
|
|
if ((x + y) % 2 === 0) {
|
|
return high;
|
|
}
|
|
return low;
|
|
},
|
|
}),
|
|
style: {
|
|
color: ['array', ['band', 1], 0, 0, 1],
|
|
},
|
|
});
|
|
|
|
const green = new TileLayer({
|
|
transition: 0,
|
|
source: new DataTileSource({
|
|
minZoom: 2,
|
|
loader: (z, x) => {
|
|
if (x % 2 === 0) {
|
|
return high;
|
|
}
|
|
return low;
|
|
},
|
|
}),
|
|
style: {
|
|
color: ['array', 0, ['band', 1], 0, 1],
|
|
},
|
|
});
|
|
|
|
green.on('precompose', (event) => {
|
|
const gl = event.context;
|
|
gl.blendEquation(gl.FUNC_ADD);
|
|
gl.blendFunc(gl.ONE, gl.ONE);
|
|
});
|
|
|
|
const blue = new TileLayer({
|
|
transition: 0,
|
|
source: new DataTileSource({
|
|
minZoom: 2,
|
|
loader: (z, x, y) => {
|
|
if (y % 2 === 0) {
|
|
return high;
|
|
}
|
|
return low;
|
|
},
|
|
}),
|
|
style: {
|
|
color: ['array', 0, 0, ['band', 1], 1],
|
|
},
|
|
});
|
|
|
|
blue.on('precompose', (event) => {
|
|
const gl = event.context;
|
|
gl.blendEquation(gl.FUNC_ADD);
|
|
gl.blendFunc(gl.ONE, gl.ONE);
|
|
});
|
|
|
|
new Map({
|
|
target: 'map',
|
|
layers: [red, green, blue],
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 0,
|
|
}),
|
|
});
|
|
|
|
render({
|
|
message: 'precompose events can be used to change layer blending',
|
|
});
|