I have been struggling with this whole night. All I want to do is multiply two rasters together. I know I can do that with RasterSource, but I need better performance. When I create a layer (webgl) for each individual source, extracting the data works fine: ["band", 1], ... ["band", 4], where the first 3 bands are the same (storing byte), and the fourth is the opacity. But if I have 2 or more sources, I can't extract the data from more than one source (which, funnily enough, is always the the last one in the array).
import WebGLTileLayer, { Style as WebGLStyle } from 'ol/layer/WebGLTile';
const src1 = createXYZ(url1)
const src2 = createXYZ(url2)
const product = ["*", ["band", 1], ["band", 5]] // 5 since 4 + 1, this should be the red channel of src2, right?
const style: WebGLStyle = {
color: [
'case',
['<', product, 0.5],
[0, 0, 0, 0],
[255, 0, 0, 1]]
}
const layer = new WebGLTileLayer({
sources: [src1, src2],
style,
})
What I want to do is to extract the data from each source. I tried ["band", 5], but nothing is there.Ive tried other band indexes but either I get nothing, or just the data from src2. What am I doing wrong?
What your code is doing is similar to https://openlayers.org/en/latest/examples/multiple-cogs.html where each source uses the same bands.
To style with 8 bands you would need a DataTile source with 8 bands - OpenLayers has a proposal to do allow that in https://github.com/openlayers/openlayers/pull/16090 but it is not yet part of the API.
Without using that you would need a custom loader to combine 4 bands from 2 sources into an 8 band DataTile, for example https://stackblitz.com/edit/js-npm2wk?file=index.html,package.json,index.js