点聚合(包含权重信息) MarkerCluster 最后更新时间: 2023年05月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 = [
 { weight: 8, lnglat: ["108.939621", "34.343147"] },
 { weight: 1,  lnglat: ["113.370643", "22.938827"] },
 { weight: 1, lnglat: ["112.985037", "23.15046"] },
 { weight: 1, lnglat: ["110.361899", "20.026695"] },
 { weight: 1, lnglat: ["121.434529", "31.215641"] },
...
];

提示

聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。

添加聚合组件

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

查看全部属性和方法