🐥

Mapbox GL JSのremoveSourceの挙動

2023/10/20に公開

はじめに

先日、口頭で質問を受けた際に「sourceを削除する機能はないのではないか?」と回答しました。が、後で調べてくるとしっかりMap#removeSourceというメソッドが存在しました。あやふやな記憶に頼らずちゃんと調べないといけないといけないですね。ということで、戒めの意味も込めてremoveSourceの挙動を見ていきます。

処理の流れ

Map#removeSourceは以下の部分です。基本的にStyle#removeSourceを呼び出しているだけです。
https://github.com/mapbox/mapbox-gl-js/blob/v2.15.0/src/ui/map.js#L2083-L2087

Style#removeSourceは以下の部分です。
https://github.com/mapbox/mapbox-gl-js/blob/v2.15.0/src/style/style.js#L764-L797

いくつか大事な部分を見ていきます。

まず、ソースがレイヤーで使用されている場合は削除できません。
https://github.com/mapbox/mapbox-gl-js/blob/v2.15.0/src/style/style.js#L771-L775

そして、ソースの(キャッシュ)データを保持している配列から該当するソースを削除します。
https://github.com/mapbox/mapbox-gl-js/blob/v2.15.0/src/style/style.js#L780-L789

サンプル

簡単なサンプルを作りました。

addSource -> addLayerとクリックとレイヤーが追加されます。この状態でremoveSourceをクリックするとコンソールにError: Source "rect" cannot be removed while layer "rect" is using it.というエラーが表示されます。ちょうど、以下の部分のエラーメッセージですね。

https://github.com/mapbox/mapbox-gl-js/blob/v2.15.0/src/style/style.js#L773

まとめ

記事を書いていて、「レイヤーを消さずにソースを消そうとするとエラーになる」という話を以前どこかでしたような気がしてきました。記憶ってあてになりませんね。

GitHubで編集を提案
マップボックス・ジャパン合同会社

Discussion