点聚合 MarkerCluster 最后更新时间: 2023年03月23日
在不同的地图缩放级别对海量的数据点进行聚合展示。目前点聚合插件在点的数量在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 = [
{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 为经纬度信息字段。
4
添加聚合组件
map.plugin(["AMap.MarkerClusterer"],function() {
cluster = new AMap.MarkerClusterer(
map, // 地图实例
points, // 海量点数据,数据中需包含经纬度信息字段 lnglat
{
styles: styles
});
});