动态改变SLD

以下来源于“演示”——DemoRequest——WMS_getMap_SLD_BODY_LiteralMode.url

以此URL为样本进行过滤操作。

http://localhost:8080/geoserver/wms?bbox=-130,24,-66,50&Format=image/png&request=GetMap&width=550&height=250&srs=EPSG:4326&SLD_BODY=<StyledLayerDescriptorversion=‘1.0.0’><UserLayer><Name>topp:states</Name><UserStyle><Name>UserSelection</Name><FeatureTypeStyle><Rule><Filterxmlns:gml=‘http://www.opengis.net/gml’><PropertyIsEqualTo><PropertyName>STATE_NAME</PropertyName><Literal>Illinois</Literal></PropertyIsEqualTo></Filter><PolygonSymbolizer><Fill><CssParametername=‘fill’>#FF0000</CssParameter></Fill></PolygonSymbolizer></Rule><Rule><LineSymbolizer><Stroke/></LineSymbolizer></Rule></FeatureTypeStyle></UserStyle></UserLayer></StyledLayerDescriptor>

测试:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″>

<meta name=”viewport”content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0″>

<metaname=”apple-mobile-web-app-capable” content=”yes”>

<title>OpenLayers TileCacheExample</title>

<link rel=”stylesheet”href=”theme/default/style.css” type=”text/css”>

<scriptsrc=”lib/OpenLayers.js”></script>

<scripttype=”text/javascript”>

 

var sld,map,layer;

function init(){

 

 sld= “<StyledLayerDescriptor version=’1.0.0′><UserLayer><Name>topp:states</Name><UserStyle>       <Name>UserSelection</Name>        <FeatureTypeStyle>         <Rule>          <Filterxmlns:gml=’http://www.opengis.net/gml’>          
<PropertyIsEqualTo>          <PropertyName>STATE_NAME</PropertyName>               <Literal>Nebraska</Literal>               </PropertyIsEqualTo>          </Filter>               <PolygonSymbolizer>         <Fill>            <CssParameter name=’fill’>  #FF0000</CssParameter>          
</Fill>         </PolygonSymbolizer>       <TextSymbolizer>         <Label>       <PropertyName>STATE_NAME</PropertyName>    </Label>     <Font>          <CssParametername=’font-size’>20</CssParameter>           <CssParametername=’font-style’>normal</CssParameter>          
<CssParametername=’font-weight’>bold</CssParameter>         </Font>         <LabelPlacement>           <PointPlacement>             <AnchorPoint>              <AnchorPointX>0.5</AnchorPointX>              <AnchorPointY>0.5</AnchorPointY>             </AnchorPoint>          
</PointPlacement>         </LabelPlacement>         <Fill>           <CssParametername=’fill’>#FFFFFF</CssParameter>         </Fill>       </TextSymbolizer>  </Rule><Rule>            <LineSymbolizer>               <Stroke/>             </LineSymbolizer>             
</Rule>           </FeatureTypeStyle>            </UserStyle>         </UserLayer>              </StyledLayerDescriptor>”;

map = new OpenLayers.Map(‘map’);

              layer= new OpenLayers.Layer.WMS(“MY WMS”,

                            “http://127.0.0.1:8080/geoserver/wms”,{

                                   layers: ‘topp:states’,

                                   SLD_BODY:sld

                            });

 

       map.addLayer(layer);    

map.addControl(newOpenLayers.Control.LayerSwitcher());

var lonlat=newOpenLayers.LonLat(-100.63477, 39.28711);

map.setCenter(lonlat, 4);//指定地图中心与初始缩放级别

map.addControl(newOpenLayers.Control.MousePosition());

}

function commit(){

var Name;

var formElement =document.getElementsByName(‘sel’)[0];

                     //  console.log(formElement.length);

                     for(i = 0; i < formElement.length; i++) {

                            if(formElement[i].selected == true) {

                                   Name= formElement[i].text; //关键是通过option对象的innerText属性获取到选项文本

                                   //alert(Name); 

                            }

                     }

var newsld = sld.replace(“Nebraska”,  Name);

layer.mergeNewParams({“sld_body”:newsld});

map.addLayer(layer);

}

