时间戳

首页 > 解决方案 > 使用 document.getElementByID() 切换 Mapbox GL JS 图层不起作用

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

问题描述

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

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

地图框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>

标签： javascripthtmlmapbox-gl-js

解决方案

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

推荐阅读