OpenLayers 3:在透明度中显示多个WMS图层的最佳方式

miste 发布于 2019-07-12 layer 最后更新 2019-07-12 09:32 3 浏览

我正在编写一个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'},
    })
})
我需要看到所有图层可见并重叠。我不确定这是否是一个可行的解决方案。欢迎任何进一步的建议!
已邀请:

qfugit

赞同来自:

您想要两个单独的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'
编辑: 当然,如果transparency-parameter有用,它取决于提供的数据。如果是这样,您可以在ol3中设置图层的不透明度。