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

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

当需要高效展示海量点标记,但不需要展示文本类信息时,推荐使用AMap.MassMarks。本文介绍如何添加海量点标记。

海量点示例

提示

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

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

1、添加海量点标记

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

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

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), //图标显示位置偏移量,基准点为图标左上角
};
提示

如果想为海量点添加多种点样式,可以将多个样式对象放在数组Array里。

//创建样式对象,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, //设置样式对象
});
4

1.4 将 massMarks 添加到地图实例

massMarks.setMap(map);

2、本章涉及的属性及方法说明

2.1 AMap.MassMarks(data,opts)

参数/方法

说明

类型 

data

海量点数据参数

Array<Object>

lnglat

经纬度

Array

style

样式索引值

Object

opts

海量点参数

Object

zIndex

图层叠加的顺序值,0表示最底层

Number

zooms

支持的缩放级别范围

Array

style

用于设置点的样式

Array<Object>

url

图标的地址

String

size

图标的尺寸

例:new AMap.Size(11,11)

anchor

图标显示位置偏移量

例:AMap.Pixel(5,5)

zIndex

点展示优先级,默认为使用样式的索引值

Number

 

返回顶部 示例中心 常见问题 智能客服 公众号
二维码