vue-amap 圈出某個省份輪廓圖 覆蓋其他區域

代碼：

<template>
  <div class="amapBox">
    <el-amap
      class="amap-box"
      :vid="'hunan-amap'"
      :plugin="plugin"
      :center="mapCenter"
      :events="events"
      ref="map"
      :amap-manager="amapManager"
      mapStyle="light"
    >
      <el-amap-marker
        v-for="(marker, index) in geoCoordMap"
        :key="index"
        :icon="require('../../assets/images/book.png')"
        :position="marker.latLon"
        :events="{
          click: (e) => chartScatterMapClick(marker),
          mouseover: () => markerMouseOver(marker, index),
          mouseout: () => markerMouseOut(marker, index),
        }"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :vid="index"
        :label="{
          content: `<div style='padding:10px;'><p style='margin-bottom:10px;' class='gray999'>${marker.name}</p><strong class='violet'>${marker.address}</strong></div>`,
          offset: [
            30,
            markerDatas[index] && typeof markerDatas[index].offsetY === 'number'
              ? markerDatas[index].offsetY
              : -1000000,
          ],
        }"
      >
      </el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
// import { mapState } from "vuex";
import { AMapManager } from "vue-amap";
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "AMap",
  data() {
    return {
      mapCenter: [113.645422, 34.730936], //地圖中心
      events: {
        init: this.mapInit,
        moveend: this.moveend,
      }, //地圖事件
      plugin: [
        "Scale",
        "OverView",
        "DistrictSearch",
        {
          pName: "ToolBar",
          events: {
            init(instance) {
              // //console.log(instance);
            },
          },
          position: "RT",
        },
      ], //地圖差距
      amapManager: new AMapManager(),
      map: null, //地圖實例
      locationImg: require("../../assets/images/book.png"), //標記圖片
      markerDatas: [], //存儲標標記相關數據
      geoCoordMap: [
        { latLon: [113.645422, 34.730936], name: "aaa", address: "地址1" },
        { latLon: [113.245422, 34.730936], name: "bbb", address: "地址2" },
      ], //地圖紅點標記數據
    };
  },
  mounted() {
    this.getGeoCoordMap();
  },
  methods: {
    //獲取地圖紅點標記數據
    getGeoCoordMap() {},
    // 地圖初始化函數
    mapInit(o) {
      o.setMapStyle("amap://styles/54555a5s5as4d5as4d5a154s"); //自定義的高德地圖的樣式
      setTimeout(() => {
        this.drawBounds(o);
      }, 200);
    },
    // //標記點鼠標移入事件
    markerMouseOver(marker, index) {
      for (let i = 0; i < index; i++) {
        this.markerDatas.push("");
      }
      this.markerDatas.splice(index, 1, {
        offsetY: 0,
      });
      // //console.log(this.markerDatas)
    },
    //標記點鼠標移出事件
    markerMouseOut(marker, index) {
      this.markerDatas.splice(0);
    },
    //地圖紅點點擊
    async chartScatterMapClick(marker, index) {
      //點擊標記點相關操作
      console.log(marker);
    },
    //繪制遮罩，顯示某個省
    drawBounds(map) {
      //加載行政區划插件
      let opts = {
        subdistrict: 0, //獲取邊界不需要返回下級行政區
        extensions: "all", //返回行政區邊界坐標組等具體信息
        level: "city", //查詢行政級別為 市
      };
      let district = new AMap.DistrictSearch(opts);
      let polygons = [];
      district.setLevel("河南省");
      district.search("河南省", (status, result) => {
        map.remove(polygons); //清除上次結果
        polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政區划polygon
            let polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#ffffff",
              strokeColor: "#0A1A29",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons); //視口自適應
        //那遙遠的四個點在這
        let outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ];
        let holes = result.districtList[0].boundaries;

        let pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        let polygon = new AMap.Polygon({
          pathL: pathArray,
          //線條顏色，使用16進制顏色代碼賦值。默認值為#006600
          // strokeColor: 'rgb(20,164,173)',
          strokeColor: "#001826",
          strokeWeight: 1,
          //輪廓線透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認為0.9
          strokeOpacity: 0.5,
          //多邊形填充顏色，使用16進制顏色代碼賦值，如：#FFAA00
          fillColor: "#ffffff",
          //多邊形填充透明度，取值范圍[0,1]，0表示完全透明，1表示不透明。默認為0.9
          fillOpacity: 1,
          //輪廓線樣式，實線:solid，虛線:dashed
          strokeStyle: "dashed",
          /*勾勒形狀輪廓的虛線和間隙的樣式，此屬性在strokeStyle 為dashed 時有效， 此屬性在
                          ie9+瀏覽器有效 取值：
                          實線：[0,0,0]
                          虛線：[10,10] ，[10,10] 表示10個像素的實線和10個像素的空白（如此反復）組成的虛線
                          點畫線：[10,2,10]， [10,2,10] 表示10個像素的實線和2個像素的空白 + 10個像素的實
                          線和10個像素的空白 （如此反復）組成的虛線*/
          strokeDasharray: [10, 2, 10],
        });
        polygon.setPath(pathArray);
        map.add(polygon);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.amapBox {
  width: 100%;
  height: 100%;
}
</style>
<style>
.amap-marker-label {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: none;
  -webkit-box-shadow: 1px 2px 4px #cccccc;
  -moz-box-shadow: 1px 2px 4px #cccccc;
  box-shadow: 1px 2px 4px #cccccc;
}
</style>

參考：https://blog.csdn.net/qq_41000974/article/details/110309521