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

【问题标题】：OpenLayers3: best way to display multiple WMS layers in trasparencyOpenLayers 3：以透明方式显示多个 WMS 图层的最佳方式
【发布时间】：2015-06-16 09:26:59
【问题描述】：

我正在编写一个 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'},
    })
})

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

【问题讨论】：

标签： transparency layer openlayers-3 wms

【解决方案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中设置图层的不透明度。

【讨论】：