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