Ionic/Angular下Mapbox GL结合Leaflet的L.MarkerClusterGroup聚合失效问题

核心问题原因 #

你现在的代码根本错误是混用了Mapbox GL JS和Leaflet两套不兼容的地图SDK API，两个库的图层、标记、地图实例都不能互通调用：

• L.MarkerClusterGroup是Leaflet生态的插件，只能作用于Leaflet的L.Map实例，不能添加到Mapbox GL JS的mapboxgl.Map实例上
• 你同时给每个点创建了两个标记：一个是Mapbox GL JS原生的mapboxgl.Marker直接加到地图上了，这就是你能看到标记但不会聚合的原因，因为实际显示的是没有加入聚合组的原生Marker；另一个是凭空创建的L.marker加到聚合组里，这个Leaflet标记根本没有对应样式也没加到正确的地图实例上
• 你在for循环里反复调用this.map.addLayer(this.clusters)，同一个图层重复添加N次也是报错的原因之一

修复方案 #

方案1：改用Leaflet全生态（保留MarkerClusterGroup） #

1. 首先把地图实例改成Leaflet的L.Map，加载Mapbox样式作为底图：

getCurrentCoordinates() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.latitude = resp.coords.latitude;
      this.longitude = resp.coords.longitude;
      // 替换为Leaflet地图实例
      this.map = L.map('mapBox', {
        center: [this.latitude, this.longitude],
        zoom: 16.15,
        maxZoom: 18
      });
      // 加载Mapbox样式作为Leaflet底图
      L.mapboxGL({
        style: 'mapbox://styles/cherniakovsky/ckn3idmad27xu17r1fb13a6rx',
        accessToken: '你的Mapbox AccessToken'
      }).addTo(this.map);
     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }

2. 修改标记加载逻辑，只创建Leaflet标记，全部加入聚合组，循环外只添加一次聚合图层：

loadPins() {
    // 先清空之前的聚合层内容
    this.clusters.clearLayers();
    for (const rec of this.chatRooms) {
      // 自定义图标用Leaflet的DivIcon实现
      const customIcon = L.divIcon({
        html: `<div style="background-image: url(${rec.img.filepath});width:50px;height:50px;border-radius:50%;background-size:cover;"></div>`,
        className: 'custom-marker',
        iconSize: [50, 50],
        iconAnchor: [25, 25]
      });
      // 注意Leaflet的LatLng是(纬度, 经度)顺序，你之前写反了
      const marker = L.marker([rec.location.latitude, rec.location.longitude], {icon: customIcon});
      // 绑定弹窗
      marker.bindPopup(this.definePopup(rec));
      // 弹窗打开后绑定点击事件
      marker.on('popupopen', () => {
        this.elementRef.nativeElement.querySelector('.chat-link')
          .addEventListener('click', () => this.openChat(rec));
      });
      // 加入聚合组
      this.clusters.addLayer(marker);
    }
    // 循环外只添加一次聚合层到地图
    this.map.addLayer(this.clusters);
}

方案2：全用Mapbox GL JS原生聚合能力（不需要Leaflet依赖） #

Mapbox GL JS本身就支持点聚合，不需要引入Leaflet和MarkerCluster插件，直接删除所有Leaflet相关代码即可：

• 你现有地图实例已经开启了cluster相关配置，不需要修改
• 直接把点位数据整理成GeoJSON格式，用Mapbox原生源和图层实现聚合，代码更简洁性能更好

内容的提问来源于stack exchange，提问作者Andrés Casas-Cordero