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

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

1 个答案: