MapBox多GeoJSON标注聚类重叠，如何合并为单个聚类？

我之前在使用MapBox iOS SDK做聚类功能时，也碰到过一模一样的问题——多个GeoJSON数据源各自生成聚类，同一区域挤开好几个聚类标记，看起来特别混乱。其实核心原因很简单：每个GeoJSON对应的MGLShapeSource是独立的聚类计算单元，它们会分别对自己的点数据做聚类计算，自然会在同一区域产生重叠的聚类结果。

要解决这个问题，关键思路是把所有GeoJSON的数据合并到同一个聚类源里，让MapBox基于全量数据统一计算聚类。下面给你具体的Swift实现方案，也补充下Android（Java）的思路参考：

Swift实现步骤 #

1. 合并多个GeoJSON的Feature数据 #

先把所有GeoJSON文件里的Feature提取出来，合并成一个统一的MGLFeatureCollection：

// 加载并合并多个GeoJSON文件
func mergeGeoJSONs() -> MGLFeatureCollection? {
    var allFeatures: [MGLFeature] = []
    // 替换成你的GeoJSON文件名列表
    let geoJSONFilenames = ["shops.geojson", "restaurants.geojson", "parks.geojson"]
    
    for filename in geoJSONFilenames {
        guard let fileURL = Bundle.main.url(forResource: filename, withExtension: nil) else {
            print("找不到GeoJSON文件：\(filename)")
            continue
        }
        do {
            let data = try Data(contentsOf: fileURL)
            // 解析GeoJSON为FeatureCollection
            let featureCollection = try MGLShape(data: data, encoding: .utf8) as! MGLFeatureCollection
            if let features = featureCollection.features {
                allFeatures.append(contentsOf: features)
            }
        } catch {
            print("解析\(filename)失败：\(error.localizedDescription)")
        }
    }
    
    // 返回合并后的FeatureCollection
    return MGLFeatureCollection(features: allFeatures)
}

2. 基于合并后的数据源创建单一聚类源和图层 #

用合并好的FeatureCollection创建一个MGLShapeSource，并配置聚类参数，再添加对应的聚类图层、单个点图层和聚类数字标签图层：

override func viewDidLoad() {
    super.viewDidLoad()
    mapView.style?.delegate = self
    
    // 等待地图样式加载完成后再添加源和图层
}

// 实现MGLStyleDelegate方法，确保样式加载完成后操作
func styleDidLoad(_ style: MGLStyle) {
    guard let mergedCollection = mergeGeoJSONs() else { return }
    
    // 创建聚类数据源
    let clusterSource = MGLShapeSource(
        identifier: "unified-cluster-source",
        shape: mergedCollection,
        options: [
            .clustered: true,
            .clusterRadius: 50, // 聚类半径，可根据需求调整
            .clusterMaxZoom: 14 // 超过这个层级就不再聚类，显示单个点
        ]
    )
    style.addSource(clusterSource)
    
    // 1. 添加单个点图层（非聚类状态下显示）
    let singlePointLayer = MGLCircleStyleLayer(identifier: "single-point", source: clusterSource)
    singlePointLayer.circleColor = NSExpression(forConstantValue: UIColor.systemBlue)
    singlePointLayer.circleRadius = NSExpression(forConstantValue: 4)
    singlePointLayer.predicate = NSPredicate(format: "cluster != YES")
    style.addLayer(singlePointLayer)
    
    // 2. 添加聚类点图层
    let clusterLayer = MGLCircleStyleLayer(identifier: "clusters", source: clusterSource)
    clusterLayer.circleColor = NSExpression(forConstantValue: UIColor.systemRed)
    // 聚类点大小随缩放层级变化
    clusterLayer.circleRadius = NSExpression(format: "mgl_interpolate:withCurveType:parameters:stops:(zoomLevel, 'linear', nil, %@)", [12: 20, 20: 30])
    clusterLayer.predicate = NSPredicate(format: "cluster == YES")
    style.addLayer(clusterLayer)
    
    // 3. 添加聚类数字标签图层
    let clusterNumberLayer = MGLSymbolStyleLayer(identifier: "cluster-numbers", source: clusterSource)
    clusterNumberLayer.text = NSExpression(forKeyPath: "point_count")
    clusterNumberLayer.textColor = NSExpression(forConstantValue: UIColor.white)
    clusterNumberLayer.textFontSize = NSExpression(format: "mgl_interpolate:withCurveType:parameters:stops:(zoomLevel, 'linear', nil, %@)", [12: 12, 20: 18])
    clusterNumberLayer.predicate = NSPredicate(format: "cluster == YES")
    style.addLayer(clusterNumberLayer)
}

Android（Java）思路参考 #

在MapBox Android SDK里解决思路完全一致：

1. 加载多个GeoJSON文件，解析成FeatureCollection，把所有Feature合并到一个ArrayList<Feature>中；
2. 创建合并后的FeatureCollection mergedCollection = FeatureCollection.fromFeatures(mergedFeatures);；
3. 创建ClusterSource，将mergedCollection作为数据源，然后添加聚类相关的图层（CircleLayer、SymbolLayer等）。

这样所有点数据会在同一个聚类源里统一计算，就不会出现同一区域多个聚类重叠的问题了。

内容的提问来源于stack exchange，提问作者M.Strachan