</script>

<body onload=”init()”>

<div id=”map”style=”position:relative;width: 80%;height: 80%;border: 1px solid#ccc;”>

</div>

<form Name=’hello’>

             
输入地名: <select Name=’sel’>

                     <optionvalue=”California”selected=”selected”>California</option>

                     <optionvalue=”Arizona”> Arizona</option>

                     <optionvalue=”Texas”>Texas</option>

                     <optionvalue=”New Mexico”>New Mexico</option>

                     <optionvalue=”Louisiana”>Louisiana</option>

              </select><input type=’submit’ onclick=’commit(); return false;’ value=’查询‘ />

       </form>

</body>

</html>

去掉红字部分就不显示边界了:

对道路进行测试

教训:SLD中有汉字不能被解析,最好用英文作为属性值!!!

<htmlxmlns=”http://www.w3.org/1999/xhtml”>

<head>

<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″>

<meta name=”viewport”content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0″>

<metaname=”apple-mobile-web-app-capable” content=”yes”>

<title>OpenLayers TileCacheExample</title>

<link rel=”stylesheet”href=”theme/default/style.css” type=”text/css”>

<script src=”lib/OpenLayers.js”></script>

<scripttype=”text/javascript”>

 

var sld,map,layer;

function init(){

//下面两个sld有点区别,都是正确的

 //sld = “<StyledLayerDescriptorversion=’1.0.0′><UserLayer><Name>KunMing:test_street</Name><UserStyle>       <Name>UserSelection</Name>     <FeatureTypeStyle>     <Rule>        <Filterxmlns:gml=’http://www.opengis.net/gml’>      
<PropertyIsEqualTo>    <PropertyName>Kind</PropertyName>          
<Literal>6</Literal> </PropertyIsEqualTo></Filter> <LineSymbolizer><Fill>               <CssParametername=’fill’>#0000FF</CssParameter>              </Fill> <Stroke> <CssParametername=’stroke’>#ff0000</CssParameter><CssParameter
name=’stroke-width’>8</CssParameter></Stroke>   </LineSymbolizer>         </Rule><Rule>            <LineSymbolizer>               <Stroke/>             </LineSymbolizer>              </Rule>           </FeatureTypeStyle>            </UserStyle>         </UserLayer>             
</StyledLayerDescriptor>”;

sld=”<StyledLayerDescriptor version=’1.0.0′><UserLayer><Name>KunMing:test_street</Name><UserStyle><Name>UserSelection</Name><FeatureTypeStyle><Rule><Filterxmlns:gml=’http://www.opengis.net/gml’><PropertyIsEqualTo><PropertyName>Kind</PropertyName><Literal>6</Literal></PropertyIsEqualTo></Filter><LineSymbolizer><Fill>              
<CssParametername=’fill’>#0000FF</CssParameter>              </Fill> <Stroke> <CssParametername=’stroke’>#ff0000</CssParameter><CssParametername=’stroke-width’>8</CssParameter> </Stroke>   </LineSymbolizer></Rule></FeatureTypeStyle></UserStyle></UserLayer></StyledLayerDescriptor>”;

 

 map= new OpenLayers.Map(‘map’);

              layer= new OpenLayers.Layer.WMS(“MY WMS”,

                            “http://127.0.0.1:8080/geoserver/wms”,{

                                   layers: ‘KunMing:test_street’,

                                   SLD_BODY:sld

                            });

 

       map.addLayer(layer);    

map.addControl(newOpenLayers.Control.LayerSwitcher());

//var lonlat=newOpenLayers.LonLat(-100.63477, 39.28711);

//map.setCenter(lonlat, 4);//指定地图中心与初始缩放级别

map.setCenter(newOpenLayers.LonLat(102.73961, 25.05655), 15);

map.addControl(newOpenLayers.Control.MousePosition());

}

