【mapbox_js】Layerを残しながら背景地図を変更する．

あー，どうも，こんばんは．

さて，今日はmapbox_jsについて書きます．
mapboxを使うときにUnityとか触ってみたりしたんですが，どうやらmapbox_jsが一番便利であるということに気づいた今日この頃です．

まぁ便利というか，軽さとかですかね．

背景地図の変更
背景地図を変更すると,,,
解決策
参考文献

背景地図の変更

さて，mapbox_jsを使っていると，背景地図の変更をしたくなる時はありますよね．

選べる地図はデフォルトでは5種類？で，street, dark, satelliteなどいくつかあります．今回はこれらをボタンを押して変えたくなった場合を想定しています．

map.setStyle('mapbox://styles/mapbox/' + layerId);Code language: JavaScript (javascript)

まぁ，そんなに難しいことはありません．

背景地図を変更すると,,,

さて，ここで問題が発生するのですが，背景地図を変更すると今まで載せていたlayerとかが全てなくなってしまいます．

焦りました，とても．

map.on('load',function(){
 map.addLayer( ... );
})Code language: JavaScript (javascript)

とかやっても反応しない．
泣けます．

解決策

どうやら，map.on(‘load’)ではなく，map.on(‘style.load’)を使うみたいです．
なので解決方法としては，

<!-- htmlのあれこれ この辺は公式サイトを参考に-->
<div id='map'></div>

<script>
mapboxgl.accessToken = 'アクセストークン';
//初期設定
var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [139.69167, 35.68944],
            zoom: 15,
});
//これはmapを読み込んだとき
map.on('load', function() {
            addLayerAndSource();
});
//これを書くことでスタイルが変更されたときに対応できる．
map.on('style.load', function() {
            addLayerAndSource();
});
//関数を作ってあげる．
function addLayerAndSource(){
            map.addLayer( ... );
            map.addSource( ... );
}
//ボタンの追加
const btn = document.createElement('button');
btn.innerHTML = '<i id="toHome" class="fa fa-home" aria-hidden="true"></i>';
//スタイルの変更（きっかけはなんでも，ここではボタン）
btn.addEventListener('click',(e) =>{
            //スタイルをdarkにする
            map.setStyle('mapbox://styles/mapbox/dark-v10');
});
</script>
Code language: JavaScript (javascript)

必要な情報が載っているのが英語ばっかなので検索する気がなくなってしまいますね．

もっとすらすら英語を読めるようになりたいなぁ．

背景地図の変更

背景地図を変更すると,,,

解決策

参考文献

コメント