海量点标记 MassMarks 最后更新时间: 2023年03月23日
当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类。
提示
AMap.MassMarks 并不是普通的覆盖物,它实际上是由海量点组成的一个地图图层, 目前仅适用于html5浏览器。
准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
海量标注 MassMarks
创建方式如下:
1
创建地图
const map = new AMap.Map('container',{
zoom: 10, //设置地图显示的缩放级别
center: [116.397428, 39.90923], //设置地图中心点坐标
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D' //设置地图模式
});
2
创建样式对象
var style = {
url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址
size: new AMap.Size(11,11), // 图标大小
anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量,基准点为图标左上角
}
提示
如果想为海量点添加多种点样式,可以创建多个 AMap.StyleObject 对象。
// 创建样式对象, JSAPI 2.0 支持显示设置 zIndex, zIndex 越大约靠前,默认按顺序排列
var style = [{
url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11),
// zIndex: 每种样式图标的叠加顺序,数字越大越靠前
zIndex: 3,
}, {
url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(7, 7),
zIndex: 2,
}, {
url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(5, 5),
zIndex: 1,
}];
3
创建海量点对象,设置点样式
var massMarks = new AMap.MassMarks({
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: style // 设置样式对象
});
4
创建 MassMarks 展现的数据集
var data = [{
lnglat: [116.405285, 39.904989], //点标记位置
name: 'beijing',
id:1
}, // {}, …,{}, …
];
提示
设置样式索引的点标记数组。
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
} //, …,{}, …
];
5
设置 MassMarks 展现的数据集
massMarks.setData(data);
6
将 massMarks 添加到地图实例
massMarks.setMap(map);