vue+高德地图实现区域掩模

<template>
  <div class="all">
    <div id="container"></div>
  </div>
</template>

<script>
// import { load } from '@amap/jsapi-loader';
// import AMap from 'AMap';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "7072e0569cf13eeba7e7dafaa0xxxxxxx",
}
export default {
  data() {
    return {
      map: null,
      zoom: 11,
      center:[109.839996,19.03557]
      // dialogVisible: false,
      // details: "",
      // pic: "",
    };
  },

  methods: {
    initAMap() {
      AMapLoader.load({
        key: "9da8c54719a33c3352axxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.DistrictSearch', 'AMap.Object3DLayer'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 获取到作为地图容器的DOM元素，创建地图实例
        this.map = new AMap.Map("container", { //设置地图容器id
          resizeEnable: true,
          zoom: this.zoom, // 地图显示的缩放级别
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放，默认值为true
          dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
          doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true 
          center: this.center, // 初始化中心点坐标 西安
          // mapStyle: "amap://styles/darkblue", // 设置颜色底层 
        })

        var opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'city'
        }
        // 利用行政区查询获取边界构建mask路径
        // 也可以直接通过经纬度构建mask路径  
        var district = new AMap.DistrictSearch(opts)
        district.search('海南省', function (status, result) {
          // console.log("获取到城市信息", status, result);
          var bounds = result.districtList[0].boundaries;
          // console.log("数据", bounds);
          var mask = []
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]])
          }
          var map = new AMap.Map('container', {
            mask: mask,
            center: [109.839996,19.03557],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
            zoom: 8,
            layers: [
              new AMap.TileLayer.RoadNet({
                //rejectMapMask:true
              }),
              new AMap.TileLayer.Satellite()
            ]
          });

          // var maskerIn = new AMap.Marker({
          //   position: [116.501415, 39.926055],
          //   map: map
          // })
          // var maskerOut = new AMap.Marker({//区域外的不会显示
          //   position: [117.001415, 39.926055],
          //   map: map
          // })

          //添加高度面
          var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
          map.add(object3Dlayer)
          var height = -8000;
          var color = '#0088ffcc';//rgba
          var wall = new AMap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color
          });
          wall.transparent = true
          object3Dlayer.add(wall)
          //添加描边
          for (var i = 0; i < bounds.length; i += 1) {
            new AMap.Polyline({
              path: bounds[i],
              strokeColor: '#99ffff',
              strokeWeight: 4,
              map: map
            })
          }
        });
      }).catch(e => {
        console.log(e)
      })
    }

  },
  mounted() {
    this.initAMap()
  }
}
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
  border: 2px solid red;
  padding: 15% 0;
  margin-top: -10%;
}

#container {
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}
</style>