openlayers叠加显示两个图层覆盖

如果你想要叠加显示的两个图层发生重叠，而不是分别显示在地图上，可以通过设置图层的 zIndex 属性来控制图层的叠加顺序。在 OpenLayers 中，zIndex 值越大的图层会显示在 zIndex 值较小的图层上方。
以下是一个示例代码，展示如何将两个图层叠加在一起并设置重叠时的显示顺序：
var layer1 = new ol.layer.Tile({
source: new ol.source.OSM(),
zIndex: 0 // 设置 zIndex 为 0
});

var layer2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'topp:states'},
serverType: 'geoserver'
}),
zIndex: 1 // 设置 zIndex 为 1
});

var map = new ol.Map({
layers: [layer1, layer2],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-98.583333, 39.833333]),
zoom: 4
})
});
登录后复制
在这个例子中，我们将 layer1 的 zIndex 属性设置为 0，将 layer2 的 zIndex 属性设置为 1。这样，当它们重叠在一起时，layer2 会显示在 layer1 上方。你可以根据需要调整 zIndex 的值来控制图层的叠加顺序。