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

最新推荐文章于 2025-03-18 13:06:00 发布

cjsnyxz

最新推荐文章于 2025-03-18 13:06:00 发布

阅读量1.7k

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/cjsnyxz/article/details/130779993

版权

文章介绍了如何在地图上处理大量点的渲染，通过点聚合技术，在不同缩放层级下聚合点并显示区域统计数量。当需要按类型区分点的统计时，建议先对点进行分类，然后创建多个点聚合实例，分别渲染，以此实现更高效、灵活的点分组聚合效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

// 渲染点
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,
});
....

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