Mapbox GL JS中高效加载多点数据：解决addSource重复ID错误

本教程旨在解决mapbox gl js开发中常见的"there is already a source with this id"错误。当尝试通过循环为每个数据点重复添加同名数据源时，会触发此错误。文章将详细解释错误原因，并提供正确的解决方案：将所有地理数据点聚合成一个geojson featurecollection，然后作为单个数据源一次性添加到地图中，从而确保代码的健壮性和数据加载效率。

理解Mapbox GL JS数据源与图层

在Mapbox GL JS中，数据源（Source）负责管理地图上显示的所有地理数据，如图点、线、面等。图层（Layer）则定义了如何渲染这些数据源。一个数据源可以被多个图层引用，但每个数据源都必须拥有一个独一无二的ID。这是Mapbox GL JS管理数据的基础机制。

当您尝试使用 map.addSource() 方法向地图添加数据源时，如果指定的ID已经存在，Mapbox GL JS就会抛出 "There is already a source with this ID" 错误。这通常发生在开发者试图在循环中为每个独立的数据点创建并添加一个同名数据源时。

错误示例分析

考虑以下代码片段，它尝试在一个循环中添加多个地理点：

map.on('load', () => {
    for(var i=0; i<3; i++){
        map.addSource('places', { // 'places' ID 被重复使用
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'properties': {
                            'description': '<p>测试</p>',
                            'icon': 'theatre-15'
                        },
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [log[i], lat[i]]
                        }
                    }
                ]
            }
        });
    }

    map.addLayer({
        'id': 'places-layer', // 注意这里图层ID与数据源ID区分
        'type': 'symbol',
        'source': 'places',
        'layout': {
            'icon-image': '{icon}',
            'icon-allow-overlap': true
        }
    });
});

登录后复制

上述代码中，map.addSource('places', ...) 被放置在一个 for 循环内部。这意味着在循环的第一次迭代中，一个名为 places 的数据源被成功添加。然而，在随后的迭代中，代码试图再次添加一个名为 places 的数据源，此时由于该ID已存在，Mapbox GL JS会抛出 "There is already a source with this ID" 错误。

正确处理多点数据的方法

要正确地在Mapbox GL JS中显示多个地理点，您应该将所有点数据聚合成一个GeoJSON FeatureCollection对象，然后将其作为一个单一的数据源添加到地图中。