Mapbox GL Js：添加和删除 GeoJSON 源和图层

Posted 2023-02-16

【中文标题】Mapbox GL Js：添加和删除 GeoJSON 源和图层

【英文标题】：Mapbox GL Js: adding and removing GeoJSON sources and layers

【发布时间】：2018-09-24 23:50:52

【问题描述】：

我在 mapbox gl 中添加和删除图层时遇到问题。

我有这一层：

   map.addLayer(
        "id": "route",
        "type": "line",
        "source": 
            "type": "geojson",
            "data": 
                "type": "Feature",
                "properties": ,
                "geometry": 
                    "type": "LineString",
                    "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                        [-122.48888969421387, 37.83297152392784],
                        [-122.48987674713133, 37.83263257682617],
                        [-122.49043464660643, 37.832937629287755],
                        [-122.49125003814696, 37.832429207817725],
                        [-122.49163627624512, 37.832564787218985],
                        [-122.49223709106445, 37.83337825839438],
                        [-122.49378204345702, 37.83368330777276]
                    ]
                
            
        ,
        "layout": 
            "line-join": "round",
            "line-cap": "round"
        ,
        "paint": 
            "line-color": "#888",
            "line-width": 8
        
    );

然后我删除它：

map.removeLayer('route')

一切正常。

但是，当尝试再次添加相同的图层时，我收到以下错误：

Error: There is already a source with this ID

即使我正在添加一个图层。我不知道如何删除源，因为源没有 ID。

我的最终结果是能够通过单击一个按钮来添加和删除这一层。

有人可以帮我吗？

【参考方案1】：

我刚刚发现源是使用与层中相同的 id 创建的，所以：

map.removeSource('route')

完美地完全删除了图层和源代码。

【讨论】：

感谢发帖。我编辑并添加了map.removeLayer() 的额外步骤。如果我只是先执行了map.removeSource()，那么 Mapbox GL JS 会抛出此错误Error: "Source "route" cannot be removed while layer "route" is using it."

然后删除该层并在添加新层后重新初始化。

【参考方案2】：

您应该先删除图层，然后删除其来源。

map.removeLayer(id);
map.removeSource(id);

在你的情况下id = 'route'。

【参考方案3】：

...并在尝试删除源/层之前检查它们是否存在

if (map.getLayer(id)) 
  map.removeLayer(id);

if (map.getSource(id)) 
  map.removeSource(id);