vue高德地图绘制遮罩

vue高德地图绘制遮罩

一、需求分析

在高德官网api中实现遮罩，在官网的实例中你可以更改想要的区域遮罩，官网实例demo链接地址
https://lbs.amap.com/demo/javascript-api/example/overlayers/cover
但是下载官网实例到自己的项目中，你会发现在官网实例上效果是可以实现的，但是实际引入进来项目报错，达不到自己的想要的效果，那么在自己的项目中该如何实现预期效果呢，请看下面的示例

二、准备工作

1.下载不含子区域的geojson文件

在项目中添加对应的区域的geojson矢量图形需要先下载对应的geojson文件。注意选择不含子区域

推荐使用阿里云下载链接如下：
http://datav.aliyun.com/portal/school/atlas/area_selector
下载你所需要的geojson文件保存到项目中或者服务器上。

2.初始化高德地图

新来的小伙伴可以参照我的另一篇博客初始化你的高德地图在这里不在赘述，链接如下：
https://blog.csdn.net/pizixian_/article/details/122853901?spm=1001.2014.3001.5502

3.关键代码实现

<template>
  <div id="map"></div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        zoom: 1,
        center: [118.035, 36.62],
      });
      this.addMask();
    },
    // 添加遮罩
    addMask() {
      axios.get("geojson文件路径").then((geojson) => {
        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 pathArray = [
          outer, //外边界
          geojson, //内边界需要遮罩区域
        ];
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: "rgba(190, 161, 58, 1)",
          strokeWeight: 2,
          fillColor: "rgba(0,0,0,.5)",
        });
        polygon.setPath(pathArray);
        this.map.add(polygon);
      });
    },
  },
};
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>

总结

搬砖不易，还望各位码农根据自己的项目需求，合理搬砖，实现自己的预期效果，欢迎各位小伙伴指导交流