高德JSAPI两种海量点对比

---

前言

1. 对比两种海量点代码区别。
2. 对比两种海量点绘制所用时间。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、海量标注 LabelMarker

示例代码如下：

var layer = new AMap.LabelsLayer({
  zooms: [3, 20],
  zIndex: 1000,
  collision: false,
});

// 将图层添加到地图
map.add(layer);

var markers = [];
var icon = {
  type: "image",
  image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  size: [11, 12],
  anchor: "bottom-center",
};

for (var i = 0; i < citys.length; i++) {
  var curPosition = citys[i].lnglat;
  if (citys[i].style == 1) {
    icon.image = "https://webapi.amap.com/images/mass/mass0.png";
  } else {
    icon.image =
      "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
  }
  var curData = {
    position: curPosition,
    icon,
  };
  var labelMarker = new AMap.LabelMarker(curData);

  markers.push(labelMarker);
}

// 一次性将海量点添加到图层
layer.add(markers);

二、海量点标记 MassMarks

示例代码如下：

 var style = [
     {
       url: "https://webapi.amap.com/images/mass/mass0.png",
       anchor: new AMap.Pixel(6, 6),
       size: new AMap.Size(11, 12),
       zIndex: 3,
     },
     {
       url: "https://webapi.amap.com/images/mass/mass1.png",
       anchor: new AMap.Pixel(4, 4),
       size: new AMap.Size(11, 12),
       zIndex: 2,
     },
     {
       url: "https://webapi.amap.com/images/mass/mass2.png",
       anchor: new AMap.Pixel(3, 3),
       size: new AMap.Size(11, 12),
       zIndex: 1,
     },
   ];

   var mass = new AMap.MassMarks(citys, {
     opacity: 0.8,
     zIndex: 111,
     cursor: "pointer",
     style: style,
   });

   mass.setMap(map);

三、区别对比

官方对比

当需要在地图添加千级以上的点标记时，LabelMarker 是代替 Marker 的更好选择。不同于 MassMarks，LabelMarker 不仅可以绘制图标，还可以为图标添加文字信息，且万级以上数据也具有较好性能，配置也更加灵活。另外，LabelMarker 之间还支持避让功能，JSAPI 2.0 版本还支持地图标注避让 LabelMarker，可以让您的marker 更加明显。

示例绘制时间对比

LabelMarker绘制生成时间：

MassMarks绘制生成时间：

总结

MassMarks相比LabelMarker，代码更为简洁，配置简单。但大数据量下，生成时间不如LabelMarker，灵活程度不如LabelMarker。