高德地图api实现切换市区两级立体边界

高德地图api提供区域掩膜的功能，各图层将只显示路径范围内图像，3D视图下有效。
官网的api说明：
格式为一个经纬度的一维、二维或三维数组。
一维数组时代表一个普通多边形路径，如:

[[lng1,lat1], [lng2,lat2], [lng3,lat3]]

二维数组时代表一个带洞的多边形路径，如:

[
[[lng4,lat4], [lng5,lat5], [lng6,lat6]],
[[lng7,lat7], [lng8,lat8], [lng9,lat9]]
]

三维数组时代表多个多边形路径，如:

[
[[lng1,lat1], [lng2,lat2], [lng3,lat3]],//一个普通多边形
[//一个带洞多边形
[[lng4,lat4], [lng5,lat5], [lng6,lat6]],
[[lng7,lat7], [lng8,lat8], [lng9,lat9]]
]
]

使用方法：

var map = new AMap.Map(‘container‘, {
    mask: mask,
    ...
}

这里需要注意二维数组和三维数组的意义完全不同，当边界是一个multipolygon时，则只能使用三维数组。
由于只能在Map的构造函数中设置mask属性，因此如果需要动态修改mask，则需要重新初始化地图控件。
区域掩膜的效果如下图所示：

项目中实现的切换市区两级边界，核心代码是watch中的nowAreaCode监听函数，代码结构如下：

// 当切换了市/区时，执行watch中的监听函数
watch: {
  async nowAreaCode(areaCode, val) {
    this.mainLogic()
  }
},
async mounted(){
    this.mainLogic()
},
methods: {
   async mainLogic(){
      await this.initMap(areaCode)
      this.addBoundary(areaCode)
      if (areaCode) {
        this.addStreetOverlay(areaCode)
      } else {
        this.addDistrictOverlay()
      }
   }
   // 初始化地图和掩膜
   async initMap(areaCode) {
     ...   
   },
   // 显示各区的边界线
   addBoundary(areaCode){
     ...
   },
   // 显示各区中心的聚合点，获取数据后调用createOverlay
   addDistrictOverlay() {
      ...
   },
   // 显示各街道中心的聚合点，获取数据后调用createOverlay
   addStreetOverlay(areaCode){
     ...
   },
   // 创建聚合点
   createOverlay(property){
     ...
   }
}

创建区或街道中心的聚合点时，需要同时获取后台接口的数据，以及中心点的坐标，此时可以使用Promise.all来并发请求

   Promise.all([
        axios.post(‘report/getBuildingCount‘, param),
        axios.get(‘static/shenzhen_jd_center_gcj02.geojson‘)
      ]).then(res => {
      // do some work
      ...
   })

最终的效果：

原文：https://www.cnblogs.com/zealGIS/p/15208772.html