高德地图多点卡顿

项目运用高德地图出现多点卡顿的问题解决思路以及参考文档：

https://lbs.amap.com/demo/javascript-api-v2/example/mass-markers/labelmarker-mass

https://lbs.amap.com/api/javascript-api-v2/documentation#labelmarker

运动高德地图中的标注和标注图层-海量点这一demo进行修改。

PS：

此处有一个注意的点是Marker的时候控制倾斜角度是angle，但是海量点（LabelMarker之类）的时候是用rotation

主要代码呈现如下：

此处为各个坐标的转换方式，相对应的代码见map文件夹 下的 地图坐标系之间的转换方法 这一文章

http://218.56.180.213:8043/zh/web/Map/pointChange

import { wgs84togcj02 } from "@/utils/GCJ02WGS84";

/* 初始化地图 */
    initMap() {
      AMapLoad.then((AMap) => {
        this.AMap = AMap;
        this.marker,
          (this.map = new AMap.Map("map", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            zooms: [4, 20], //地图显示的缩放级别范围
            center: wgs84togcj02(118.669, 37.4337), //初始化地图中心点位置
          }));
        this.infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          offset: new AMap.Pixel(18, -55),
        });
      }).catch((e) => {
        console.log(e);
      });
    },
    /* 设置车辆样式 */
    initStyle(item) {
      let last_pos = JSON.parse(item.last_pos);
      let direction = parseInt(last_pos.direction);
      var style = {};
      //在线车辆样式
      if (item.state == "e_line_on") {
        style.carImg = require("/src/assets/images/car_1.png");
        style.content =
          '<div class="amap-info-window" style="border:1px solid #42b408;color: #42b408;">' +
          item.car_number +
          '<div class="amap-info-sharp" style=" border-top: 8px solid  #42b408;"></div>' +
          "</div>";
      }
      //静止车辆样式
      if (item.state == "e_line_sleep") {
        style.carImg = require("/src/assets/images/car_0.png");
        style.content =
          '<div class="amap-info-window" style="border:1px solid red;color: red;">' +
          item.car_number +
          '<div class="amap-info-sharp" style=" border-top: 8px solid red;"></div>' +
          "</div>";
      }
      // 离线车辆样式
      if (item.state == "e_line_down") {
        style.carImg = require("/src/assets/images/car0_0.png");
        style.content =
          '<div class="amap-info-window" style="border:1px solid #9b9a9a;color: #9b9a9a;">' +
          item.car_number +
          '<div class="amap-info-sharp" style=" border-top: 8px solid #9b9a9a;"></div>' +
          "</div>";
      }
      return style;
    },
    /* 绘制车辆 */
    initCar(fitView) {
      AMapLoad.then((AMap) => {
        let that = this;
        if (that.clusters) {
          that.map.remove(that.clusters);
        }
        that.clusters = [];
        let items = that.deviceList.items;

        this.map.on('complete', function () {
            // 创建 AMap.LabelsLayer 图层
            var layer = new AMap.LabelsLayer({
                zoom: 16, //初始化地图级别
                zooms: [4, 20], //地图显示的缩放级别范围
                zIndex: 1000,
                collision: false
            });

            // 将图层添加到地图
            that.map.add(layer);
            var markers = [],color;
            //循环车辆
            for (var i = 0; i < items.length; i++) {
                let item = items[i];
                let last_pos = JSON.parse(items[i].last_pos);
                if (!last_pos) {
                  continue;
                }
                let wgs = last_pos.wgs.split(",");
                let lon = parseFloat(wgs[1]);
                let lat = parseFloat(wgs[0]);
                let style = that.initStyle(items[i]);
                //小车
                var curData = {
                    position: wgs84togcj02(lon, lat),
                    rotation: last_pos.direction,
                    zIndex: 1000,
                    icon:{
                      type: 'image',
                      image: style.carImg,
                      size: [18, 30],
                      extData: { ...items[i] }
                    }
                };
                //文字
                if (item.state == "e_line_on") {
                  color="#42b408"
                }else if(item.state == "e_line_sleep"){
                  color="#ff0000"
                }else if(item.state == "e_line_down"){
                  color="#9b9a9a"
                }
                var curDataText = {
                    position: wgs84togcj02(lon, lat),
                    zIndex: 1002,
                    text:{
                      offset: [-0, -30],
                      content:item.car_number,
                      direction: 'center',
                      style:{
                        fillColor:color,
                        strokeWidth: 0,
                        padding: [15, 15],
                        backgroundColor: '#ffffff',
                        borderColor: color,
                        borderWidth: 1,
                      }
                    },
                };
                var labelMarker = new AMap.LabelMarker(curData);
                markers.push(labelMarker);
                var labelMarkerText = new AMap.LabelMarker(curDataText);
                markers.push(labelMarkerText);
                labelMarker.on('click', function(){
                    that.labelMarkerclick(item, wgs84togcj02(lon, lat));
                });
            }
            // 一次性将海量点添加到图层
            layer.add(markers);
        });
      });
    },
    /* 点击事件的方法统一 */
    labelMarkerclick(item, position) {
      var that = this;
      gpsCarinfo(item.imei).then((res) => {
        let data = res.data;
        let newAddres = JSON.parse(item.last_pos).addr; //新地址
        console.log(newAddres);
        let last_pos = JSON.parse(data.lastPos);
        var geocoder = new this.AMap.Geocoder({
          // city: "010", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        let wgs = last_pos.wgs.split(",");
        let lnglat = wgs84togcj02(parseFloat(wgs[1]), parseFloat(wgs[0]));
        geocoder.getAddress(lnglat, function (status, result) {
          var address = result.regeocode.formattedAddress;
          // console.log(result)
          //自定义的内容以及展示形式
          var title = data.plateNo;
          var infoWindowContent =
            '<div class="customDiv">' +
            '<p class="carMap_info_p"><span class="carMapSpan">车牌号：</span>' +
            data.plateNo +
            "</p>" +
            '<p class="carMap_info_p"><span class="carMapSpan">所属单位：</span>' +
            data.deptName +
            "</p>" +
            '<p class="carMap_info_p"><span class="carMapSpan">车型：</span>' +
            data.carModel +
            "</p>" +
            '<p class="carMap_info_p"><span class="carMapSpan">日里程：</span>' +
            that.parseDevspeed(item.day_distance) +
            "Km</p>" +
            '<p class="carMap_info_p"><span class="carMapSpan">时间：</span>' +
            parseTime(last_pos.time) +
            "</p>" +
            '<p class="carMap_info_p" title="' +
            newAddres +
            '"><span class="carMapSpan">当前位置信息：</span>' +
            newAddres +
            "</p>" +
            '<p class="carMap_info_p"><span class="carMapSpan" >当前时速：</span>' +
            ((last_pos.speed ? last_pos.speed : 0) / 10).toFixed(2) +
            "Km/h</p>" +
            '<div class="carBottom">' +
            '<div class="carBottomEvery">重新定位</div>' +
            '<div class="carBottomEvery">轨迹回放</div>' +
            '<div class="carBottomEvery" onclick="goMore()">更多信息</div>' +
            "</div>" +
            "</div>";

          that.infoWindow.open(that.map, position);
          that.infoWindow.setContent(that.initWindow(title, infoWindowContent));
          that.map.setCenter(position);
          that.fitView(that.infoWindow);
          let btns = document.getElementsByClassName("carBottomEvery");
          //给按钮添加单击事件
          for (let i = 0; i < btns.length; i++) {
            let a = btns[i];
            // let text = a.innerHTML
            a.onclick = function () {
              // console.log(i/3)
              if (i / 3 == 0) {
                //重新定位
                that.goUpdate(item.imei);
              } else if (i / 3 == 1 / 3) {
                //轨迹回放
                that.goPlay(item.imei);
              } else if (i / 3 == 2 / 3) {
                //更多信息    入参id
                let imei = item.imei;
                that.goMore(imei);
              }
            };
          }
        });
      });
    },

此处let的items即为实际应用中的数组，相关的展示等细节需要根据实际情况去做逻辑判断展示等。