海量点标记 最后更新时间: 2021年01月22日
本章介绍在图面添加数量为万级以上的点标记的解决方案。包括：
1. 海量点标记 MassMarks
2. 点聚合 MarkerClusterer
海量点标记 MassMarks
当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层， 目前仅适用于html5浏览器。创建方式如下：
1. 创建海量点对象，设置点样式：
// 创建样式对象
var styleObject = {
url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址
size: new AMap.Size(11,11), // 图标大小
anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
}
var massMarks = new AMap.MassMarks({
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: styleObject // 设置样式对象
});2. 设置 MassMarks 展现的数据集：
var data = [{
lnglat: [116.405285, 39.904989], //点标记位置
name: 'beijing',
id:1
}, // {}, …,{}, …
];
massMarks.setData(data);
// 将海量点添加至地图实例
massMarks.setMap(map);如果想为海量点添加多种点样式，可以创建多个 AMap.StyleObject 对象， 以数组的方式添加到 massMarks 中。
// 样式对象数组
var styleObjectArr = [ styleObject1, styleObject2, styleObject3 ];
// 实例化 AMap.MassMarks
var massMarks = new AMap.MassMarks({
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: styleObjectArr //多种样式对象的数组
});
// 设置了样式索引的点标记数组
var data = [{
lnglat: [116.405285, 39.904989],
name: 'beijing',
id:1,
style: 0 // 该数据的样式取值styleObjectArr对应的样式索引
},{
lnglat: [116.405285, 39.904989],
name: 'beijing',
id:1,
style: 1
} //, …,{}, …
];
// 将数组设置到 massMarks 图层
massMarks.setData(data);
// 将 massMarks 添加到地图实例
massMarks.setMap(map);点聚合 MarkerClusterer
在不同的地图缩放级别对海量的数据点进行聚合展示。目前点聚合插件在点的数量在10万以内时可以保持较好的性能。点聚合支持用户自定义点标记。创建方式如下：
/利用styles属性修改点聚合的图标样式
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'
}];
//添加聚合组件
map.plugin(["AMap.MarkerClusterer"],function() {
cluster = new AMap.MarkerClusterer(
map, // 地图实例
markers, // 海量点组成的数组
{
styles: styles
});
});AMap.UI 组件库 PointSimplifier
AMap.UI 组件库组件库的 PointSimplifier 类可以支持百万数量级别的点标记绘制。经过算法优化，可以提供更好的展示性能。具体使用介绍和方法说明请 查看「 UI组件库 - 海量点展示」。
