最終實現(xiàn)效果铃彰，相同的類型就會折疊：

效果圖.png

js代碼

    creatMap() {
      // 定義地圖默認(rèn)中心點(diǎn)坐標(biāo)
      var center = new TMap.LatLng(22.971870333, 113.373452833);
      //創(chuàng)建map對象晌区，初始化地圖
      var map = new TMap.Map("container", {
        center: center, //設(shè)置地圖中心點(diǎn)坐標(biāo)
        zoom: 16 //設(shè)置地圖縮放級別
      });
      this.map = map;
      this.markers = [];
      this.creatMarkerCluster("Battery", "1");
      this.creatMarkerCluster("Bicycle", "2");
      this.creatMarkerCluster("Cabinet", "3");
      // this.creatRegion();  生成多邊形區(qū)域代碼
      // this.creatPark();  生成多邊形區(qū)域代碼
    },
    // 生成點(diǎn)聚焦函數(shù)
    creatMarkerCluster(type, deviceType) {
      let imgIconList = new Array(3);
      imgIconList[0] = imgIcon1;
      imgIconList[1] = imgIcon2;
      imgIconList[2] = imgIcon3;
      // debugger
      let map = this.map;
      this.markers = [];
      // 1忌傻、標(biāo)點(diǎn)
      let markerCluster = new TMap.MarkerCluster({
        id: "container" + type,
        map: map, //指定地圖容器
        enableDefaultStyle: false, // 啟用默認(rèn)樣式
        minimumClusterSize: 2,
        //點(diǎn)標(biāo)記數(shù)據(jù)數(shù)組
        geometries: this.convertMarkers(deviceType), //this.markers
        zoomOnClick: true, // 點(diǎn)擊簇時放大至簇內(nèi)點(diǎn)分離
        gridSize: 60, // 聚合算法的可聚合距離
        averageCenter: true, // 每個聚和簇的中心是否應(yīng)該是聚類中所有標(biāo)記的平均值
        maxZoom: 25 // 采用聚合策略的最大縮放級別
      });

      var clusterBubbleList = [];
      var markerGeometries = [];
      var marker = null;

      // 監(jiān)聽聚合簇變化
      markerCluster.on("cluster_changed", function(e) {
        // 銷毀舊聚合簇生成的覆蓋物
        if (clusterBubbleList.length) {
          clusterBubbleList.forEach(function(item) {
            item.destroy();
          });
          clusterBubbleList = [];
        }
        markerGeometries = [];

        // 根據(jù)新的聚合簇數(shù)組生成新的覆蓋物和點(diǎn)標(biāo)記圖層
        // debugger
        var clusters = markerCluster.getClusters();
        clusters.forEach((item,index) => {
          console.log(clusters,'clusters')
          if (item.geometries.length > 1) {
            let clusterBubble = new ClusterBubble({
              map,
              position: item.center,
              content: item.geometries.length
            });
            clusterBubble.on("click", () => {
              map.fitBounds(item.bounds);
            });
            clusterBubbleList.push(clusterBubble);
          } else {
            markerGeometries.push({
              position: item.center,
              properties: {
                //自定義屬性
                title: `marker${index}`,
                sn: item.geometries[0].properties.sn
              }
            });
          }
        });
        if (marker) {
          // 已創(chuàng)建過點(diǎn)標(biāo)記圖層沉唠，直接更新數(shù)據(jù)
          marker.setGeometries(markerGeometries);
        } else {
          // 創(chuàng)建點(diǎn)標(biāo)記圖層
          marker = new TMap.MultiMarker({
            map,
            styles: {
              default: new TMap.MarkerStyle({
                width: 34,
                height: 42,
                anchor: {
                  x: 17,
                  y: 21
                },
                src: imgIconList[+deviceType - 1]
              })
            },
            geometries: markerGeometries
          });
          //初始化infoWindow
          var infoWindow = new TMap.InfoWindow({
            map: map,
            position: new TMap.LatLng(20, 110),
            offset: { x: -5, y: -32 } //設(shè)置信息窗相對position偏移像素
          });
          // 監(jiān)聽標(biāo)注點(diǎn)擊事件
          marker.on("click", function(evt) {
            // console.log(evt, "1111");
            //設(shè)置infoWindow
            infoWindow.open(); //打開信息窗
            infoWindow.setPosition(evt.geometry.position); //設(shè)置信息窗位置
            infoWindow.setContent(evt.geometry.properties.sn); //設(shè)置信息窗內(nèi)容
          });
        }
      });
      // 以下代碼為基于DOMOverlay實現(xiàn)聚合點(diǎn)氣泡
      function ClusterBubble(options) {
        TMap.DOMOverlay.call(this, options);
      }

      ClusterBubble.prototype = new TMap.DOMOverlay();

      ClusterBubble.prototype.onInit = function(options) {
        this.content = options.content;
        this.position = options.position;
      };

      // 銷毀時需要刪除監(jiān)聽器
      ClusterBubble.prototype.onDestroy = function() {
        this.dom.removeEventListener("click", this.onClick);
        this.removeAllListeners();
      };

      ClusterBubble.prototype.onClick = function() {
        this.emit("click");
      };

      // 創(chuàng)建氣泡DOM元素
      ClusterBubble.prototype.createDOM = function() {
        var dom = document.createElement("div");
        dom.classList.add(`clusterBubble${type}`);
        dom.innerText = this.content;
        dom.style.cssText = [
          "width: " + 40 + "px;",
          "height: " + 40 + "px;",
          "line-height: " + 40 + "px;"
        ].join(" ");

        // 監(jiān)聽點(diǎn)擊事件疆虚，實現(xiàn)zoomOnClick
        this.onClick = this.onClick.bind(this);
        // pc端注冊click事件，移動端注冊touchend事件
        dom.addEventListener("click", this.onClick);
        return dom;
      };
      ClusterBubble.prototype.updateDOM = function() {
        if (!this.map) {
          return;
        }
        // 經(jīng)緯度坐標(biāo)轉(zhuǎn)容器像素坐標(biāo)
        let pixel = this.map.projectToContainer(this.position);

        // 使文本框中心點(diǎn)對齊經(jīng)緯度坐標(biāo)點(diǎn)
        let left = pixel.getX() - this.dom.clientWidth / 2 + "px";
        let top = pixel.getY() - this.dom.clientHeight / 2 + "px";
        this.dom.style.transform = `translate(${left}, ${top})`;

        this.emit("dom_updated");
      };
    },
    // 生成點(diǎn)的函數(shù)
    convertMarkers(type) {
      let markers = [];
      this.workbenchList.map((item, index) => {   // this.workbenchList起始數(shù)據(jù)
        if (item.lat && item.lng && item.lat !== "0" && !item.lng !== "0") {
          if (item.deviceType === type) {
            markers.push({
              id: item.id, //點(diǎn)標(biāo)記唯一標(biāo)識满葛，后續(xù)如果有刪除径簿、修改位置等操作，都需要此id
              styleId: "myStyle", //指定樣式id
              position: new TMap.LatLng(item.lat, item.lng), //點(diǎn)標(biāo)記坐標(biāo)位置
              properties: {
                //自定義屬性
                title: `marker${index}`,
                sn: "設(shè)備編號：" + item.sn
              }
            });
          }
        }
      });
      return markers;
    },