el-amap 遮罩 el-amap 帶洞多邊形

效果圖

代碼

<template>
  <div>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      pitch-enable="false"
      :events="events"
      :style="{height: '48.4rem'}"
      ref="map"
    >

      <!-- 遮罩層 -->
      <el-amap-polygon
        strokeColor="#00eeff"
        strokeOpacity="1"
        fillColor="#71B3ff"
        fillOpacity="0.5"
        v-for="(polygon, index) in polygons"
        :key="index+'polygons'"
        strokeWeight="2"
        :path="polygon.Ce.path"
      ></el-amap-polygon>

    </el-amap>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 縮放程度,值越大越詳細
      zoom: 10,
      // 中心點
      center: [106.519006, 29],
      events: this.eventsFun(),
      polygons: [], // 繪畫的點
      district: null, // 行政區划插件的對象
    }
  },
  methods: {
    // 畫地圖的遮罩層
    drawBounds () {
      var that = this;

      //加載行政區划插件
      if (!that.district) {
        // 實例化DistrictSearch
        var opts = {
          subdistrict: 0, // 獲取邊界不需要返回下級行政區
          extensions: "all", //返回行政區邊界坐標組等具體信息
          level: "city", // 查詢行政級別為 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }

      // 行政區查詢
      let code = '江津';
      that.district.search(code, function (status, result) {
        that.polygons = [];

        // 外圈
        var 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),
        ]

        var bounds = result.districtList[0].boundaries; // 這里的bounds是一個數組,但是里面只有一個元素就是bounds[0]

        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) { // 所以這個循環只會執行一次
            // 生成行政區划polygon
            var polygon = new AMap.Polygon({
              path: [outer, bounds[i]],
            });
            that.polygons.push(polygon);
          }
        }

        AMap.Polygon.bind(that.polygons); // 交給amap進行值處理
      });
    },
    // 地圖事件
    eventsFun () {
      let that = this
      return {
        // 地圖加載完成時執行的方法
        complete () {
          that.drawBounds() // 畫地圖的遮罩層
        }
      }
    },
  }
}
</script>

參考資料

https://blog.csdn.net/qq_35084280/article/details/99574745