高德地图添加海量点标记

• bug1：使用普通点标记超过1000就会卡顿甚至卡死，所以使用高德的海量点标记api
• bug2：页面初始化就显示点，需要在地图加载后再掉接口获取点在调标记方法，否则会出现标记点的时候地图还没有加载完成的情况
• 重点：循环创建点对象赋值给数组的属性，方便删除；其他项目这样存储点，点击事件数据出现错乱，建一个新数组，将点赋值给arr[i]即可

import AMapLoader from "@amap/amap-jsapi-loader";
import icon1 from "./components/img/index4-tab1.png";
import icon2 from "./components/img/index4-tab2.png";
import icon3 from "./components/img/index4-tab3.png";
import icon4 from "./components/img/index4-tab4.png";
import icon5 from "./components/img/index4-tab5.png";
import icon6 from "./components/img/index4-tab6.png";
import fireIcon from "./components/img/3d-red.png";
//秘钥
window._AMapSecurityConfig = {
  securityJsCode: "秘钥",
};

// -----------地图--------------
    initAMap() {
      AMapLoader.load({
        key: "130cca3be68a2ff0fd5ebb6de25e4eac", // 申请好的Web端开发者Key，首次调用 load 时必填
        // version: "v1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: [
        //   "AMap.ControlBar",
        //   "AMap.ToolBar",
        //   "AMap.Weather",
        //   "AMap.CitySearch",
        //   "AMap.Marker",

        //   "AMap.MouseTool",
        //   "AMap.PolyEditor",
        //   "AMap.Driving",
        //   "AMap.Polyline",
        //   "AMap.Geolocation",
        //   "AMap.GraspRoad",
        //   "AMap.Geocoder",
        //   "AMap.GeometryUtil.ringArea",
        //   "AMap.DistrictSearch",
        //   "AMap.MoveAnimation",
        // ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerMap", {
            // 设置地图容器id
            rotateEnable: true,
            pitchEnable: true,
            zoom: 13,
            pitch: 50,
            rotation: -15,
            viewMode: "3D", //开启3D视图,默认为关闭
            zooms: [2, 20],
            center: [119.419251, 32.400703],
            mapStyle: "amap://styles/blue", //设置地图的显示样式
          });

          // 工具条
          // var controlBar = new AMap.ControlBar({
          //   position: {
          //     right: "10px",
          //     top: "10px",
          //   },
          // });
          // this.map.addControl(controlBar);

          // var toolBar = new AMap.ToolBar({
          //   position: {
          //     right: '40px',
          //     top: '110px'
          //   }
          // });
          // this.map.addControl(toolBar)

          this.map.on("complete", () => {
            console.log("地图加载完成");
            // *****海量点标记-------
            // 创建 AMap.LabelsLayer 图层
            this.layer = new AMap.LabelsLayer({
              zooms: [2, 20],
              zIndex: 1000,
              collision: false,
            });
            // 将图层添加到地图
            this.map.add(this.layer);

            // -----掉接口获取点信息，然后调取标记点的方法-----
            getFireStationListApi({
              unitLevel: 3,
            }).then((res) => {
              res.data.forEach((item) => {
                item.type = 2;
                item.marker = null;
              });
              this.$set(this.tab[1], "list", res.data);
              this.createMarker(res.data);
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 创建海量点标记
    createMarker(arr = []) {
      if (arr.length != 0) {
        // 清除地图上所有图形
        // this.map.clearMap();

        arr.map((item) => {
          item.marker = new AMap.LabelMarker({
             // 手动纠偏坐标
            position: new AMap.LngLat(
              item.type == 3 ? item.longitude * 1 + 0.0054 : item.longitude * 1,
              item.type == 3 ? item.latitude * 1 - 0.0018 : item.latitude * 1
            ),
            zIndex: 16,
            rank: 1, //避让优先级
            icon: {
              type: "image", //图标类型，现阶段只支持 image 类型
              image: [icon1, icon2, icon3, icon4, icon5][item.type - 1],
              size: [
                [40, 40],
                [30, 30],
                [20, 20],
                [30, 30],
              ][item.type * 1 - 1], //图片尺寸
              anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            },
            text: {
              content: [
                item.name,
                item.deptName,
                "",
                "",
                // item.resourcesName,
                // item.resourcesName,
              ][item.type - 1], //要展示的文字内容
              direction: "bottom", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
              offset: [-2, 0], //在 direction 基础上的偏移量
              //文字样式
              style: {
                fontSize: 12, //字体大小
                fillColor: "cyan", //字体颜色
                strokeColor: "#fff", //描边颜色
                strokeWidth: 0, //描边宽度
              },
            },
          });

          if (item.type == 1) {
            // 为marker绑定click事件
            item.marker.on("click", (e) => {
              
            });
          }
          if (item.type == 3) {
            // 为marker绑定click事件
            item.marker.on("click", (e) => {
              console.log(item);
            });
          }

          this.layer.add(item.marker);
        });

        //自动适配到合适视野范围
        //无参数，默认包括所有覆盖物的情况
        // this.map.setFitView();
        this.map.setCenter(this.position || [119.419251, 32.400703]); //设置地图中心点
      }
    },
    
    // 删除海量点
    removeMarkers(arr = []) {
      arr.forEach((item) => {
        this.layer.remove(item.marker);
        item.marker = null;
      });
      this.map.setCenter(this.position || [119.419251, 32.400703]); //设置地图中心点
    },