【map】高德地图点聚合—按索引聚合

更具产品需求，需要做一个地图显示房源信息的功能
先展示吧：



使用的是高德地图API，一开始看文档怎么也找不到AMap的IndexCluster插件，只好直接从案例入手了,找案例数据结构，F12看了下，找到了2个JSON数据，一个是地区，一个是街道。然后更具需求修改数据结构与信息框内容、样式等等

• https://a.amap.com/jsapi_demos/static/data/community.js
• https://a.amap.com/jsapi_demos/static/data/district.js

JSON数据结构与代码：

const roomData = [{
    "lnglat": {className: "AMap.LngLat", lng: 114.177087, lat: 22.313861},
    "district": "旺角",
    "community": "高级公寓",
    "building": "旺角高级公寓",
    "area": "旺角",
    "city": "香港"
 },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.174986, lat: 22.310604},
    "district": "油麻地",
    "community": "油麻地一期(四室两厅)",
    "building": "油麻地一期",
    "area": "油麻地",
    "city": "香港"
  },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.194512, lat: 22.326271},
    "district": "九龙城",
    "community": "九龙城二期公寓（三房）",
    "building": "九龙城二期公寓",
    "area": "九龙城",
    "city": "香港"
  },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.193718,lat: 22.320204},
    "district": "九龙城一期",
    "community": "九龙城一期公寓（三房）",
    "building": "九龙城一期公寓",
    "area": "九龙城",
    "city": "香港"
  },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.171547, lat: 22.319974},
    "district": "太子",
    "community": "太子一期公寓",
    "building": "太子一期",
    "area": "太子",
    "city": "香港"
  },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.175074, lat: 22.31805},
    "district": "极家",
    "community": "极家公寓(H13)",
    "building": "极家公寓(H13)",
    "area": "极家",
    "city": "香港"
  },
  {
    "lnglat": {className: "AMap.LngLat", lng: 114.180711, lat: 22.439183},
    "district": "大埔墟",
    "community": "大埔墟(山海别墅)",
    "building": "大埔墟别墅",
    "area": "大埔墟",
    "city": "香港"
  }
]
const district = {
  '香港': {
    "center" : "114.171202,22.277469",
  },
  '油尖旺区': {
    "center": "114.173331,22.311704",
  },
  '九龙城区': {
    "center" : "114.192846,22.31251",
  },
  '大埔区': {
    "center" : "114.171743,22.445653",
  }
};
// 绘制初始化地图
var map = new AMap.Map('container', {
  zoom:15,//级别
  center: [114.177087, 22.313861],//中心点坐标
  viewMode:'3D'//使用3D视图
});

var count = roomData.length;

function clusterMarkers() {
  var markerList = [];
  var marker = new AMap.Marker({
      map: map,
  })
  markerList.push(marker);
  return markerList;
}
// 设置不同组群不同缩放级别
var clusterIndexSet = {
  city: {
      minZoom: 2,
      maxZoom: 10,
  },
  district: {
      minZoom: 10,
      maxZoom: 12,
  },
  area: {
      minZoom: 12,
      maxZoom: 15,
  },
  community: {
      minZoom: 15,
      maxZoom: 22,
  },
};
// 设置样式
function getStyle(context) {
  var clusterData = context.clusterData; // 聚合中包含数据
  var index = context.index; // 聚合的条件
  var count = context.count; // 聚合中点的总数
  var marker = context.marker; // 聚合绘制点 Marker 对象
  var color = [
      '8,60,156',
      '66,130,198',
      '107,174,214',
      '78,200,211',
  ];
  var indexs = ['city','district','area','community'];
  var i = indexs.indexOf(index['mainKey']);
  var text = clusterData[0][index['mainKey']];
  var size = Math.round(30 + Math.pow(count / roomData.length, 1 / 5) * 70);
  if(i <= 2){
      var extra = '<span class="showCount">'+ context.count +'套</span>';
      text = '<span class="showName">'+ text +'</span>';
      text += extra;
  } else {
      size = 12 * text.length + 20;
  }
  var style = {
      bgColor: 'rgba(' + color[i] + ',.8)',
      borderColor: 'rgba(' + color[i] + ',1)',
      text: text,
      size: size,
      index: i,
      color: '#ffffff',
      textAlign: 'center',
      boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
  }
  return style;
}
function getPosition(context) {
  var key = context.index.mainKey;
  var dataItem = context.clusterData && context.clusterData[0];
  var districtName = dataItem[key];
  if(!district[districtName]) {
      return null;
  }
  var center = district[districtName].center.split(',');
  var centerLnglat = new AMap.LngLat(center[0], center[1]);
  return centerLnglat;
}
// 自定义聚合点样式
function _renderClusterMarker (context) {
  var clusterData = context.clusterData; // 聚合中包含数据
  var index = context.index; // 聚合的条件
  var count = context.count; // 聚合中点的总数
  var marker = context.marker; // 聚合点标记对象
  var styleObj = getStyle(context);
  // 自定义点标记样式
  var div = document.createElement('div');
  div.className = 'amap-cluster';
  div.style.backgroundColor = styleObj.bgColor;
  div.style.width = styleObj.size + 'px';
  if(styleObj.index <= 2) {
      div.style.height = styleObj.size + 'px';
      div.style.lineHeight = styleObj.size + 'px';
      // 自定义点击事件
      context.marker.on('click', function(e) {
          console.log(e)
          var curZoom = map.getZoom();
          if(curZoom < 20){
              curZoom += 1;
          }
          map.setZoomAndCenter(curZoom, e.lnglat);
      });
  }
  div.style.border = 'solid 1px ' + styleObj.borderColor;
  div.style.borderRadius = styleObj.size + 'px';
  div.innerHTML = styleObj.text;
  div.style.color = styleObj.color;
  div.style.textAlign = styleObj.textAlign;
  div.style.boxShadow = styleObj.boxShadow;
  div.style.fontSize = 14+'px'
  div.style.padding = `5px 0`;
  context.marker.setContent(div)
  // 自定义聚合点标记显示位置
  var position = getPosition(context);
  if(position){
      context.marker.setPosition(position);
  }
  context.marker.setAnchor('center');

};
// IndexCluster
var cluster = new AMap.IndexCluster(map, roomData, {
  renderClusterMarker: _renderClusterMarker,
  clusterIndexSet: clusterIndexSet,
});