海量点标记 MassMarks 最后更新时间: 2024年01月02日

亲手试一试

AMap.MassMarks并不是普通的覆盖物,它是由海量点组成的一个地图图层。

MassMarks和LabelMarker的区别在于,MassMarks不支持添加文本,但能自动生成海量点图层,而LabelMarker则需要用户手动添加LabelsLayer海量点图层。

1.1 准备

1.2 创建地图

const map = new AMap.Map("container", {
 zoom: 12, //地图级别
 center: [116.397428, 39.90923], //地图中心点
 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
 viewMode: "2D", //设置地图模式
});

1.3 创建海量点对象

样式设置

var style = {
 url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
 size: new AMap.Size(11, 11), //图标大小
 anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量,基准点为图标左上角
};

//创建样式对象,JS API 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: 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,
 },
 //, ...,{}, ...
];

数据集设置

var data = [
 {
 lnglat: [116.397455,39.909187], //经纬度
 name: "天安门",
 },
 {
 lnglat: [116.402394,39.937182],
 name: "南锣鼓巷",
 }, 
 //, ...,{}, ...
];

var data = [
 {
 lnglat: [116.397455,39.909187], //经纬度
 name: "天安门",
 style: 0, //该数据的取值为样式数组对应的对象索引
 },
 {
 lnglat: [116.402394,39.937182],
 name: "南锣鼓巷",
 style: 1,
 }, 
 //, ...,{}, ...
];

创建海量点实例

var massMarks = new AMap.MassMarks(data,{
 zIndex: 5, //海量点图层叠加的顺序
 zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
 style: style, //设置样式对象
});

1.4 将 massMarks 添加到地图实例

massMarks.setMap(map);

查看所有AMap.MassMarks属性和方法