OpenLayers3: best way to display multiple WMS layers in trasparency - transparency

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.