高德地图 JS API的覆盖物—海量点标记

本章介绍在图面添加数量为万级以上的点标记的解决方案。包括：

1. 海量点标记  MassMarks

2. 点聚合 MarkerClusterer

海量点标记 MassMarks

当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层， 目前仅适用于html5浏览器。创建方式如下：

1. 创建海量点对象，设置点样式：

JavaScript
// 创建样式对象
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 展现的数据集：

JavaScript
var data = [{
    lnglat: [116.405285, 39.904989], //点标记位置
    name: 'beijing',
    id:1
}, // {}, …,{}, …
];

massMarks.setData(data);

// 将海量点添加至地图实例
massMarks.setMap(map);

如果想为海量点添加多种点样式，可以创建多个 AMap.StyleObject 对象， 以数组的方式添加到 massMarks 中。

JavaScript
// 样式对象数组
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万以内时可以保持较好的性能。点聚合支持用户自定义点标记。创建方式如下：

JavaScript
/利用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 类可以支持百万数量级别的点标记绘制。经过算法优化，可以提供更好的展示性能。具体使用介绍和方法说明请