点聚合(包含权重信息) 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
});
});