高德地图按行政区划分填充色块

实现的效果：

项目地址：https://gitee.com/ling-xu/gaud-map-vue

关键代码：

<template>
  <div
    :id="idHash"
    class="container"
    style="z-index:1"
    @click="test()"
  />
</template>
<script>
import pin1 from '../assets/pin1.png'
import pin2 from '../assets/pin2.png'
import pin3 from '../assets/pin3.png'
import pin4 from '../assets/pin4.png'
import pin5 from '../assets/pin5.png'
import axios from 'axios'
export default {
  name: 'MapChart',
  props: {
    year: { type: String, default: '2021' },
    zoom: { type: Number, default: 4 },
    showData:{type:Boolean,default:false},
    locationList:Array,//产业数据-面店分布的地图显示传入数据
    getLocation:{type:Boolean,default:false}//首页-面店分布的图片显示
  },
  data: () => ({
    loading: false,
    idHash: 'MapContainer' + new Date().getTime(),
    disProvinces:'',
    map:{},
    depFeatures: ['bg', 'road', 'building', 'point']
  }),
  watch: {
    year() {
      this.refresh()
    },
    locationList(){
      this.refresh()
    },
  },
  mounted() {
    if (window.AMap === undefined) {
      const script = document.createElement('script')
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&plugin=AMap.MarkerClusterer,Map3D,AMap.DistrictLayer,AMap.DistrictSearch&callback=initAMap&key=de45c1a0e7ea44bea49388cea9cca2f7'
      document.head.appendChild(script)
      window.initAMap = () => {
        this.refresh()
      }
    } else {
      this.refresh()
    }
  },
  methods: {
    refresh() {
      let that=this
      if (!window.AMap) {
        return
      }
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'province'
      };
      //直接通过经纬度构建mask路径
      const district = new AMap.DistrictSearch(opts);
      district.search('青海省', function(status, result) {
          const bounds = result.districtList[0].boundaries;
          const mask = []
          for(let i =0;i<bounds.length;i+=1){
              mask.push([bounds[i]])
          }
          const Map = new AMap.Map(that.idHash, {
              mask:mask,//只显示包裹起来的区域
              resizeEnable: false,
              center: [96.475745,35.841084],
              viewMode:'3D',
              // pitch:5,
              zoom:that.zoom,
              features: [],//初始色块模式下，不显示标注等信息
              mapStyle: 'amap://styles/021981e1781074e215441507a954df4b', //设置地图的显示样式
          });

          that.map=Map//把这里面创建的地图对象存起来，让这个指针指向它，后续要使用

          //点聚合数据处理
          if(that.showData){
            // 地图的数据由父组件传入
            that.updateMark(Map, that.locationList)
          }else if(that.getLocation){
            // 首页-面店分布的图片显示
            axios({
                url: 'diagram/getShopDistribute2',
                method: 'get', // default
                baseURL: 'http://47.115.140.114:5001/api/report/',
                headers: {'x-user-token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJiYW5rZm9ydGVzdDAwMSIsInN1YiI6ImxvZ2luLmxvZ2luIiwiaWF0IjoxNjI0NDY0MzkwLCJhdXRob3JpemF0aW9uIjp7fSwiYWFhIjoiYWFhIiwiZGVwdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJsb2dpblRpbWUiOiIyMDIxLTA2LTI0IDAwOjA2OjMwIiwidW5pdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJwcm92aW5jZSI6IjQ0MDAwMCIsImNpdHkiOiI0NDAxMDAiLCJ1bml0Q29kZSI6ImxhbWlhbiIsInJlZGlzVG9rZW4iOiI2NmExOTA4Yy0yYjcwLTRjYmQtYTI0ZS0xMjFiODBiZTEzMzQiLCJ0ZW5hbnRJZCI6ImxhbWlhbiIsInN0YWZmVHlwZTIiOiI0IiwiZGVwdENvZGUiOiJsYW1pYW4iLCJleHAiOjE2MjQ0NjYxOTAsInVzZXJuYW1lIjoiYmFua2ZvcnRlc3QwMDEifQ.2H3Mcjyqqmeqs2WRbfugmZQQGmzJw5cRnGDND_NKmAM'},
            }).then(res => {
              that.updateMark(Map, res.data.locationList)
              console.log("aaa",res.data.locationList)
            })
          }
          //按行政区填充色块
          that.initPro(Map)
          //按行政区描边
          that.borderLine('海西蒙古族藏族自治州',Map)
          that.borderLine('海东市',Map)
          that.borderLine('海南藏族自治州',Map)
          that.borderLine('海北藏族自治州',Map)
          that.borderLine('果洛藏族自治州',Map)
          that.borderLine('黄南藏族自治州',Map)
          that.borderLine('玉树藏族自治州',Map)
          that.borderLine('西宁市',Map)
          
      });
    },

    // 创建市区的颜色块
    initPro(map) {
        const that=this
        const code = 630000;//青海省代码
        const dep = 1;  //按市区划分
        var disProvince=this.disProvinces
        disProvince && disProvince.setMap(null);
        disProvince = new AMap.DistrictLayer.Province({
            zIndex: 12,
            adcode: [code],
            depth: dep,
            styles: {
                'fill': function (properties) {
                    // properties为可用于做样式映射的字段，包含
                    // NAME_CHN:中文名称
                    // adcode_pro
                    // adcode_cit
                    // adcode
                    var adcode = properties.adcode;
                    return that.getColorByAdcode(adcode);
                },
                // 'province-stroke': 'cornflowerblue',
                'city-stroke': '#3078AC', // 中国地级市边界
                // 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
            }
        });
        disProvince.setMap(map);
    },

    // 颜色辅助方法
    getColorByAdcode(adcode) {
        const colors={
          630100: "#2c54cf",
          630200: "#17307c",
          632200: "#204699",
          632300: "#1c3077",
          632500: "#2b47ac",
          632600: "#17307c",
          632700: "#204699",
          632800: "#17307c",
        }
        return colors[adcode];
    },

    /**
     * 更新标记点
     */
    updateMark(Map, points) {
      // 位置标记
      const Markers = []
      for (var i = 0; i < points.length; i += 1) {
        if (points[i]) {
          Markers.push(new AMap.Marker({
            position: points[i].split(','),
            offset: new AMap.Pixel(-15, -15)
          }))
        }
      }
      let str=[{
        url: pin5,
        size: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-100, -100),
        textSize:40,
        textColor:'#353535'
      }, {
        url: pin4,
        size: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-100, -100),
        textSize:40,
        textColor:'#353535'
      }, {
        url: pin3,
        size: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-100, -100),
        textSize:40,
        textColor:'#353535'
      }, {
        url: pin2,
        size: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-100, -100),
        textSize:40,
        textColor:'#353535'
      }, {
        url: pin1,
        size: new AMap.Size(100, 100),
        offset: new AMap.Pixel(-100, -100),
        textSize:40,
        textColor:'#353535'
      }]
      new AMap.MarkerClusterer(Map, Markers, {
        styles: str,
        gridSize: 60,
        minClusterSize:1
      })
    },
    //行政区描边的功能
    borderLine(city,Map){
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      };
       //直接通过经纬度构建mask路径
      const district = new AMap.DistrictSearch(opts);
      district.search(city, function(status, result) {
          const bounds = result.districtList[0].boundaries;
           //添加描边
          for(let i =0;i<bounds.length;i+=1){
              new AMap.Polyline({
                  path:bounds[i],
                  strokeColor:'#1a77aa',
                  strokeWeight:10,
                  map:Map
              })
          }
      })
    },
    //重新给地图增加标注信息
    setFeature(Map){
      const _that=this
      Map.setFeatures(_that.depFeatures);
    },
    test(){
      this.setFeature(this.map)
    }
  }
}
</script>
<style lang='less' scoped>
.container {
  height: 100%;
}
</style>