动态改变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