OpenLayers 3：以透明方式显示多个 WMS 图层的最佳方式

Question

我正在编写一个 js 脚本以使用 OpenLayers3 将多个 WMS 图层添加到地图
代码是这样的：

<script type="text/javascript">
var l1 = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
});
var l2 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette1'},
    })
})
var l3 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette2'},
    })
})
var map = new ol.Map({
  target: 'map-dashboard',
  view: new ol.View({
    center: [-10997148, 4569099],
    zoom: 4
  })
});
map.addLayer(l1);
map.addLayer(l2);
map.addLayer(l3);
</script>

这样，WMS 图层就不会全部可见了。第一个被最后一个隐藏了。
阅读 API 文档，我找到了 ol.layer.TileWMS 对象，因此可能的解决方案是替换 ImageWMS 对象：

var l2 = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette1'},
    })
})
var l3 = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette2'},
    })
})

我需要查看所有可见和重叠的图层。我不确定这是一个可行的解决方案。欢迎任何进一步的建议！

Answer 1

你也想要两个单独的 ol3 层中的两个层吗？如果没有那么你可以尝试（取决于数据）

var layers = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms?',
  params: {'LAYERS': 'aree_protette1, aree_protette2 '},
})

作为两个独立的层，尝试设置透明和图像（gif或png）参数

'LAYERS': 'aree_protette1',
'FORMAT': 'image/png', //depending what the GetCapabilities says
'TRANSPARENT': 'true'

编辑：当然，这取决于提供的数据，透明度参数是否有用。如果是这样你可以在ol3中设置图层的不透明度。

OpenLayers 3：以透明方式显示多个 WMS 图层的最佳方式

OpenLayers3: best way to display multiple WMS layers in trasparency

transparency

layer

openlayers-3

wms