开发 地图 JS API 2.0 进阶教程 海量点 点聚合(包含权重信息)

点聚合(包含权重信息) MarkerCluster 最后更新时间: 2023年05月10日

展示包含权重信息的点

提示

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

准备

成为开发者并创建 key

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

点聚合 MarkerCluster

创建方式如下:

1

创建地图

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

创建图标样式

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'
}];
3

创建聚合点数据

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 字段为可选数据,表示权重值,以权重高的点为中心进行聚合。

4

添加聚合组件

map.plugin(["AMap.MarkerCluster"],function() {
    cluster = new AMap.MarkerCluster(
        map,     // 地图实例
        points, // 海量点数据,数据中需包含经纬度信息字段 lnglat
        {
            styles: styles
        });
});
返回顶部 示例中心 常见问题 智能客服