高德地图JS API 区划浏览下钻DistrictExplorer

🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图JS API 普通点标记Marker
高德地图JS API 海量点标记LabelMarker
高德地图JS API 区划浏览DistrictExplorer
高德地图JS API 加载行政区边界AMap.Polygon
高德地图JS API AMap.MouseTool绘制

高德JS API DistrictExplorer行政区划浏览

「官方API」 「官方示例」

关于如何引入高德地图JS API方式 请移步前期文章高德JS API 常见使用方法（急救包）

高德行政区划浏览DistrictExplorer实例集成了地图下钻功能 亲测好用不伤脑👍

运行示例

主体介绍

DistrictExplorer（行政区划浏览） 提供了全国范围内到区县一级的行政区划数据（含边界），同时提供一些辅助功能，比如区划面绘制、事件监听，以及快速判断经纬度所属的子级区划等。

但是官方对DistrictExplorer做了目的性的取舍，重点针对两级浏览，

行政区划浏览 DistrictExplorer是以传入区划编码（adcode） 渲染区域面，有点击、移入、移出操作 优化需求效果可对此下手

另外 DistrictExplorer只能下钻渲染到区县区域，若想要继续下钻到街镇可以使用 👉AMap.GeoJSON。
通过渲染json绘制区域，在加载区县区域时把json效果叠在上面 后面也能做下钻展示街镇的区域效果
提示:街镇json需要付费购买。

1.先引入UI组件库

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

2.加载DistrictExplorer（模块名：ui/geo/DistrictExplorer）

//加载DistrictExplorer，loadUI的路径参数为模块名中 'ui/' 之后的部分 
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
    // 这里执行你的操作
});

全部代码下👇 （从官方示例扒了下来直接可用，但没有切换过渡效果）

<!-- Vue 2 Code -->
<template>
  <!-- 行政区划浏览示例-->
  <div id="index" ref="appRef">
    <!-- 地图 -->
    <div id="container" ref="mapRef"></div>
  </div>
