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

1.1 准备

1.2 创建地图

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

1.3 创建 LabelsLayer 图层

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

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

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

1.5 设置文字对象

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

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 属性
});

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

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

//添加一个 labelMarker
labelsLayer.add(labelMarker);

labelsLayer.add([labelMarker1, labelMarker2])

labelsLayer.remove(labelMarker)

labelsLayer.remove([labelMarker1, labelMarker2])

1.8 将 LabelsLayer 添加到地图实例

map.add(labelsLayer);

1.9 为 LabelMarker 添加事件

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

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