根据主图颜色概览图

Question

我需要为上次缩放时在同一地图中访问过的概览地图区域着色。

我能够获得颜色的范围并且能够将 ImageLayer 附加到层，但随着时间的推移层增加很多并且浏览器崩溃。

我也尝试了 CanvasImageLayer，但是 canvas 只有概览图的大小，所以颜色会随着扫描移动。

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

CanvasLayer 尝试

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

Answer 1

对于其他需要此功能的人，唯一的方法是使用 canvas 层，然后存储已访问范围的状态，然后在它们位于视图中时绘制它们。棘手的事情是只绘制一次，但找到交点并移除它们以获得一组不相交的范围来绘制是一个可以解决的问题。

根据主图颜色概览图

Color overviewMap according to mainMap

openlayers

openlayers-5