function commit(){

var Name;

var formElement =document.getElementsByName(‘sel’)[0];

                     //  console.log(formElement.length);

                     for(i = 0; i < formElement.length; i++) {

                            if(formElement[i].selected == true) {

                                   Name= formElement[i].text; //关键是通过option对象的innerText属性获取到选项文本

                                   //alert(Name); 

                            }

                     }

var newsld = sld.replace(“白云路“,  Name);

alert(newsld);

layer.mergeNewParams({“sld_body”:newsld});

map.addLayer(layer);

}

</script>

<body onload=”init()”>

<div id=”map”style=”position:relative;width: 80%;height: 80%;border: 1px solid#ccc;”>

</div>

<form Name=’hello’>

             
输入地名: <select Name=’sel’>

                     <optionvalue=”Texas”>白龙路</option>

                     <optionvalue=”New Mexico”>白云路</option>

              </select><input type=’submit’ onclick=’commit(); return false;’ value=’查询‘ />

       </form>

</body>

</html>

说明:按钮没有起作用。原因如上所述:SLD中有汉字不能被解析,最好用英文作为属性值!!!

如果把<PropertyName>Kind</PropertyName>         
<Literal>6</Literal>
改为<PropertyName>name</PropertyName>         
<Literal>
白龙路</Literal>将不能得到结果。

改进的办法是在shapefile文件中建立一个英文字段,在select菜单中的value属性填上这些英文属性,获取时获取这些value的值,而不是text(表面显示text)。

两个SLD的区别:

Sld1 = “<StyledLayerDescriptorversion=’1.0.0′><UserLayer><Name>KunMing:test_street</Name><UserStyle>        <Name>UserSelection</Name>     <FeatureTypeStyle>     <Rule>        <Filterxmlns:gml=’http://www.opengis.net/gml’>      
<PropertyIsEqualTo>   <PropertyName>Kind</PropertyName>           <Literal>6</Literal> </PropertyIsEqualTo> </Filter> <LineSymbolizer><Fill>               <CssParametername=’fill’>#0000FF</CssParameter>              </Fill> <Stroke> <CssParametername=’stroke’>#ff0000</CssParameter><CssParametername=’stroke-width’>8</CssParameter>
</Stroke>   </LineSymbolizer>         </Rule><Rule>          
<LineSymbolizer>               <Stroke/>             </LineSymbolizer>  </Rule>               </FeatureTypeStyle>            </UserStyle>         </UserLayer>              </StyledLayerDescriptor>”;

 

Sld2 = “<StyledLayerDescriptorversion=’1.0.0′><UserLayer><Name>KunMing:test_street</Name><UserStyle>       <Name>UserSelection</Name>     <FeatureTypeStyle>     <Rule>        <Filterxmlns:gml=’http://www.opengis.net/gml’>      
<PropertyIsEqualTo>   <PropertyName>Kind</PropertyName>           <Literal>6</Literal> </PropertyIsEqualTo> </Filter> <LineSymbolizer><Fill>               <CssParametername=’fill’>#0000FF</CssParameter>              </Fill> <Stroke> <CssParametername=’stroke’>#ff0000</CssParameter><CssParametername=’stroke-width’>8</CssParameter>
</Stroke>   </LineSymbolizer>         </Rule><Rule>            <LineSymbolizer>               <Stroke/>             </LineSymbolizer>  </Rule>              </FeatureTypeStyle>           </UserStyle>         </UserLayer>              </StyledLayerDescriptor>”;

两者相差红色部分,结果前者显示了原来的默认道路,后者直接显示样式图片。

显示道路名:

