[GIS] Applying partial opacity in WMS layer using OpenLayers

opacityopenlayers-2wms

I am working on a GIS API, and I can't share the code, so I will try to explain what I want.

I want to apply a style map on a single layer, where I have some elements with opacity 1 and others with opacity 0.5.

Please, look at the image below (where I show the desired feature using a "vector" layer):

vec_partial_opacity

I have tried using the opacity property from OpenLayers.Layer, but it sets the whole layer to 0.5 opacity.

I know WMS is an image layer, so it is maybe not possible to set multiple values for opacity. Even though, it thought it would be worth asking.

Is it possible to use a style map with multiple opacities in a WMS layer?

With my current SLD Body, I get the object with only opacity 1.

<sld:StyledLayerDescriptor xmlns:sld="http://www.opengis.net/sld" version="1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><sld:NamedLayer><sld:Name>topp:tasmania_water_bodies</sld:Name><sld:UserStyle><sld:FeatureTypeStyle><sld:Rule><ogc:Filter><ogc:Or><ogc:PropertyIsGreaterThan><ogc:PropertyName>AREA</ogc:PropertyName><ogc:Literal>1067500000</ogc:Literal></ogc:PropertyIsGreaterThan></ogc:Or></ogc:Filter><sld:PolygonSymbolizer><sld:Fill><sld:CssParameter name="fill">#0000ff</sld:CssParameter><sld:CssParameter name="fill-opacity">1</sld:CssParameter></sld:Fill><sld:Stroke><sld:CssParameter name="stroke">#000000</sld:CssParameter></sld:Stroke></sld:PolygonSymbolizer></sld:Rule><sld:Rule><ogc:Filter><ogc:Or><ogc:PropertyIsLessThanOrEqualTo><ogc:PropertyName>AREA</ogc:PropertyName><ogc:Literal>1067500000</ogc:Literal></ogc:PropertyIsLessThanOrEqualTo></ogc:Or></ogc:Filter><sld:PolygonSymbolizer><sld:Fill><sld:CssParameter name="fill">#0000ff</sld:CssParameter><sld:CssParameter name="fill-opacity">0.5</sld:CssParameter></sld:Fill><sld:Stroke><sld:CssParameter name="stroke">#000000</sld:CssParameter></sld:Stroke></sld:PolygonSymbolizer></sld:Rule></sld:FeatureTypeStyle></sld:UserStyle><sld:UserStyle><sld:FeatureTypeStyle><sld:Rule><ogc:Filter><ogc:Or><ogc:PropertyIsGreaterThan><ogc:PropertyName>AREA</ogc:PropertyName><ogc:Literal>1067500000</ogc:Literal></ogc:PropertyIsGreaterThan></ogc:Or></ogc:Filter><sld:PolygonSymbolizer><sld:Fill><sld:CssParameter name="fill">#0000ff</sld:CssParameter><sld:CssParameter name="fill-opacity">1</sld:CssParameter></sld:Fill><sld:Stroke><sld:CssParameter name="stroke">#000000</sld:CssParameter></sld:Stroke></sld:PolygonSymbolizer></sld:Rule><sld:Rule><ogc:Filter><ogc:Or><ogc:PropertyIsLessThanOrEqualTo><ogc:PropertyName>AREA</ogc:PropertyName><ogc:Literal>1067500000</ogc:Literal></ogc:PropertyIsLessThanOrEqualTo></ogc:Or></ogc:Filter><sld:PolygonSymbolizer><sld:Fill><sld:CssParameter name="fill">#0000ff</sld:CssParameter><sld:CssParameter name="fill-opacity">0.5</sld:CssParameter></sld:Fill><sld:Stroke><sld:CssParameter name="stroke">#000000</sld:CssParameter></sld:Stroke></sld:PolygonSymbolizer></sld:Rule></sld:FeatureTypeStyle></sld:UserStyle></sld:NamedLayer></sld:StyledLayerDescriptor>

Best Answer

You could define two or more rules. Either static in your sld style or dynamic with mergeNewParams:

theSLD_BODY= '<?xml version="1.0" encoding="utf-8"?>' + '<StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengeospatial.net/sld/1.0.0/StyledLayerDescriptor.xsd"><NamedLayer><Name>topp:states</Name>'+
//'<NamedStyle><Name>pophatch</Name></NamedStyle>'+
'<UserStyle><FeatureTypeStyle>'+

'<Rule><ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>STATE_NAME</ogc:PropertyName><ogc:Literal>Nebraska</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter><PolygonSymbolizer>'+
'<Fill><CssParameter name="fill">#0077A2</CssParameter>'+
'<CssParameter name="fill-opacity">1.0</CssParameter></Fill>'+
'<Stroke><CssParameter name="stroke">%23FF0000</CssParameter></Stroke></PolygonSymbolizer></Rule>'+

'<Rule><ogc:Filter><ogc:PropertyIsGreaterThan><ogc:PropertyName>MALE</ogc:PropertyName><ogc:Literal>2433346</ogc:Literal></ogc:PropertyIsGreaterThan></ogc:Filter><PolygonSymbolizer>'+
'<Fill><CssParameter name="fill">#0077A2</CssParameter>'+
'<CssParameter name="fill-opacity">0.1</CssParameter></Fill>'+
'<Stroke><CssParameter name="stroke">%23FF0000</CssParameter></Stroke></PolygonSymbolizer></Rule>'+


'</FeatureTypeStyle></UserStyle>'+
'</NamedLayer></StyledLayerDescriptor>';



        map.layers[0].mergeNewParams({"SLD_BODY" : theSLD_BODY});

If you copy this code into your clipboard and run it in your console on the following webpage you should see polygons with two different opacities:

http://demo.opengeo.org/geoserver/topp/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox=-124.73142200000001,24.955967,-66.969849,49.371735&width=780&height=330&srs=EPSG:4326&format=application/openlayers

Update: See my jsfiddle: http://jsfiddle.net/expedio/x1xxb08g/

Update2: This is also a nice example for changing wms-Style with SLD_BODY: http://gis.ibbeck.de/OLClient/examples/wms_sld_world.asp

Related Question