單擊按鈕如何在openlayers 3中切換geojson圖層可見性？

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);

如何在我的地圖外創建一個具有onclick事件的按鈕“切換圖層1”和另一個“切換圖層2”的按鈕，以便相應的圖層在單擊時顯示和隱藏？

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);