Переключение слоев Mapbox GL JS с document.getElementByID () не работает - PullRequest
Новая
       1

Переключение слоев Mapbox GL JS с document.getElementByID () не работает

1 голос
/ 14 января 2020

Я пытаюсь заставить компонент управления слоями работать в mapbox. Я прочитал учебник здесь на карте, объясняющий, как получить переключение слоя. Однако в этом руководстве также создаются кнопки, которые мне не нужны, потому что я звоню document.getElementByID, поскольку я уже создал div со всеми слоями в HTML.

Проблема в том, что, когда я нажимаю на ссылку в моем div, ничего не происходит, и я не получаю никаких ошибок в веб-консоли, поэтому я не уверен, откуда go отсюда. Любая помощь будет принята с благодарностью.

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>

1 Ответ

0 голосов
/ 15 января 2020

Мне пришлось удалить id=tracks из класса "layer-line tracks". Теперь все работает как надо.

...