高德地图海量点

2020-12-05

高德地图解决多个点卡顿和websocket持续打点多引起的卡顿的问题

官方案例 https://lbs.amap.com/api/javascript-api/example/marker/labelsmarker-mass

api https://lbs.amap.com/api/javascript-api/reference/overlay#labelMarker

海量点

data(){
    return{
        layer:''
    }
}

// 创建 AMap.LabelsLayer 图层
this.layer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 111,
    // 关闭标注避让，默认为开启，v1.4.15 新增属性
    animation: false,
    // 关闭标注淡入动画，默认为开启，v1.4.15 新增属性
    collision: false,
});
// 将图层添加到地图
this.map.add(this.layer);

var data = res.data;
 var icon = {
     type: 'image',
     image: this.ImgUrl + 'event_up.png',
     anchor: 'bottom-center',
     angel: 0,
     retina: true
 };
 // 普通点
 var normalMarker = new AMap.Marker({
     offset: new AMap.Pixel(0, 0),
 });
 for (let i = 0; i < data.length; i++) {
  let html = '<div class="labelWrap">' +
                 '<div class="bg">' +
                 '<div class="dWrap"><span>事件名称</span><span>' + data[i].eventName + '</span></div>'+
                 '<div class="dWrap"><span>发生地点</span><span>' + data[i].rspName + '</span></div>'+
                 '<div class="dWrap"><span>上报时间</span><span>' + data[i].time + '</span></div>'+
                 '<div class="dWrap"><span>事件来源</span><span>' + data[i].eventSource + '</span></div>'+
                 '</div>' +
                 '</div>';
 let curPosition = wgs84togcj02(data[i].lon, data[i].lat);
     var curData = {
     position: curPosition,
         icon,
         name:data[i].eventId,//自定义数据
     };
     var labelMarker = new AMap.LabelMarker(curData);
     // 事件
     var map = this.map;
     labelMarker.on('mouseover', function(e){
         var position = e.data.data && e.data.data.position;
         if(position){
             normalMarker.setContent(content);
             normalMarker.setPosition(position);
             map.add(normalMarker);
         }
     });
     labelMarker.on('mouseout', function(){
         map.remove(normalMarker);
     });
     this.eventMarkers.push(labelMarker);
 }
  // 一次性将海量点添加到图层
 this.layer.add(this.eventMarkers);

获取自定义数据 this.eventMarkers[i].w.name

匹配字段隐藏其中的海量点海量点没有删除的api

for (let j = 0; j < this.eventMarkers.length; j++) {
     if(this.eventMarkers[j].w.name == listids[i]){
           this.eventMarkers[j].hide();
      }
}