如何在OpenLayers 3中通过按钮点击切换GeoJSON图层可见性？

First, let's fix a small typo in your original code—you accidentally reused layer1 for the second layer, which would cause an error when trying to add layer2. Here's the corrected version:

// Create Layer 1
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);

// Create Layer 2 (fixed variable name)
var layer2 = new ol.layer.Vector({ 
  title: 'Geojson 2', 
  source: new ol.source.Vector({ 
    url: 'geojson2.json', 
    format: new ol.format.GeoJSON() 
  }) 
});
map.addLayer(layer2);

Next, add the toggle buttons to your HTML. You can place these anywhere outside your map container (like a sidebar, header, or below the map):

<button onclick="toggleLayer1()">Toggle Layer 1</button>
<button onclick="toggleLayer2()">Toggle Layer 2</button>

Now, write the JavaScript functions that handle the visibility toggle. These functions will check the current visibility state of each layer and flip it:

function toggleLayer1() {
  // Get the current visibility status
  var isVisible = layer1.getVisible();
  // Set visibility to the opposite value
  layer1.setVisible(!isVisible);
}

function toggleLayer2() {
  var isVisible = layer2.getVisible();
  layer2.setVisible(!isVisible);
}

How this works: #

• layer.getVisible() returns a boolean (true if the layer is visible, false otherwise).
• layer.setVisible(!isVisible) flips that boolean—if it was visible, it becomes hidden, and vice versa.

If you prefer a more scalable approach (great for when you add more layers later), you can use a single function that fetches layers by their title instead of relying on global variables:

function toggleLayerByTitle(title) {
  // Find the layer by its title property
  var layer = map.getLayers().getArray().find(layer => layer.get('title') === title);
  if (layer) {
    layer.setVisible(!layer.getVisible());
  }
}

Update your buttons to use this unified function:

<button onclick="toggleLayerByTitle('Geojson 1')">Toggle Layer 1</button>
<button onclick="toggleLayerByTitle('Geojson 2')">Toggle Layer 2</button>

内容的提问来源于stack exchange，提问作者Rolando