2017-03-20 32 views
1

Mapbox GL JSを使用しています。地図の背景の上にポリゴンのレイヤーを表示しながら、地図の背景スタイルを通りから衛星に変更することを許可します。Mapbox GL JS:地図レイヤーを隠すことなくマップのスタイルを変更できますか?

私はthe Mapbox exampleを採用していますが、上記の新しいスタイルを設定してポリゴンレイヤーを設定しないようにする方法はありません(map.setStyle)。ポリゴンレイヤーを隠すことなく変更したい。レイヤーを切り替える前に

enter image description here

層を切り替えた後 - ポリゴンオーバーレイ欠落している、それを示すに運ぶしたいと思います:

enter image description here

これがフルで私のコードです:

<!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> 

答えて

0

Mapbox GL JSには、「基本レイヤー」と「オーバーレイ」という概念がありません。すべてのマップのすべてのレイヤーは、同じ基本プリミティブで描画されます。

あなたが提供Mapboxスタイルを切り替えながら、一個の以上のカスタムレイヤを永続化する必要がある場合は、あなたが

  • フォークにMapboxのスタイルを選択し、再追加す​​るには、メーカー
  • をカスタムレイヤを追加することができます
  • スタイルを切り替えた後、カスタム層がブラウザにJSONとしてMapboxスタイルをダウンロードし、ブラウザ
+0

OKでスタイルにカスタムレイヤを追加し、感謝します。私はすべてのレイヤID(私は複数のIRLを持っている)を保存し、それらをすべて削除してから、それらをすべて再追加することができると思います。 – Richard

+0

いいね! 'setStyle'を呼び出す前に削除する必要はありません。後でそれらを追加するだけです。 –

関連する問題