Question

早上好，

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

这里是我使用的Mapbox示例的链接。（https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/）

这里还有一个JSfiddle链接到修改过的例子。（https://jsfiddle.net/2fe3emd6/28/）

修改后的代码如下：

＆＃13;

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

＆＃13;

提前感谢你。

皮尔-Y。 Plourde

Answer 1

您为两个自定义图层使用的match表达式缺少默认值，这不是可选的。

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

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

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

E.g。对于标识为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)'
            ],

您当然可以自由使用其他默认值。

修改

评论中提到的进一步问题的原因（第一层被第二层隐藏）是两个图层都具有相同的缩放范围。要解决此问题，只需更改标识为'DOM_BIO' 'maxzoom'至'minzoom'的图层。

更新了jsfiddle：

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

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

1 个答案: