Mapbox 自定义图层未使用 WebGL JavaScript 库显示

早上好，

我用我的自定义数据修改了其中一个 Mapbox GLJS 编码示例。我仍然无法显示图层的内容。它应该通过缩放来更新绿ple。我从客户支持那里得到了很多帮助，但到目前为止无济于事。我不是最有才华的开发人员！

这是我使用的地图框示例的链接。(https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/(

这里还有一个指向修改后的示例的 JSfiddle 链接。(https://jsfiddle.net/2fe3emd6/28/(

修改后的代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Update a choropleth layer by zoom level</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.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.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>
.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    right: 10px;
    z-index: 1;
}
.legend h4 {
    margin: 0 0 10px;
}
.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}
</style>
<div id='map'></div>
<div id='zoneveg-legend' class='legend' style='display: none;'>
    <h4>Zone de végétation</h4>
    <div><span style='background-color: #B8B2B2'></span>Zone arctique</div>
    <div><span style='background-color: #539140'></span>Zone boréale</div>
    <div><span style='background-color: #7FDA10'></span>Zone tempérée nordique</div>
</div>
<div id='dombio-legend' class='legend' style='display: none;'>
    <h4>Domaine bioclimatique</h4>
    <div><span style='background-color: #C3C4C1'></span>Toundra arctique herbacée</div>
    <div><span style='background-color: #696C6C'></span>Toundra arctique arbustive</div>
    <div><span style='background-color: #9A7BA1'></span>Toundra forestière</div>
    <div><span style='background-color: #C48D99'></span>Pessière à lichens</div>
    <div><span style='background-color: #A9ACCA'></span>Pessière à mousses</div>
    <div><span style='background-color: #6895BC'></span>Sapinière à bouleau blanc</div>
    <div><span style='background-color: #81BC84'></span>Sapinière à bouleau jaune</div>
    <div><span style='background-color: #EFCE6D'></span>Érablière à bouleau jaune</div>
    <div><span style='background-color: #B3AC7E'></span>Érablière à tilleul</div>
    <div><span style='background-color: #E1779B'></span>Érablière à caryer cordiforme</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtZiIsImEiOiJjaWZ3bGhtdjgzMnN1dWdrcnEwZTVieG91In0.DkCY-91coDahKvpH7Z26dw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-72, 48],
    minZoom: 2,
    zoom: 3
});
var zoomThreshold = 4;
map.on('load', function() {
    map.addSource('zone', {
        'type': 'vector',
        'url': 'mapbox://thematix.dy544jx6'
    });
    map.addLayer({
        'id': 'NOM',
        'source': 'zone',
        'source-layer': 'zone_veg-9z9soa',
        'maxzoom': zoomThreshold,
        'type': 'fill',
        'paint': {
            'fill-color': [
            'match',
                ['get', 'NOM'],
                '', '#FFFFFF',
                'Boréale', '#539140',
                'Golfe du Saint-Laurent', '#90C4FF',
                'Zone articque', '#B8B2B2',
                'Tempérée nordique', '#7FDA10'
            ],
            'fill-opacity': 0.75
        }
    }, 'waterway-label');
    
    map.addSource('dom', {
        'type': 'vector',
        'url': 'mapbox://thematix.60h9x8bk'
    });
    map.addLayer({
        'id': 'NOM',
        'source': 'dom',
        'source-layer': 'dom_bio-9xc27o',
        'maxzoom': zoomThreshold,
        'type': 'fill',
        'paint': {
            'fill-color': [
            'match',
                ['get', 'NOM'],
                'Toundra arctique herbacée', '#C3C4C1',
                'Toundra arctique arbustive', '#696C6C',
                'Toundra forestière', '#9A7BA1',
                'Pessière à lichens', '#C48D99',
                'Pessière à mousses', '#A9ACCA',
                'Sapinière à bouleau blanc', '#6895BC',
                'Sapinière à bouleau jaune', '#81BC84',
                'Érablière à bouleau jaune', '#EFCE6D',
                'Érablière à tilleul', '#B3AC7E',
                'Érablière à caryer cordiforme', '#E1779B'   
            ],
            'fill-opacity': 0.75
        }
    }, 'waterway-label');
});
var zonevegLegendEl = document.getElementById('zoneveg-legend');
var dombioLegendEl = document.getElementById('dombio-legend');
map.on('zoom', function() {
    if (map.getZoom() > zoomThreshold) {
        zonevegLegendEl.style.display = 'none';
        dombioLegendEl.style.display = 'block';
    } else {
        zonevegLegendEl.style.display = 'block';
        dombioLegendEl.style.display = 'none';
    }
});
</script>
</body>
</html>

提前谢谢你。

皮埃尔·普洛尔德

用于两个自定义图层的match表达式缺少非可选的默认值。

文档：https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-match

这是一个更新的 jsfiddle，它使用 rgba(0,0,0,0) 作为两个match表达式的默认值。

https://jsfiddle.net/2fe3emd6/35/

例如，对于 ID ZONE_VEG的图层，它看起来像这样：

 'fill-color': [
            'match',
                ['get', 'NOM'],
                '', '#FFFFFF',
                'Boréale', '#539140',
                'Golfe du Saint-Laurent', '#90C4FF',
                'Zone articque', '#B8B2B2',
                'Tempérée nordique', '#7FDA10',
                'rgba(0,0,0,0)'
            ],

当然，您可以自由使用不同的默认值。

编辑：

您的评论中提到的进一步问题(第一层被第二层隐藏(的原因是两个图层具有相同的缩放扩展。要修复它，只需更改具有 ID 的图层'DOM_BIO' 'maxzoom' 'minzoom' .

更新的 jsfiddle：

https://jsfiddle.net/2fe3emd6/43/

相关内容

最新更新

热门标签：