点聚合 MarkerCluster 最后更新时间: 2024年02月21日

本文介绍两种点聚合插件（AMap.MarkerCluster和AMap.IndexCluster），它们分别以距离和索引的维度对数据进行聚合展示，在点数10万以内能够保持较好的性能。下文将分别介绍两种聚合插件。

1、按距离聚合

1.1 准备

1.2 创建地图

const map = new AMap.Map("container", { zoom: 8, //地图级别 center: [116.405285, 39.904989], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 });

1.3 创建聚合点数据

var points = [ { weight: 8, lnglat: ["116.506647", "39.795337"] }, { weight: 1, lnglat: ["116.843352", "40.377362"] }, { weight: 1, lnglat: ["116.637122", "40.324272"] }, { weight: 1, lnglat: ["116.105381", "39.937183"] }, { weight: 1, lnglat: ["116.653525", "40.128936"] }, { weight: 1, lnglat: ["116.486409", "39.921489"] }, { weight: 1, lnglat: ["116.658603", "39.902486"] }, { weight: 1, lnglat: ["116.338033", "39.728908"] }, { weight: 1, lnglat: ["116.235906", "40.218085"] }, { weight: 1, lnglat: ["116.366794", "39.915309"] }, { weight: 1, lnglat: ["116.418757", "39.917544"] }, { weight: 1, lnglat: ["116.139157", "39.735535"] }, { weight: 1, lnglat: ["116.195445", "39.914601"] }, { weight: 1, lnglat: ["116.310316", "39.956074"] }, { weight: 1, lnglat: ["116.286968", "39.863642"] }, ];

1.4 自定义图标样式

• 完全自定义图标

//聚合点样式 var _renderClusterMarker = function (context) { //context 为回调参数， //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量 var clusterCount = context.count; //聚合点内点数量 context.marker.setContent( '<div style="background-color:#00ff00">' + clusterCount + "</div>" ); }; //非聚合点样式 var _renderMarker = function (context) { //context 为回调参数， //包含如下属性 marker:当前非聚合点 context.marker.setContent('<div style="background-color:#ff0000">1</div>'); };

• 自定义图标

var styles = [ { //聚合量在1-10时，聚合点的样式 url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址 size: new AMap.Size(32, 32), //图标显示图片的大小 offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值 textColor: "#fff", //文字的颜色 }, { //聚合量在11-100时，聚合点的样式 url: "//a.amap.com/jsapi_demos/static/images/green.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -16), textColor: "#fff", }, { //聚合量在101-1000时，聚合点的样式 url: "//a.amap.com/jsapi_demos/static/images/orange.png", size: new AMap.Size(36, 36), offset: new AMap.Pixel(-18, -18), }, ];

1.5 添加聚合组件

• 使用完全自定义图标方式

map.plugin(["AMap.MarkerCluster"], function () { cluster = new AMap.MarkerCluster( map, //地图实例 points, //海量点数据，数据中需包含经纬度信息字段 lnglat { gridSize: 60, //数据聚合计算时网格的像素大小 renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式 renderMarker: _renderMarker, //上述步骤的自定义非聚合点样式 } ); });

• 使用自定义图标方式

map.plugin(["AMap.MarkerCluster"], function () { cluster = new AMap.MarkerCluster( map, //地图实例 points, //海量点数据，数据中需包含经纬度信息字段 lnglat { styles: styles, } ); });

2、按索引聚合

2.1 创建地图

const map = new AMap.Map("container", { zoom: 8, //地图级别 center: [116.405285, 39.904989], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 });

2.2 创建点聚合数据

var points = [ { lnglat: ["116.506621867519", "39.925077049391"], building: "晨光家园", district: "朝阳区", city: "北京", }, { lnglat: ["116.464047215754", "39.871715123709"], building: "松榆西里", district: "朝阳区", city: "北京", }, { lnglat: ["116.557773237391", "39.903674644798"], building: "北花园街6号院", district: "朝阳区", city: "北京", }, { lnglat: ["116.40499876945", "39.958000356032"], building: "安定门外大街80号院", district: "东城区", city: "北京", }, { lnglat: ["116.412789588355", "39.957363077042"], building: "地坛北门", district: "东城区", city: "北京", }, ];

2.3 定义点聚合规则

var clusterIndexSet = { //定义点聚合规则 city: { minZoom: 2, maxZoom: 10, }, district: { minZoom: 10, maxZoom: 12, }, building: { minZoom: 12, maxZoom: 22, }, };

2.4 自定义图标样式

//聚合点样式 var _renderClusterMarker = function (context) { //context 为回调参数， //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量 var clusterCount = context.count; //聚合点内点数量 context.marker.setContent( '<div style="background-color:#00ff00">' + clusterCount + "</div>" ); };

2.5 添加聚合组件

map.plugin(["AMap.IndexCluster"], function () { indexCluster = new AMap.IndexCluster(map, points, { renderClusterMarker: _renderClusterMarker, //自定义聚合点样式 clusterIndexSet: clusterIndexSet, //聚合规则 }); });