我已成功在 GeoServer 中将三个 shapefile 作为图层组发布。但是，在我的 Web 应用程序中，我目前面临一个问题，即图层组中仅显示一个图层，而我打算显示该组中的所有图层。
以下是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>WMS Layer Example</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
<style>
#map-container {
position: relative;
width: 100%;
height: 500px;
}
#map {
width: 100%;
height: 100%;
}
#checkbox-container {
position: absolute;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="map-container">
<div id="map"></div>
<div id="checkbox-container">
<label for="wms-layer-checkbox">Show WMS Layer</label>
<input type="checkbox" id="wms-layer-checkbox" checked>
</div>
</div>
<script>
// Define a view
var view = new ol.View({
center: [8254682.451123528, 2388403.8093110425], // Coordinates of center
zoom: 14, // Zoom level of map
projection: 'EPSG:3857'
});
// Define our map
var map = new ol.Map({
target: 'map',
view: view
});
// Define a WMS source
var tileWMSSource = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Aaryaman/wms',
params: {
'LAYERS': 'Aaryaman:Aaryaman_Samode'
},
serverType: 'geoserver'
});
// Define a WMS Layer
var tileWMSLayer = new ol.layer.Tile({
source: tileWMSSource
});
map.addLayer(tileWMSLayer);
// Add a click event to the map
map.on('singleclick', function(evt) {
var viewResolution = view.getResolution();
var clickedCoordinates = evt.coordinate;
var projection = 'EPSG:3857'; //
var param = {
'INFO_FORMAT': 'application/json'
};
var clickedUrl = tileWMSSource.getGetFeatureInfoUrl(clickedCoordinates, viewResolution, projection, param);
$.getJSON(clickedUrl, function(data) {
var arrayofFeatures = data.features;
if (arrayofFeatures.length > 0) {
var propertiesObj = arrayofFeatures[0].properties;
console.log('NAME_1 : ' + propertiesObj['NAME_1'] + ' NAME_2 : ' + propertiesObj['NAME_2']);
} else {
console.log('Click on the layer!');
}
});
});
// Checkbox event handler
var checkbox = document.getElementById('wms-layer-checkbox');
checkbox.addEventListener('change', function() {
tileWMSLayer.setVisible(checkbox.checked);
});
</script>
</body>
</html>
我一直在尝试自己找出错误，但无法找到解决方案。您能帮忙解决这个问题吗？