Openlayers 根据主地图为概览地图上色

我需要为总览地图的区域上色，该区域仅在上次缩放时在同一地图中访问过

我能够获得颜色的范围，并能够将

ImageLayer

附加到层中，但随着时间的推移，层会大量增加，浏览器会崩溃

我也尝试了

CanvasImageLayer

，但是那里的画布只有概览图的大小，因此颜色会随着扫描而移动

ImageLayer尝试

拉票企图

---

对于其他需要此功能的用户，唯一的方法是使用画布层，然后存储访问的扩展数据块的状态，然后在视图中绘制它们。

---

其中的棘手问题是只绘制一次，但找到交点并删除它们以获得一组不相交的范围来绘制是一个可解决的问题。

对于其他需要绘制的人，唯一的方法是使用画布层，然后存储访问的范围的状态，然后在视图中绘制它们。 其中的棘手问题是只绘制一次，但找到交点并删除它们以获得不相交的范围集进行绘制是一个可解决的问题

if (this.viewer.getView().getZoom() === this.viewer.getView().getMaxZoom()) {
            let raster = new RasterSource(this.rasterOptions);
            let newExtent = this.viewer.getView().calculateExtent();
            let previewColorLayer = new ImageLayer({
              opacity: 0.1,
              source: raster,
              extent: newExtent,
            });
            this.overviewMap.getOverviewMap().addLayer(previewColorLayer);
            raster.changed();
          }

this.canvasFunction = (extent, resolution, pixelRatio, size, projection) => {
      console.log("called");

      let canvasWidth = size[0], canvasHeight = size[1];
      if (!this.canvas) {
        this.canvas = document.createElement('canvas');

        this.canvas.setAttribute('width', canvasWidth);
        this.canvas.setAttribute('height', canvasHeight);
      }


      let ctx = this.canvas.getContext("2d");

      let mapExtent = this.viewer.getView().calculateExtent();
      let mapCenter = this.viewer.getView().getCenter();
      let mapCenterPixel = this.overviewMap.getOverviewMap().getPixelFromCoordinate(mapCenter);

      // ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      if (this.viewer.getView().getZoom() === this.viewer.getView().getMaxZoom()) {
        ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
        ctx.save();

        // Draw relative to the center of the canvas
        // ctx.translate(canvasWidth / 6, canvasHeight / 6);
        // Cancel the rotation of the map.
        ctx.rotate(-this.overviewMap.getOverviewMap().getView().getRotation());
        // Position everything relative to the center of the map
        // ctx.translate(-mapCenterPixel[0], -mapCenterPixel[1]);

        let corner1 = this.overviewMap.getOverviewMap().getPixelFromCoordinate(getBottomRight(mapExtent));
        let corner2 = this.overviewMap.getOverviewMap().getPixelFromCoordinate(getTopLeft(mapExtent));
        console.log(pixelRatio, resolution);
        let scale = 1;
        let rect = [corner2[0], corner2[1],(corner1[0] - corner2[0])/scale, (corner1[1] - corner2[1])/scale];
        this.paint(this.canvas, ctx, rect);
        ctx.restore();
      }

      return this.canvas;
    };

    this.colorSource = new ImageCanvasSource({
      canvasFunction: this.canvasFunction,
      projection: this.state.projection
    });

    this.colorLayer = new ImageLayer({
      source: this.colorSource
    });

    this.overviewMap.getOverviewMap().addLayer(this.colorLayer);