点聚合 MarkerCluster 最后更新时间: 2023年03月23日

亲手试一试

下载完整代码

在不同的地图缩放级别对海量的数据点进行聚合展示。目前点聚合插件在点的数量在10万以内时可以保持较好的性能。

提示

点聚合支持用户自定义点标记。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

点聚合 MarkerCluster

创建方式如下：

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

创建图标样式

var styles = [{
    url:"imgs/1.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/2.png",
    size:new AMap.Size(32,32),
    offset:new AMap.Pixel(-16,-30)
},
{
    url:"imgs/3.png",
    size:new AMap.Size(48,48),
    offset:new AMap.Pixel(-24,-45), 
    textColor:'#CC0066'
}];

创建聚合点数据

var points = [
 {lnglat: ["108.939621", "34.343147"] },
 {lnglat: ["113.370643", "22.938827"] },
 {lnglat: ["112.985037", "23.15046"] },
 {lnglat: ["110.361899", "20.026695"] },
 {lnglat: ["121.434529", "31.215641"] },
...
];

提示

聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段。

添加聚合组件

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

查看全部属性和方法

按索引聚合示例