使用 document.getElementByID() 切换 Mapbox GL JS 图层不起作用答案

【问题标题】：Toggeling Mapbox GL JS layers with document.getElementByID() not working使用 document.getElementByID() 切换 Mapbox GL JS 图层不起作用
【发布时间】：2020-01-14 16:02:46
【问题描述】：

我正在尝试让图层控制组件在 mapbox 中工作。我在 mapbox 上阅读了教程 here，解释了如何获得图层切换。但是，在本教程中，它还创建了我不需要的按钮，因为我正在调用 document.getElementByID，因为我已经创建了一个带有 HTML 中所有层的 div。

问题是，当我单击 div 中的链接时，什么也没有发生，并且我在 Web 控制台中没有收到任何错误，所以我不确定从这里去哪里。任何帮助将不胜感激。

mapbox gl：

map.on('load', function() {
    // layer - rail road
    map.addLayer({
        'id': 'Railroad',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'data': geojson_railRoad,
            },
        'layout': {
            'visibility': 'visible'
        }
    });
    var tracks_layer = document.getElementById("tracks");

    tracks_layer.onclick = function(){
    var visibility = map.getLayoutProperty('Railroad', 'visibility');

    if (visibility === 'visible'){
        map.setLayoutProperty('Railroad', 'visibility', 'none');
    } else {
        map.setLayoutProperty('Railroad', 'visibility', 'visible')
    }
};

HTML：

 <div class="legend-body" id="legend">
                <b>Railroad Layers</b>
                <div class='train-layer-options'>
                    <div class="layer-line tracks" id="tracks"></div>
                    <a href=# class="layer-text" id="tracks">Tracks<br></a>
</div>

【问题讨论】：

标签： javascript html mapbox-gl-js

【解决方案1】：

我不得不从 "layer-line tracks" 类中删除 id=tracks。现在一切正常。

【讨论】：