web-dev-qa-db-ja.com

Mapbox GL Js：GeoJSONソースとレイヤーの追加と削除

Mapboxglでレイヤーを追加および削除する際に問題が発生しました。

私はこの層を持っています：

   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がないため、ソースを削除する方法がわかりません。

私の最終的な結果は、ボタンをクリックすることでこのレイヤーを追加および削除できるようになることです。

誰かがここで私を助けることができますか？

mapbox-gl-js
5
Pablo Estrada

ソースがレイヤーと同じIDで作成されていることがわかりました。

map.removeSource('route')

レイヤーとソースの両方を完全に削除するために完全に機能しました。

14
Pablo Estrada