Multiple ImageLayer with RasterSource not visible

Question

I am trying to add multiple Openlayer image layers (Using raster source) with different extents to a single Map. If I add a single layer, It is shown but adding multiple does not show either.

1. I thought zindex is the issue which I tried to change with no use.
2. I tested removing one after adding it, then the second one shows (one not removed)

Logging the number of layers always shows all 3 layers (2 that I added and 1 base layer i.e. map)

this.raster = new RasterSource({
      sources: [this.layer.getSource()],
      operation: (pixels, data) => {
        let pixel = pixels[0];
        pixel[0] = 0;
        pixel[1] = 255;
        pixel[2] = 0;
        return pixel;
      }
    });

let previewColorLayer = new ImageLayer({
      opacity: 0.4,
      source: this.raster,
      extent: [972.145, 1948.98, 1270.395, 2082.48],
      zIndex: 1000
      // extent: ex
    });


    let previewColorLayer2 = new ImageLayer({
      opacity: 0.4,
      source: this.raster,
      extent: [952.145, 1756.98, 1270.395, 1890.48],
      zIndex: 2000
      // extent: ex
    });

    this.overviewMap.getOverviewMap().addLayer(previewColorLayer);
    this.overviewMap.getOverviewMap().addLayer(previewColorLayer2);

Answer 1

I tried breaking a raster layer example into two extents and get the same problem, it seems the constructed source cannot be used in more than one layer. But you can reuse the options used to construct it

this.rasterOptions = {
  sources: [this.layer.getSource()],
  operation: (pixels, data) => {
    let pixel = pixels[0];
    pixel[0] = 0;
    pixel[1] = 255;
    pixel[2] = 0;
    return pixel;
  }
};

let previewColorLayer = new ImageLayer({
  opacity: 0.4,
  source: new RasterSource(this.rasterOptions},
  extent: [972.145, 1948.98, 1270.395, 2082.48],
  zIndex: 1000
  // extent: ex
});

let previewColorLayer2 = new ImageLayer({
  opacity: 0.4,
  source: new RasterSource(this.rasterOptions},
  extent: [952.145, 1756.98, 1270.395, 1890.48],
  zIndex: 2000
  // extent: ex
});