sld = “<StyledLayerDescriptorversion=’1.0.0′><UserLayer><Name>KunMing:test_street</Name><UserStyle>       <Name>UserSelection</Name>     <FeatureTypeStyle>     <Rule>        <Filter xmlns:gml=’http://www.opengis.net/gml’>       
<PropertyIsEqualTo>   <PropertyName>Kind</PropertyName>           <Literal>6</Literal> </PropertyIsEqualTo> </Filter> <LineSymbolizer><Fill>               <CssParametername=’fill’>#0000FF</CssParameter>              </Fill> <Stroke> <CssParameter name=’stroke’>#ff0000</CssParameter><CssParametername=’stroke-width’>8</CssParameter>
</Stroke>   </LineSymbolizer>         <TextSymbolizer> 
<Label>             <PropertyName>name</PropertyName>  </Label>  <Font><CssParametername=’font-family’>
宋体</CssParameter>             
<CssParametername=’font-size’>20</CssParameter> <CssParametername=’font-style’>normal</CssParameter>              <CssParametername=’font-weight’>bold</CssParameter>    </Font><VendorOption name=’followLine’>true</VendorOption>          <VendorOption
name=’maxAngleDelta’>90</VendorOption><VendorOption name=’maxDisplacement’>400</VendorOption>            <VendorOptionname=’repeat’>50</VendorOption>     </TextSymbolizer></Rule><Rule>         <LineSymbolizer>               <Stroke/>               </LineSymbolizer> 
</Rule>            </FeatureTypeStyle>           </UserStyle>        </UserLayer>               </StyledLayerDescriptor>”;

总的来说有以下三种方法:第二种没能实现,可能要把文件放在Tomcat中,IIS拒绝访问,有空可以试下。

1.The client interacts with the WMSusing HTTP GET but the request can reference
a remote SLD

http://yourfavoritesite.com/WMS?
VERSION=1.1.0&
REQUEST=GetMap&
BBOX=0.0,0.0,1.0,1.0&
LAYERS=Rivers,Roads,Houses&
STYLES=CenterLine,CenterLine,Outline&
WIDTH=400&
HEIGHT=400&
FORMAT=PNG


2.The client uses the HTTP GET method but includes the SLD XML documentinline
with the GET request in an SLD_BODY CGI parameter (with appropriate
character encoding)

http://yourfavoritesite.com/WMS?
VERSION=1.0.5&
REQUEST=GetMap&
SRS=EPSG%3A4326&
BBOX=0.0,0.0,1.0,1.0&
SLD=http%3A%2F%2Fmyclientsite.com%2FmySLD.xml&
WIDTH=400&
HEIGHT=400&
FORMAT=PNG


2.The client interacts with the WMS usingHTTP POST with the GetMap request
encoded in XML and including an embedded SLD

http://yourfavoritesite.com/WMS?
VERSION=1.0.5&
REQUEST=GetMap&
SRS=EPSG%3A4326&
BBOX=0.0,0.0,1.0,1.0&
SLD_BODY=
%3C%3Fxml+version%3D%221.0%22+encoding%3D%22UTF-8%22%
3F%3E%3C!DOCTYPE+StyledLayerDescriptor+SYSTEM+%22http%3A%2F%2Fsom
.site.com%2Fsld%2Fsld_072.xsd%22%3E%3CStyledLayerDescriptor+versi
on%3D%221.0.0%22%3E%3CNamedLayer%3E%3CName%3ERivers%3C%2FName%3E%
3CNamedStyle%3E%3CName%3ECenterLine%3C%2FName%3E%3C%2FNamedStyle%
3E%3C%2FNamedLayer%3E%3CNamedLayer%3E%3CName%3ERoads%3C%2FName%3E
%3CNamedStyle%3E%3CName%3ECenterLine%3C%2FName%3E%3C%2FNamedStyle
%3E%3C%2FNamedLayer%3E%3CNamedLayer%3E%3CName%3EHouses%3C%2FName%
3E%3CNamedStyle%3E%3CName%3EOutline%3C%2FName%3E%3C%2FNamedStyle%
3E%3C%2FNamedLayer%3E%3C%2FStyledLayerDescriptor%3E&

WIDTH=400&
HEIGHT=400&
FORMAT=PNG

样式学习告一段落!

 

转载自:https://blog.csdn.net/u011135103/article/details/37834273

You may also like...