Mapbox GL JS：在不隐藏地图图层的情况下更改地图样式？

Question

我正在使用 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>

Answer 1

Mapbox GL JS 没有"base layer" 和"overlays." 的概念，所有地图的所有层都使用相同的基本图元绘制。

如果您需要在提供的 Mapbox 样式之间切换时保留一个或多个自定义层，您可以选择

分叉 Mapbox 样式并在 Studio 中添加您的自定义图层
切换样式后重新添加自定义图层
在浏览器中将 Mapbox 样式下载为 JSON 并将您的自定义图层添加到浏览器中的样式

Mapbox GL JS：在不隐藏地图图层的情况下更改地图样式？

Mapbox GL JS: Change a map's style without hiding map layer?

mapbox

mapbox-gl-js