mabox-gl 展示制定区域的影像，其他则有模态框

原理

一、 利用turf.mask将你想要的展示的geojson截取出来，这样就变成了一个中间镂空的geojson

turf.mask( ‘高亮数据’, ‘全球数据（这里用的正负180 和正负90）’);

二、用中间镂空的geojson，颜色设置成你想要的模态框的颜色 

三、绘制一个高亮的位置，颜色设置成你想要的颜色就可以了

zhegai() {
      if (map.getLayer("blueMask-line")) {
        map.removeLayer("blueMask-line");
      }
      if (map.getSource("blueMask")) {
        map.removeSource("blueMask");
      }
      map.addSource("blueMask", {
        type: "geojson",
        data: require("./shanxi.json"), // 网上下载的geoJson的地图文件
      });
      // 设置地图区域边沿的线宽和颜色值
      map.addLayer({
        id: `blueMask`,
        type: "line",
        source: "blueMask",
        layout: {},
        paint: {
          "line-width": 1.5,
          "line-color": "#286BFF",
        },
      });
      let polygon = {
        geometry: {
          coordinates: [
            [
              [-180, 90],
              [180, 90],
              [180, -90],
              [-180, -90],
              [-180, 90],
            ],
          ],
          type: "Polygon",
        },
        properties: {},
        type: "Feature",
      };
      console.log(require("./shanxi.json"), "require");
      var PolygonModal = turf.mask(
        require("./shanxi.json").features[0],
        polygon
      );
      console.log(PolygonModal, "PolygonModal");
      map.addLayer({
        id: "PolygonModal",
        type: "fill",
        source: {
          type: "geojson",
          data: PolygonModal,
        },
        layout: {},
        paint: {
          "fill-color": "#000",
          "fill-opacity": 0.5,
        },
      });
      var bbox = turf.bbox(require("./shanxi.json").features[0]);
      var bboxPolygon = turf.bboxPolygon(bbox);
      let mapbounds = [
        [
          bboxPolygon.geometry.coordinates[0][0][0],
          bboxPolygon.geometry.coordinates[0][0][1],
        ],
        [
          bboxPolygon.geometry.coordinates[0][2][0],
          bboxPolygon.geometry.coordinates[0][2][1],
        ],
      ];
      map.fitBounds(mapbounds, { padding: 20 });
    },