定位渲染蒙版

废话不多说先上效果图

效果图

      /**
     * 根据图形进行蒙板定位
     * @param {Geometry} geometry  一般为查询获取到的geometry
     */
    async locateMaskByGeometry(geometry) {
      const { Graphic, Polygon, GraphicsLayer } = await loadModules(
        "esri/Graphic",
        "esri/geometry/Polygon",
        "esri/layers/GraphicsLayer"
      );
      this._locateGraphicLayer = this.map.findLayerById("locateGraphicLayer");
      if (!this._locateGraphicLayer) {
        this._locateGraphicLayer = new GraphicsLayer({
          id: "locateGraphicLayer"
        });
        this.map.add(this._locateGraphicLayer);
      }
      this._locateGraphicLayer.removeAll();
      this.reorderLayer(this._locateGraphicLayer);
      let {
        topPoint,
        bottomPoint,
        leftRings,
        rightRings
      } = this.getPolygonTopAndBottom(geometry);

      let firstGeo, secondGeo, firstFeature, secondFeature;
      firstGeo = new Polygon({
        rings: [
          leftRings.concat([
            [topPoint[0], 90],
            [0, 90],
            [0, 0],
            [bottomPoint[0], 0],
            bottomPoint
          ])
        ],
        spatialReference: this.mapView.spatialReference
      });
      secondGeo = new Polygon({
        rings: [
          rightRings.concat([
            [bottomPoint[0], 0],
            [180, 0],
            [180, 90],
            [topPoint[0], 90],
            topPoint
          ])
        ],
        spatialReference: this.mapView.spatialReference
      });
      firstFeature = new Graphic({
        geometry: firstGeo,
        symbol: {
          type: "simple-fill",
          color: [0, 0, 0, 0.8],
          style: "solid",
          outline: {
            color: [0, 0, 255, 1],
            width: 0
          }
        }
      });
      secondFeature = new Graphic({
        geometry: secondGeo,
        symbol: {
          type: "simple-fill",
          color: [0, 0, 0, 0.8],
          style: "solid",
          outline: {
            color: [0, 0, 255, 1],
            width: 0
          }
        }
      });

      this._locateGraphicLayer.add(firstFeature);
      this._locateGraphicLayer.add(secondFeature);
      this.mapView.goTo([geometry.extent], {
        duration: 500
      });
    },
    getPolygonTopAndBottom(polygon) {
      let topPoint = polygon.rings[0][0],
        topPointIndex = 0,
        bottomPoint = polygon.rings[0][0],
        bottomPointIndex = 0,
        leftRings,
        rightRings;
      polygon.rings[0].forEach((point, index) => {
        if (topPoint[1] < point[1]) {
          topPoint = point;
          topPointIndex = index;
        }
        if (bottomPoint[1] > point[1]) {
          bottomPoint = point;
          bottomPointIndex = index;
        }
      });
      // 默认认为rings顺时针排序
      if (topPointIndex < bottomPointIndex) {
        // 高点索引小于低点,说明rings从左侧开始
        leftRings = polygon.rings[0]
          .slice(bottomPointIndex, polygon.rings[0].length)
          .concat(polygon.rings[0].slice(0, topPointIndex + 1));
        rightRings = polygon.rings[0].slice(
          topPointIndex,
          bottomPointIndex + 1
        );
      } else {
        // 高点索引大于低点,说明rings在右侧开始
        leftRings = polygon.rings[0].slice(bottomPointIndex, topPointIndex + 1);
        rightRings = polygon.rings[0]
          .slice(topPointIndex, polygon.rings[0].length)
          .concat(polygon.rings[0].slice(0, bottomPointIndex + 1));
      }
      return {
        topPoint,
        bottomPoint,
        leftRings,
        rightRings
      };
    }