海量点标记 MassMarks 最后更新时间: 2023年03月23日

亲手试一试

下载完整代码

当需要在地图展示数量为十万以内的点并且需要较好的性能表现时，可以使用 AMap.MassMarks 类。

提示

AMap.MassMarks 并不是普通的覆盖物，它实际上是由海量点组成的一个地图图层，目前仅适用于html5浏览器。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

海量标注 MassMarks

创建方式如下：

创建地图

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

创建样式对象

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,
}];

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

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

创建 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
} //, …,{}, …
];

设置 MassMarks 展现的数据集

massMarks.setData(data);

将 massMarks 添加到地图实例

massMarks.setMap(map);

查看全部属性和方法