高德地图海量点

高德地图海量点

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

    海量点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    		 
    // 创建 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 
    1
    2
    3
    4
    5
    		 
    for (let j = 0; j < this.eventMarkers.length; j++) {
         if(this.eventMarkers[j].w.name == listids[i]){
               this.eventMarkers[j].hide();
          }
    }
posted @ 2021-03-15 10:06  lianggl  阅读(697)  评论(0)    收藏  举报