高德行政区划地图，区域划线，行政区划浏览

效果图

代码

<!--
 * @Author: DZM
 * @Date: 2022-03-16 18:25:07
 * @LastEditors: tianwang
 * @LastEditTime: 2022-03-16 18:57:13
 * @Description: 
-->
<template lang="">
  <div>
    <div ref="map" class="map"></div>
    <el-switch
      v-model="areaLineSwitch"
      @change="areaLineChange"
      active-text="开启"
      inactive-text="关闭">
    </el-switch>
  </div>
</template>
<script>
export default {
  data() {
    return {
      areaLineSwitch: false,
      adcode: '110000', // 北京
      map: null,
      districtExplorer: null,
      zoom: 8,
      center: [116.407387, 39.904179]
    }
  },
  methods: {
    // 区域划线开关事件处理
    areaLineChange(val) {
      this.areaLineSwitch = val;
      if (val) {
        this.drawAreaNode();
      } else {
        this.districtExplorer && this.districtExplorer.clearFeaturePolygons();
      }
    },
    initMap() {
      const map = new AMap.Map(this.$refs.map, {
        mapStyle: 'dark',
        zoom: this.zoom,
        center: this.center,
        features: ['bg', 'point', 'road'], // 支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）
        resizeEnable: true, // 监控地图容器尺寸变化，默认值为false
        expandZoomRange: true // 支持可以扩展最大缩放级别，和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级
      });
      return map
    },
    initDistrictExplorer() {
      const { map } = this;
      return new Promise((resolve, reject) => {
        AMapUI.loadUI(
          ["geo/DistrictExplorer"],
          DistrictExplorer => {
            resolve(new DistrictExplorer({ map, eventSupport: true }));
          }
          )
      });
    },
    // 区划编码（adcode），区域节点（AreaNode）
    // 绘制行政区划（子区划）
    drawAreaNode() {
      const { districtExplorer, adcode } = this;
      // 加载区域内容
      districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
        if (error) {
          console.error(error);
          return;
        }
        const colors = [
          "#F8E71C",
          "#00FFC6",
          "#5DFF00",
          "#EB2F96",
          "#FF6425",
          "#844AFF",
          "#00A8FF",
          "#F81C1C",
          "#00DBFF",
          "#D5FF39",
          "#87E8DE",
          "#FF85C0",
          "#52C41A",
          "#FAAD14",
          "#FFD8BF",
          "#D9F7BE"
        ];
        const colorLength = colors.length;
        // 绘制子级区划
        districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
          const fillColor = colors[i % colorLength];
          return {
            cursor: "default",
            bubble: true,
            strokeColor: "#fff", // 线颜色
            strokeWeight: 1, // 线宽
            strokeOpacity: 1, // 线透明度
            fillColor, // 填充色
            fillOpacity: 0.2 // 填充透明度
          };
        });
      });
    },
  },
  mounted() {
    this.map = this.initMap();
    this.initDistrictExplorer().then((districtExplorer) => {
      this.districtExplorer = districtExplorer;
    });
  }
}
</script>
<style scoped>
.map {
  width: 100%;
  height: calc(80vh);
}
</style>