Блог

Я играл с различными вариантами включения и выключения слоев, используя приведенный ниже пример 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);
}
  

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

смотрите код ниже:

 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, который содержит элемент изображения и ссылку.
Существует множество возможностей настроить меню по своему усмотрению.