Переключайте слои GeoJSON с помощью кнопки HTML вместо ссылок с Mapbox GL JS - PullRequest
Новая
       13

Переключайте слои GeoJSON с помощью кнопки HTML вместо ссылок с Mapbox GL JS

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

Я работаю над веб-картой, которая включает в себя включение и выключение двух слоев GeoJSON.Ранее я использовал Mapbox JS для этого, удаляя слои и добавляя их по щелчку с помощью пользовательской кнопки HTML, но у меня возникла проблема с выполнением этого с помощью Mapbox GL JS.Все, что я пытаюсь сделать, это включить или выключить два слоя (показать и скрыть) с помощью кнопок HTML вместо ссылок, добавленных к созданному меню CSS: 

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

Я подумал, что могу связать функцию сэлемент кнопки, но не может заставить его работать должным образом: 

document.getElementById("toggle-layer-one").onclick = function() {};

HTML: 

<button data-balloon="Campsite" data-balloon-pos="right" id="toggle-layer-one"></button>

CSS 

#toggle-layer-one {
background-image: url("../Assets/Campsite.svg");
background-size: 70px 70px;
height: 70px;
width: 70px;
border-top: 1px solid #fff;
}

JS 

map.on('style.load', function () {
map.addSource("sample", {
    type: "geojson",
    data: "https://raw.githubusercontent.com/aarontaveras/Sample-GeoJSON-Data/master/sample.geojson"
});

map.addLayer({
    "id": "sample-point-one",
    "type": "symbol",
    "source": "sample",
    "filter": ["==", "$type", "Point"],
    "layout": {
        "icon-image": "circle-15",
        "icon-size": 1,
        "icon-anchor": "center",
    }
});

map.setFilter('sample-point-one', ['==', 'region', 'Africa']);

map.addLayer({
    "id": "sample-point-two",
    "type": "symbol",
    "source": "sample",
    "filter": ["==", "$type", "Point"],
    "layout": {
        "icon-image": "circle-15",
        "icon-size": 1,
        "icon-anchor": "center",
    }
});

map.setFilter('sample-point-two', ['==', 'region', 'Asia']);

});

// Toggle layers
var toggleableLayerIds = ["sample-point-one", "sample-point-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 голосов
/ 11 марта 2019

Я все понял.

HTML: 

<a id="test" href="#">TEST</a>

JS: 

var toggleLayerId = ["sample-point-one"];

document.getElementById("test").onclick = function (e){
for (var index in toggleLayerId) {
    var clickedLayer = toggleLayerId[index];
    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');
    }
}
};
...