Как переключить видимость слоя геойсона в openlayers 3 одним нажатием кнопки?

Question

У меня есть несколько слоев geojson, добавленных через:

    var layer1 = new ol.layer.Vector({
        title: 'Geojson 1',
        source: new ol.source.Vector({
            url: 'geojson1.json',
            format: new ol.format.GeoJSON()
        })
    });

    map.addLayer(layer1);
    var layer1 = new ol.layer.Vector({
        title: 'Geojson 2',
        source: new ol.source.Vector({
            url: 'geojson2.json',
            format: new ol.format.GeoJSON()
        })
    });

    map.addLayer(layer2);

Как создать кнопку «Переключить слой 1» и другую кнопку для «Переключить слой 2» вне моей карты с событием onclick, чтобы соответствующий слой отображался и скрывался при нажатии?

Answer 1

Вы можете привязать его к элементу кнопки следующим образом (используя layer1 в качестве примера, аналогично для layer2):

document.getElementById("myBtn").onclick = function() { 
    layer1.setVisible(!layer1.getVisible());
};

Если у вас много этих слоев / кнопок, вспомогательная функция может обобщить шаг и сделать его чище:

var bindLayerButtonToggle = function (btnId, layer) {
    document.getElementById(btnId).onclick = function() { 
        layer.setVisible(!layer.getVisible());
    };
}

Тогда вы можете просто сделать:

bindLayerButtonToggle("myBtn", layer1);
bindLayerButtonToggle("myBtn2", layer2);