海量点标记 最后更新时间: 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组件库 - 海量点展示」。
