vue 高德图层---省市区行政图层显示

官网文档：https://lbs.amap.com/api/javascript-api-v2/guide/layers/districtlayer

var map;
var distProvince;
  
initMap() {
        //初始化地图
        AMapLoader.load({
          key: '申请的key',
          version: '2.0',//需要使用JSAPI 2.0版本。若从1.x版本升级，之前的图层和点标记等方法有改动，可参考官网升级指南：https://lbs.amap.com/api/javascript-api-v2/update
          Loca: {
            version: '2.0',//需要使用2.0版本，与JSAPI 2.0版本对应
          }
        }).then((AMap) => {
          map = new AMap.Map('container', {
            zoom: 12, //级别，地图放大倍数
            center: [120.41, 36.05], //中心点坐标
            viewMode: '3D', //使用3D视图
            mapStyle: "amap://styles/darkblue",//样式
          });
          
          //创建省市简易行政区图层
          distProvince = new AMap.DistrictLayer.Province({
            zIndex: 10, //设置图层层级
            zooms: [2, 15], //设置图层显示范围
            adcode: "370200", //设置行政区 adcode
            depth: 2, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级，2：区县
          });
          // 设置行政区图层样式
          distProvince.setStyles({
            "stroke-width": 2, //描边线宽
            fill: function (data) {
              //设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
              //回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
              //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
              return "rgba(14,91,141,0.55)";
            },
          });
          //将简易行政区图层添加到地图
          map.add(distProvince);
        }).catch((e) => {
          console.log(e);
        });
      },