Question

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

我能够获得一定程度的色彩，并且能够将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();
          }

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

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

颜色概览根据mainMap

1 个答案: