vue高德地图实现海量点分组（用icon图标替换海量点）动态循环出groupStyleMap集合

async created () {
    // 已载入高德地图API，则直接初始化地图  需要注意高德地图引入的版本，版本太低可能会导致地图不加载，MapKey需要自己去申请
    await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}&plugin=AMap.DistrictSearch`);
    await remoteLoad(`https://webapi.amap.com/ui/1.1/ui/control/BasicControl/examples/`);
    await remoteLoad('http://webapi.amap.com/ui/1.1/main.js');
  },
  methods: {
    //_point是海量点数据，数据格式为
    //[{id: "s1",latitude: 40.2487,longitude: 113.3646,nodeIds: "1",nodeNames: "",stationName: ""},
    //{id: "s2",latitude: 40.2484,longitude: 113.3643,nodeIds: "2",nodeNames: "",stationName: ""}]
    //注意海量点的id和经纬度是必需的，其他属性根据具体情况而定
    initPoint(_point) {
      let AMap = this.AMap = window.AMap;
      //创建地图
      let map = new AMap.Map('container', {
        center: [112.548093,37.874332],
        zoom: 6.5,
        mapStyle: 'amap://styles/whitesmoke',
      });
      this.map = map;//用this是为了全局变量
      // 需要引入PointSimplifier
      AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
        let data = _point;//点数据
        //下边是点的逻辑
        let pointSimplifierIns, groupStyleMap, dataItems;
        groupStyleMap = {};
        //高德的示例这里我改了一下，高德里是直接列出来了，太长了（高德原示例具体参考下边的链接：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pointsimplifier/multi-icons）我这里写了循环
        //loop数组中数据是为了下边groupStyleOptions方法中id去对应不同样式
        let loop = ['03034010200203', '03034010200205', '03034010200201', '030001', '030002', '030003', '030004']
        loop.forEach((arr) => {
          let result = getStyle(arr);
          groupStyleMap[arr] = {
              pointStyle: {
                //绘制点占据的矩形区域  注意require路径的引入方式
                content: PointSimplifier.Render.Canvas.getImageContent(
                  require('@/assets/imgs/' + result.url), onIconLoad, onIconError),
                //宽度
                width: result.width,
                //高度
                height: result.height,
                //定位点为中心
                offset: ['-50%', '-50%'],
                fillStyle: null,
              }
          }
        })
        pointSimplifierIns = new PointSimplifier({
          zIndex: 115,//层级
          map: that.map, //所属的地图实例
          getPosition: function (item) {//获取电的坐标
            return item.lngLatLine;
          },
          getHoverTitle: function (dataItem, idx) {//点的悬浮方法
            return dataItem.stationName;
          },
          //使用GroupStyleRender
          renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
          renderOptions: {
            //点的样式 我都设置为0是怕点的宽高数据太大会盖过图标的大小，这里可以随意设置
            pointStyle: {
              width: 0,
              height: 0,
              fillStyle: '#A2D0FA'
            },
            pointHoverStyle: {
              width: 0,
              height: 0,
              content: '',
              fillStyle: null,
              lineWidth: 0,
              strokeStyle: null
            },
            getGroupId: function (item, idx) {
              return item._fullType;
            },
            groupStyleOptions: function (gid) {
              return groupStyleMap[gid];
            },
          }
        });
        //鼠标移入事件
        pointSimplifierIns.on('pointMouseover', function (e, record) {});
        //鼠标移出事件
        pointSimplifierIns.on('pointMouseout', function (e, record) {});
        // 地图右键事件
        that.map.on('rightclick', function (e) {});
        window.pointSimplifierIns = pointSimplifierIns;
        //点的单击事件
        pointSimplifierIns.on('pointClick', function (e, record) {}
        //图标渲染事件
        function onIconLoad() {
          pointSimplifierIns.renderLater();
        }
        function onIconError(e) {
          console.log(e, 'e')
        }
      })
    },
    function getStyle (gid) {
  	  let url = '';
  	  let width = parseInt('');
      let height = parseInt('');
      if (gid == '03034010200203') {
        url = '1.png';
    	width = 20;
   	   height = 20;
 	  } else if (gid == '03034010200205') {
    	url = '2png';
    	width = 20;
    	height = 20;
  	}
  	return {url, width, height};
	}
  }