</template>
<script>
var map; // 地图加载
var districtExplorer; // 行政区域实例
var currentAreaNode = null;
export default {
  name: "componentsMap",
  data() {
    return {
      timing: null,
      adcode: 100000,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => this.initMap());
  },
  beforeDestroy() {
    map?.destroy();
    map = null;
  },
  methods: {
    initMap() {
      map = new window.AMap.Map("container", {
        terrain: false, //关闭地形图
        showBuildingBlock: false, // 不显示3D楼块
        showLabel: false, // 取消地图层标注
        scrollWheel: true, // 开启缩放
        dragEnable: true, // 开启鼠标拖动
        doubleClickZoom: false, // 禁止双击
      });
      this.setMapUI();
    },
    // 加载行政区域组件
    setMapUI() {
      window.AMapUI.load(
        ["ui/geo/DistrictExplorer", "lib/$"],
        (DistrictExplorer, $) => {
          //创建行政区划实例
          districtExplorer = window.districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: map,
          });
          // 加载当前聚焦行政区域
          this.switch2AreaNode(this.adcode);

          //鼠标hover提示内容
          var $tipMarkerContent = $('<div class="tipMarker top"></div>');

          var tipMarker = new window.AMap.Marker({
            content: $tipMarkerContent.get(0),
            offset: new window.AMap.Pixel(0, 0),
            bubble: true,
          });
          //根据Hover状态设置相关样式
          function toggleHoverFeature(feature, isHover, position) {
            tipMarker.setMap(isHover ? map : null);

            if (!feature) {
              return;
            }

            var props = feature.properties;

            if (isHover) {
              //更新提示内容
              $tipMarkerContent.html(props.adcode + ": " + props.name);
              //更新位置
              tipMarker.setPosition(position || props.center);
            }

            //更新相关多边形的样式
            var polys = districtExplorer.findFeaturePolygonsByAdcode(
              props.adcode
            );
            for (var i = 0, len = polys.length; i < len; i++) {
              polys[i].setOptions({
                fillOpacity: isHover ? 0.5 : 0.2,
              });
            }
          }
          //监听feature的hover事件
          districtExplorer.on(
            "featureMouseout featureMouseover",
            function (e, feature) {
              toggleHoverFeature(
                feature,
                e.type === "featureMouseover",
                e.originalEvent ? e.originalEvent.lnglat : null
              );
            }
          );
          //监听鼠标在feature上滑动
          districtExplorer.on("featureMousemove", function (e, feature) {
            //更新提示位置
            tipMarker.setPosition(e.originalEvent.lnglat);
          });

          //feature被点击
          districtExplorer.on("featureClick", (e, feature) => {
            var props = feature.properties;
            //如果存在子节点
            // if (props.childrenNum > 0) {
            //切换聚焦区域
            this.switch2AreaNode(props.adcode);
            // }
          });

          //外部区域被点击
          districtExplorer.on("outsideClick", (e) => {
            districtExplorer.locatePosition(
              e.originalEvent.lnglat,
              (error, routeFeatures) => {
                if (routeFeatures && routeFeatures.length > 1) {
                  //切换到省级区域
                  this.switch2AreaNode(routeFeatures[1].properties.adcode);
                } else {
                  //切换到全国
                  this.switch2AreaNode(100000);
                }
              },
              {
                levelLimit: 2,
              }
            );
          });
        }
      );
    },
    //绘制某个区域的边界
    renderAreaPolygons(areaNode) {
      var colors = [
        "#3366cc",
        "#dc3912",
        "#ff9900",
        "#109618",
        "#990099",
        "#0099c6",
        "#dd4477",
        "#66aa00",
        "#b82e2e",
        "#316395",
        "#994499",
        "#22aa99",
        "#aaaa11",
        "#6633cc",
        "#e67300",
        "#8b0707",
        "#651067",
        "#329262",
        "#5574a6",
        "#3b3eac",
      ];
      //更新地图视野
      map.setBounds(areaNode.getBounds(), null, null, true);
      //清除已有的绘制内容
      districtExplorer.clearFeaturePolygons();
      //绘制子区域
      districtExplorer.renderSubFeatures(areaNode, function (feature, i) {
        var fillColor = colors[i % colors.length];
        var strokeColor = colors[colors.length - 1 - (i % colors.length)];

        return {
          cursor: "default",
          bubble: true,
          strokeColor: strokeColor, //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: fillColor, //填充色
          fillOpacity: 0.35, //填充透明度
        };
      });

      //绘制父区域
      districtExplorer.renderParentFeature(areaNode, {
        cursor: "default",
        bubble: true,
        strokeColor: "black", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: areaNode.getSubFeatures().length ? null : colors[0], //填充色
        fillOpacity: 0.35, //填充透明度
      });
    },
    //切换区域
    switch2AreaNode(adcode, callback) {
      let that = this;
      if (currentAreaNode && "" + currentAreaNode.getAdcode() === "" + adcode) {
        return;
      }
      that.loadAreaNode(adcode, function (error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        currentAreaNode = window.currentAreaNode = areaNode;
        //设置当前使用的定位用节点
        districtExplorer.setAreaNodesForLocating([currentAreaNode]);
        //切换区域后刷新显示内容
        districtExplorer.setHoverFeature(null);
        that.renderAreaPolygons(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    //加载区域
    loadAreaNode(adcode, callback) {
      districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
  },
};
</script>
<style lang="scss"  scoped>
#index {
  width: 1920px;
  height: 1080px;
  color: #ffffff;
  overflow: hidden;
  #container {
    width: 1920px;
    height: 1080px;
    z-index: 100;
  }
}
/* 地图移入tipMarker样式 */
::v-deep .tipMarker {
  color: #555;
  background-color: rgba(255, 254, 239, 0.8);
  border: 1px solid #7e7e7e;
  padding: 2px 6px;
  font-size: 12px;
  white-space: nowrap;
  display: inline-block;
}
.tipMarker:before,
.tipMarker:after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 5px 5px;
}
.tipMarker.top {
  transform: translate(-50%, -110%);
}
.tipMarker.top:before,
.tipMarker.top:after {
  bottom: -9px;
  left: 0;
  right: 0;
  border-top-color: rgba(255, 254, 239, 0.8);
}
.tipMarker.top:before {
  bottom: -10px;
  border-top-color: #7e7e7e;
}
</style>
    
    

html示例直接下载高德地图行政区划浏览-示例中心-JS API UI 组件HTML示例

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