开发 地图 JS API 2.0 进阶教程 海量点 海量点标记

海量点标记 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);

示例
中心
常见
问题
智能
客服