高德地图按索引聚合实现

 drawQiye(markerList) {
      let that = this;
　　　　// 这里需要标准你要根据哪些字段进行聚合，以及在什么缩放范围内进行聚合
      const clusterIndexSet = {
        streetAddress: {
          minZoom: 10,
          maxZoom: 13,
        },
        entName: {
          minZoom: 13,
          maxZoom: 20,
        },
      };
　　　 // 这里需要单独给每个点一个lnglat字段，也就是最终点显示后需要展示的位置
      let newArrx = markerList.map((item) => {
        item.lnglat = [item.longitude, item.latitude];
        return item;
      });
      that.cluster = new AMap.IndexCluster(that.map, newArrx, {
        renderClusterMarker: that._renderClusterMarker,
        clusterIndexSet: clusterIndexSet,
      });
    },
　　// 这里根据聚合到哪个字段，来进行不同的样式展示
    _renderClusterMarker(context) {
      let that = this;
      const streetHtml = `<div>
        <p
        style="
          background-image: url(${require("../../assets/govfullview/map/b1.png")});
          width: 152px;
          height: 36px;
          color: #fff;
          display: flex;
          align-items: center;
        "
      >
        <img
          src="${require("../../assets/govfullview/map/t1.png")}"
          alt=""
          style="width: 24px; height: 24px; margin-left: 10px; margin-right: 16px"
        />
        <span> ${context.clusterData[0].streetAddress} ${context.count} </span>
         </p>
          <img src="${require("../../assets/govfullview/map/m1.png")}" alt="" style="width: 53px; height: 47px" />
        </div>`;
      const qiyeHtml = `<img style='width: 30px; height: 30px;' src='${
        context.clusterData[0].managementLevel == "REGISTER"
          ? require("../../assets/govfullview/map/qd1.png")
          : context.clusterData[0].managementLevel == "SIMPLE"
          ? require("../../assets/govfullview/map/qj1.png")
          : require("../../assets/govfullview/map/qz1.png")
      }'/>`;
      // 根据不同的聚合字段，绘制不同的形状
      if (context.index.mainKey == "streetAddress") {
        context.marker.setContent(streetHtml);
        context.marker.on("click", function(e) {
          var curZoom = that.map.getZoom();
          if (curZoom < 13) {
            curZoom = 13;
          }
          that.map.setZoomAndCenter(curZoom, e.lnglat);
        });
      }
      if (context.index.mainKey == "entName") {
        context.marker.setContent(qiyeHtml);
        context.marker.on("click", function(e) {
          console.log(context.clusterData[0]);
          const html = that.qiyeHtml(context.clusterData[0]);
          that.addInfoWindow(html, [e.lnglat.lng, e.lnglat.lat]);
        });
      }
      // 如果是街道则绘制街道的位置，这里代表给聚合后的大的字段绘制位置
      var position = that.getPosition(context);
      if (position) {
        context.marker.setPosition(position);
      }
      context.marker.setAnchor("center");
    },
　　// 这块是根据名称来获取到对应的位置
    getPosition(context) {
      var key = context.index.mainKey;
      var dataItem = context.clusterData && context.clusterData[0];
      var districtName = dataItem[key];
      if (!this.district[districtName]) {
        return null;
      }
      var center = this.district[districtName].center.split(",");
      var centerLnglat = new AMap.LngLat(center[0], center[1]);
      return centerLnglat;
    },

以上为参考代码

 

 

 

 上图为聚合后效果，下图为实际点的位置及图标