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没有“基础层”和“叠加层”的概念。所有地图的所有图层都使用相同的基本图元绘制。

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

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

Mapbox GL JS：更改地图的样式而不隐藏地图图层？

1 个答案: