官方文档
AMap.LabelsLayer图层参考手册
AMap.LabelMarker参考手册
标注和标注图层demo
标注和标注图层-文字标注demo
标注和标注图层-海量点demo

海量标注 LabelMarker

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

创建 LabelsLayer

  • LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。 ```javascript // 创建设备图层方法 createLayer() { this.layer = {}; // 创建 AMap.LabelsLayer 图层 this.layer = new AMap.LabelsLayer({ zooms: [3, 20], zIndex: 111, animation: true, // 淡入动画，默认为开启，v1.4.15 新增属性 collision: false, // 碰撞检测，默认为开启，v1.4.15 新getExtData增属性 }); // 将图层添加到地图 this.map.add(this.layer); }, initMarkers(deviceType) { let param = { regionId: this.regionId, regionLevel: this.regionLevel, deviceType: deviceType }; getDeviceList(param).then(res => { let deviceList = res.data; if (res.data == ‘’ || res.data.length == 0) { return } //创建labelMarker海量点 this.multiMarkers = createLabelMarkers(map, param.deviceType, deviceList); // 一次性将海量点添加到图层 layer.add(multiMarkers); //海量点点击事件 for (let i = 0; i < multiMarkers.length; i++) {
    1.     this.multiMarkers[i].on('click', (e) => {
    2.     this.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
    3.  })
    } }); },
    // 切换设备时隐藏Markers hideMarkers() { for (let j = 0; j < this.multiMarkers.length; j++) { this.multiMarkers[j].hide(); this.layer.setMap(null) } }, 
  1. ```javascript
  2. //循环数据创建LabelMarker
  3. export function createLabelMarkers(map, deviceType, deviceList) {
  4.     let multiMarkers = [];
  5.     for (let i = 0; i < deviceList.length; i++) {
  6.         let curPosition = wgs84togcj02(deviceList[i].longitude, deviceList[i].latitude);
  7.         let icon = getIcon(deviceType, deviceList[i].liveStatus);
  8.         let labelMarker = new AMap.LabelMarker({
  9.             position: curPosition,
  10.             icon: icon,
  11.             extData: {data: deviceList[i], deviceType: deviceType},
  12.             name: deviceList[i]
  13.         });
  14.         multiMarkers.push(labelMarker);
  15.     }
  16.     return multiMarkers;
  17. }
  18. //获取地图上的设备Icon
  19. function getIcon(deviceType, liveStatus) {
  20.     let img = getImg(deviceType, liveStatus);
  21.     let f36 = fontSize.f36
  22.     let f72 = fontSize.f72
  23.     let icon = {
  24.         type: 'image',
  25.         anchor: 'bottom-center',
  26.         image: img,
  27.         angel: 0,
  28.         retina: true,
  29.         size: [f36, f72]
  30.     };
  31.     return icon;
  32. }
  34. //获取地图上的设备Icon
  35. function getImg(deviceType, liveStatus) {
  36.     let img;
  37.     switch (deviceType) {
  38.         case 2:
  39.             img = liveStatus == 1 ? 'rsu-point.png' : 'rsu-point_offline.png';
  40.             break
  41.         case 200:
  42.             img = liveStatus == 1 ? 'camera-point.png' : 'camera-point_offline.png';
  43.             break
  44.         case 202:
  45.             img = liveStatus == 1 ? 'radar-point.png' : 'radar-point_offline.png';
  46.             break
  47.         case 204:
  48.             img = liveStatus == 1 ? 'mec-point.png' : 'mec-point_offline.png';
  49.             break
  50.         case 203:
  51.             img = liveStatus == 1 ? 'lidar-point.png' : 'lidar-point_offline.png';
  52.             break
  53.         case 207:
  54.             img = liveStatus == 1 ? 'info-board-point.png' : 'info-board-point_offline.png';
  55.             break
  56.         case 208:
  57.             img = liveStatus == 1 ? 'waterSensor-point.png' : 'waterSensor-point_offline.png';
  58.             break
  59.         case 209:
  60.             img = liveStatus == 1 ? 'fogSensor-point.png' : 'fogSensor-point_offline.png';
  61.             break
  62.         default:
  63.             break
  64.     }
  65.     return '/platform/static/imgs/device/' + img;
  66. }