【高德地图】点的分组聚合

​

 有的时候我们需要在地图上渲染大量的点，为了让视觉上的效果更美观，我们需要用到点聚合，也就是地图随着缩放层级的不同，某区域的点聚合到一起，并且显示该区域点的统计数量，如下图

​编辑

// 渲染点
function pointRender(context) {
   let isActive = false;
   let extData = null;
   let type = 0;
   if (context.data) {
     type = context.data[0].info.type;
     extData = context.data[0].info;
     isActive = mapStore.currentId === context.data[0].info.id;
   }
   const countNum = context.count > 1 ? context.count : '';
   setMarkerStyle(type, countNum, isActive, context.marker, extData);// 设置点样式
}

// 创建点聚合
this.markerCluster = new AMap.MarkerCluster(this.amap, pointList, {
   renderClusterMarker: pointRender,
   renderMarker: pointRender,
});

 但是有时我们希望可以看到不同类型点，聚合后分别的统计数据，参考网上的很多方法，基本都是在渲染点的时候监听pointRender方法返回的marker，根据marker的不同类型再做聚合效果，这样就会特别麻烦。其实我们可以先将点分好类，重写点渲染的方法，再创建多个点聚合实例去解决这个问题，方便又高效。

// 渲染点
function pointRender(context, type?: number) {
   let isActive = false;
   let extData = null;
   if (context.data) {
     type = context.data[0].info.type;
     extData = context.data[0].info;
     isActive = mapStore.currentId === context.data[0].info.id;
   }
   const countNum = context.count > 1 ? context.count : '';
   setMarkerStyle(type, countNum, isActive, context.marker, extData);// 设置点样式
}

// 创建点聚合1
this.markerCluster1 = new AMap.MarkerCluster(this.amap, pointList1, {
   renderClusterMarker: (context) => pointRender(context, pointType.type1),
   renderMarker: pointRender,
});
// 创建点聚合2
this.markerCluster2 = new AMap.MarkerCluster(this.amap, pointList2, {
   renderClusterMarker: (context) => pointRender(context, pointType.type2),
   renderMarker: pointRender,
});
....

​编辑

至此便解决点的分组聚合问题^-^ 

​