带有 RasterSource 的多个 ImageLayer 不可见

Question

我正在尝试将具有不同范围的多个 Openlayer 图像层（使用栅格源）添加到单个地图。如果我添加一个图层，它会显示，但添加多个图层也不显示。

我认为 zindex 是我尝试更改但没有用的问题。
我测试添加后删除一个，然后第二个显示（一个未删除）

记录层数总是显示所有 3 层（我添加的 2 层和 1 个基础层，即地图）

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

我尝试将栅格层示例分成两个范围并遇到同样的问题，似乎构建的源不能在超过一层中使用。但是您可以重用用于构造它的选项

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
});

带有 RasterSource 的多个 ImageLayer 不可见

Multiple ImageLayer with RasterSource not visible

openlayers

openlayers-5