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

海量标注 LabelMarker 最后更新时间: 2024年02月02日

当需要展示海量点标记时,可以使用海量标注AMap.LabelMarker代替AMap.MarkerAMap.LabelMarker不仅可以绘制图标,还可以为图标添加文字信息,样式配置等。

海量标注示例

提示

相比于Marker, LabelMarker支持避让功能,它不仅支持LabelMarker之间的避让,JS API 2.0 版本还支持地图底图标注避让,可以让您的Marker更加明显。

1、海量标注 LabelMarker

创建一个标注对象,首先要设置标注的位置,同时还可以通过 icon 和 text 属性设置图标和文字(也可以缺省)。

1

1.1 准备

成为开发者并创建 key

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

提示

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

2

1.2 创建地图

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

1.3 创建 LabelsLayer 图层

LabelsLayer 图层是用于承载 LabelMarker 标记的图层,因此所有创建的 LabelMarker标记都需要添加到 LabelsLayer 图层上才能最终展示在地图上。

const labelsLayer = new AMap.LabelsLayer({
  zooms: [3, 20],
  zIndex: 1000,
  collision: true, //该层内标注是否避让
  allowCollision: true, //不同标注层之间是否避让  
});
提示

collision属性控制同一个LabelsLayer标注层内的LabelMarker标注是否避让

allowCollision属性控制不同的LabelsLayer标注层之间的LabelMarker标注是否避让,JS API 2.0也可控制LabelMarker标注对地图底图图层标注的避让。

4

1.4 设置一个图标对象

//设置一个图标对象
const icon = {
  type: "image", //图标类型,现阶段只支持 image 类型
  image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //可访问的图片 URL
  size: [64, 30], //图片尺寸
  anchor: "center", //图片相对 position 的锚点,默认为 bottom-center
};
5

1.5 设置文字对象

//设置文字对象
const text = {
  content: "中邮速递易", //要展示的文字内容
  direction: "right", //文字方向,有 icon 时为围绕文字的方向,没有 icon 时,则为相对 position 的位置
  offset: [-20, -5], //在 direction 基础上的偏移量
  //文字样式
  style: {
    fontSize: 12, //字体大小
    fillColor: "#22886f", //字体颜色
    strokeColor: "#fff", //描边颜色
    strokeWidth: 2, //描边宽度
  },
};
6

1.6 创建 LabelMarker 标记

//创建 LabelMarker
const labelMarker = new AMap.LabelMarker({
  name: "标注", //此属性非绘制文字内容,仅为标识使用
  position: [116.466994, 39.984904],
  zIndex: 16,
  rank: 1, //避让优先级
  icon: icon, //标注图标,将 icon 对象传给 icon 属性
  text: text, //标注文本,将 text 对象传给 text 属性
});
注意

若无需同时展示图标与文字,你可以根据需要省略相应的参数。但至少需上传“图标(icon)”或“文字(text)”中的一项。

提示

LabelsLayer图层开启避让(collision:true)时,若两个LabelMarker标记发生重叠,rank值较高的LabelMarker标记将显示,而值较低的会被隐藏。

7

1.7 将 LabelMarker 标记添加到 LabelsLayer 图层上

将上面第四步已创建的 LabelMarker 对象添加到 第三步创建的 LabelsLayer 图层

//添加一个 labelMarker
labelsLayer.add(labelMarker);
提示
  • 批量添加 labelMarker
labelsLayer.add([labelMarker1, labelMarker2])
  • 移除 LabelMarker
labelsLayer.remove(labelMarker)
  • 批量移除 labelMarker
labelsLayer.remove([labelMarker1, labelMarker2])
8

1.8 将 LabelsLayer 添加到地图实例

map.add(labelsLayer);
9

1.9 为 LabelMarker 添加事件

LabelMarker 与其它覆盖物添加事件的方式一致,使用on() 的方式添加事件

labelMarker.on('click', function(e){
    labelMarker.setOpacity(0.5);
});

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

2.1 AMap.LabelsLayer

参数/方法

说明

类型 

参数值描述

zooms

标注层展示层级范围

Array

-

zIndex

标注层与其它图层的叠加顺序

Number

-

collision

标注层内的标注是否避让

Boolean

true | false

allowCollision

标注层内的标注是否允许其它标注层对它避让

Boolean

true | false

labelsLayer.add()

labelMarker添加到标注层上

Function

添加单个标注或标注数组

labelsLayer.remove()

labelMarker从标注层上移除

Function

可移除单个标注或标注数组

2.2 AMap.LabelMarker

参数/方法

说明

类型 

参数值描述

name

标注名称

String

作为标注标识使用

position

标注位置

AMap.LngLat|

Array

经纬度对象或经纬度构成的一维数组。例如:

AMap.LngLat(116.39,39.9) |

[116.39, 39.9]

zIndex

同一LabelsLayer内标注显示层级

Number

数字越大越靠前

rank

避让优先级

Number

优先级用于labelsLayer支持避让时,rank值大的标注会避让掉rank值低的标注

icon

标注图标设置

Object

-

type

图标类型

String

现阶段只支持image类型

image

图标 url

String

-

size

图标大小

Size

-

anchor

图标锚点

String

锚点位置对应设置的position位置,详见点标记的锚点位置

text

标注文本设置

Object

-

content

文本标注的内容

String

该属性为直接显示在标注上的文本内容

direction

文本标注方位,若设置了icon,则direction是以 icon为中心的偏移,若未设置icon,则相对 position偏移

String

 可选值:'top'|'right'|'bottom'|'left'|'center'

offset

偏移量

Pixel

direction基础上的偏移

style

文本样式设置

Object

-

fontSize

文字大小

Number

-

fillColor

文字颜色

String

使用16进制颜色代码赋值

strokeColor

文字描边颜色

String

使用16进制颜色代码赋值

strokeWidth

描边宽度

Number

-

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