示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 覆盖物 > 海量点标记 >

高德 开发 地图 JS API 教程 覆盖物 海量点标记

更新时间:2018年10月16日

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

1. 海量点标记  MassMarks

2. 点聚合 MarkerClusterer

海量点标记 MassMarks

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

1. 创建海量点对象,设置点样式:

// 创建样式对象
var styleObject = new AMap.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组件库 - 海量点展示」。

示例中心 功能
在线体验
常见问题