1
Mapbox GL JSを使用しています。地図の背景の上にポリゴンのレイヤーを表示しながら、地図の背景スタイルを通りから衛星に変更することを許可します。Mapbox GL JS:地図レイヤーを隠すことなくマップのスタイルを変更できますか?
私はthe Mapbox exampleを採用していますが、上記の新しいスタイルを設定してポリゴンレイヤーを設定しないようにする方法はありません(map.setStyle
)。ポリゴンレイヤーを隠すことなく変更したい。レイヤーを切り替える前に
:
層を切り替えた後 - ポリゴンオーバーレイ欠落している、それを示すに運ぶしたいと思います:
これがフルで私のコードです:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
<div id='map'></div>
<div id='menu'>
<input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'>
<label for='basic'>basic</label>
<input id='satellite' type='radio' name='rtoggle' value='satellite'>
<label for='satellite'>satellite</label>
</div>
<script>
mapboxgl.accessToken = 'pk.eyTOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
zoom: 5,
center: [-3.0, 54.6]
});
map.on('load', function() {
map.addSource('xxx', {
type: 'vector',
url: 'mapbox://xxx.xxx'
});
map.addLayer({
'id': 'xxx',
'source': 'xxx',
'type': 'fill',
'paint': {
'fill-color': 'red'
},
'source-layer': mylayer
}, 'road'); // Note that I'd like this to display above the OSM 'roads' layer
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
});
</script>
</body>
</html>
OKでスタイルにカスタムレイヤを追加し、感謝します。私はすべてのレイヤID(私は複数のIRLを持っている)を保存し、それらをすべて削除してから、それらをすべて再追加することができると思います。 – Richard
いいね! 'setStyle'を呼び出す前に削除する必要はありません。後でそれらを追加するだけです。 –