Mapbox GL JS переключает слои с помощью пользовательских элементов управления - PullRequest
Новая
       13

Mapbox GL JS переключает слои с помощью пользовательских элементов управления

0 голосов
/ 09 марта 2019

Я играл с различными вариантами включения и выключения слоев, используя пример Mapbox GL JS ниже. Текстовые кнопки, которые используются в этом примере (https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/), работают хорошо, но теперь мне нужно создать пользовательские кнопки с иконками, которые могут переключать слои для серии слоев карты с уникальными идентификаторами. Я играл с некоторыми разными идеи о том, как наилучшим образом добиться этого, но пока не ушли. Есть ли способ заменить добавленные ссылки значками или кнопками другого типа в меню? Спасибо! 

var toggleableLayerIds = ['sample-one', "sample-two"];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();

        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

1 Ответ

0 голосов
/ 15 марта 2019

Вы можете достичь этого, создав другой элемент перед добавлением в элемент меню

, см. Код ниже: 

var toggleableLayerIds = ['sample-one', "sample-two"];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();

        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
    var button = document.createElement('div');
    var icon = document.createElement('img');
    icon.src = '[path to your icon]';
    button.appendChild(img);
    button.appendChild(link);
    var layers = document.getElementById('menu');
    layers.appendChild(button);
}

Здесь я создаю div, который содержит элемент изображения и ссылку.Существует множество возможностей настроить меню по вашему желанию.

...