如何通过单击按钮在 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);

如何在我的地图外部创建一个按钮 "Toggle Layer 1" 和另一个按钮 "Toggle Layer 2"，它们具有 onclick 事件，以便相应的图层在单击时显示和隐藏？

Answer 1

您可以像这样将它绑定到按钮元素（以 layer1 为例，与 layer2 类似）：

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

如果您有很多这样的 layers/buttons，辅助函数可以概括该步骤并使其更清晰：

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

那么你可以这样做：

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

如何通过单击按钮在 openlayers 3 中切换 geojson 层可见性？

How to toggle geojson layer visibility in openlayers 3 on click of a button?

javascript

openlayers-3