OpenLayers3: best way to display multiple WMS layers in trasparency

Question

I'm writing a js script to add multiple WMS layers to a map using OpenLayers3
The code is something like this:

<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>

This way, the WMS layers are not all visible. The first ones are hidden by the last one.
Reading the API docs I found the ol.layer.TileWMS object so a possible solution would be to replace the ImageWMS objects:

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'},
    })
})

I need to see all the layers visible and overlapped. I'm not sure that this is a working solution. Any further suggestion is welcome!

Answer 1

You want the two layers in two seperate ol3-layers, too? if not then you could try (depending on the data)

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 '},
})

As two seperate layers, try to set the transparent and image (gif or png) parameter

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

Edit: Of course it depends on the data provided, if the transparency-parameter will be useful. If so you can set the opacity of the layer in ol3.