高德地圖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) {
    await this.mainLogic()
  }
},
async mounted(){
    await 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
      ...
   })

最終的效果：