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