지도 상자 GL JS :지도 레이어를 숨기지 않고지도의 스타일을 변경 하시겠습니까?

Mapbox GL JS를 사용하고 있는데지도 배경 위에 폴리곤 레이어를 표시하면서 사용자가 거리에서 위성까지지도의 배경 스타일을 변경할 수 있도록하고 싶습니다.지도 상자 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>

출처

2017-03-20 Richard

지도 상자 GL JS에는 '기본 레이어'및 '오버레이'라는 개념이 없습니다. 모든 맵의 모든 레이어는 동일한 기본 프리미티브로 그려집니다. 당신이 제공 Mapbox 스타일 사이를 전환하는 동안 하나 개 이상의 사용자 정의 계층을 유지해야하는 경우

, 당신은

포크에 Mapbox 스타일을 선택하고
다시 추가 Studio에서 사용자 정의 레이어를 추가 할 수 있습니다 당신의 브라우저에서 JSON으로 스타일을
다운로드 Mapbox 스타일을 전환하고, 브라우저

출처

2017-03-20 18:47:46

확인에 스타일 덕분에 사용자 정의 레이어를 추가 한 후 사용자 정의 층. 나는 모든 레이어 ID (하나 이상의 IRL이 있음)를 저장하고, 모두 제거한 다음 다시 추가 할 수 있다고 생각합니다. – Richard

좋은 소식! 'setStyle'을 호출하기 전에 그것들을 제거 할 필요가 없습니다 - 나중에 그것들을 추가하십시오. –

지도 상자 GL JS :지도 레이어를 숨기지 않고지도의 스타일을 변경 하시겠습니까?

답변

관련 문제