高德地图点聚合分组_高德地图 设置两级聚合

因为是公司项目所以只能放部分代码片段。
这边说一下思路。

因为高德地图的API是不提供分组功能的，如果我放一个麦当劳和肯德基的图标会自动聚合，但这并不是我想要的。
所以我就在render的时候手动筛选出这个聚合点的麦当劳和肯德基有多少个，直接把这个聚合点使用Dom进行替换。

//这里说一下iconList是我这些图标的数组对象。
// point是存放各种经纬度的，我进行筛选的
  this.iconList.map((item) => {
        if (item.checked) {
          if (this.point.data[item.desc].length > 0) {
            for (let el of this.point.data[item.desc]) {
              let icon = new AMap.Icon({
                size,
                image: item.url,
                imageSize: size,
              });
              // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
              let marker = new AMap.Marker({
                icon: icon,
                position: [el.longitude, el.latitude],
                extData: { flag: item.desc, ...el },
                // shadow: shadow,
                offset: new AMap.Pixel(-18, -18), //设置文本标注偏移量
                // content: `<div class='info'>${item.departName}</div>`, //设置文本标注内容
                // direction: 'right' //设置文本标注方位
              });

              markers.push(marker);
            } //for循环括号
          } //if
        }
        // iconList循环结束
      });
      //marker里面最主要的就是extData存放一个标识符能进行分组筛选
      map.plugin(["AMap.MarkerClusterer"], () => {
        this.cluster = new AMap.MarkerClusterer(
          map, // 地图实例
          markers, // 海量点组成的数组
          {
            zoomOnClick: false,
            renderClusterMarker: (ctx) => {
              let str = ``;
              let arr = [];
              // 深拷贝
              this.deepClone(this.iconList, arr);
              //
              arr.map((item) => {
                // 把所有点都塞到对应的对象里面
                item.list = [];
                this.deepClone(
                  ctx.markers.filter((item1) => {
                    return item1.getExtData().flag == item.desc;
                  }),
                  item.list
                );
              });
              // 循环添加dom
              let indexList = [];
              arr.map((item, index) => {
                if (item.list && item.list.length > 0) {
                  indexList.push(item.desc);
                  // 判断当前品牌在地图上展示的索引
                  let zIndex = indexList.indexOf(item.desc);
                  str += `<div class="cluster-box" style="top:${
                    zIndex * 18 + 24
                  }px">
                    <img class="cluster-logo" src="${item.img}"  />
                    <img class="cluster-border" src="${border}" >
                    <div class="cluster-num">${item.list.length}</div>
                   </div>`;
                }
              });

              str = `<div style="position:relative;width:65px;height:${
                indexList.length * 22
              }px">${str}</div>`;
              ctx.marker.setContent(str);
              // ctx.markers[1].show()
            },
          }
        );
      });
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77