先展示更改地图样式的效果：
样式一
样式二
查看公瑾大神的文章尝试进行自己的动态样式的更改。
（1）在udig中进行简单样式的配置：
样式配置
<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
<sld:UserLayer>
<sld:LayerFeatureConstraints>
<sld:FeatureTypeConstraint/>
</sld:LayerFeatureConstraints>
<sld:UserStyle>
<sld:Name>wuhu</sld:Name>
<sld:FeatureTypeStyle>
<sld:Name>group 0</sld:Name>
<sld:FeatureTypeName>Feature</sld:FeatureTypeName>
<sld:Rule>
<sld:Name>rule01</sld:Name>
<sld:Title>南陵县</sld:Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>name</ogc:PropertyName>
<ogc:Literal>南陵县</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<sld:PolygonSymbolizer>
<sld:Fill>
<sld:CssParameter name="fill">#7FC97F</sld:CssParameter>
<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>
</sld:Fill>
<sld:Stroke>
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
</sld:Stroke>
</sld:PolygonSymbolizer>
<sld:TextSymbolizer>
<sld:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</sld:Label>
<sld:Font>
<sld:CssParameter name="font-family">黑体</sld:CssParameter>
<sld:CssParameter name="font-size">12.0</sld:CssParameter>
<sld:CssParameter name="font-style">normal</sld:CssParameter>
<sld:CssParameter name="font-weight">bold</sld:CssParameter>
</sld:Font>
<sld:LabelPlacement>
<sld:PointPlacement>
<sld:AnchorPoint>
<sld:AnchorPointX>0.0</sld:AnchorPointX>
<sld:AnchorPointY>0.0</sld:AnchorPointY>
</sld:AnchorPoint>
<sld:Displacement>
<sld:DisplacementX>0.0</sld:DisplacementX>
<sld:DisplacementY>0.0</sld:DisplacementY>
</sld:Displacement>
</sld:PointPlacement>
</sld:LabelPlacement>
<sld:Fill>
<sld:CssParameter name="fill">#000000</sld:CssParameter>
</sld:Fill>
</sld:TextSymbolizer>
</sld:Rule>
<sld:Rule>
<sld:Name>rule02</sld:Name>
<sld:Title>无为县</sld:Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>name</ogc:PropertyName>
<ogc:Literal>无为县</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<sld:PolygonSymbolizer>
<sld:Fill>
<sld:CssParameter name="fill">#BEAED4</sld:CssParameter>
<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>
</sld:Fill>
<sld:Stroke>
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
</sld:Stroke>
</sld:PolygonSymbolizer>
<sld:TextSymbolizer>
<sld:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</sld:Label>
<sld:Font>
<sld:CssParameter name="font-family">黑体</sld:CssParameter>
<sld:CssParameter name="font-size">12.0</sld:CssParameter>
<sld:CssParameter name="font-style">normal</sld:CssParameter>
<sld:CssParameter name="font-weight">bold</sld:CssParameter>
</sld:Font>
<sld:LabelPlacement>
<sld:PointPlacement>
<sld:AnchorPoint>
<sld:AnchorPointX>0.0</sld:AnchorPointX>
<sld:AnchorPointY>0.0</sld:AnchorPointY>
</sld:AnchorPoint>
<sld:Displacement>
<sld:DisplacementX>0.0</sld:DisplacementX>
<sld:DisplacementY>0.0</sld:DisplacementY>
</sld:Displacement>
</sld:PointPlacement>
</sld:LabelPlacement>
<sld:Fill>
<sld:CssParameter name="fill">#000000</sld:CssParameter>
</sld:Fill>
</sld:TextSymbolizer>
</sld:Rule>
<sld:Rule>
<sld:Name>rule03</sld:Name>
<sld:Title>繁昌县</sld:Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>name</ogc:PropertyName>
<ogc:Literal>繁昌县</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<sld:PolygonSymbolizer>
<sld:Fill>
<sld:CssParameter name="fill">#FDC086</sld:CssParameter>
<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>
</sld:Fill>
<sld:Stroke>
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
</sld:Stroke>
</sld:PolygonSymbolizer>
<sld:TextSymbolizer>
<sld:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</sld:Label>
<sld:Font>
<sld:CssParameter name="font-family">黑体</sld:CssParameter>
<sld:CssParameter name="font-size">12.0</sld:CssParameter>
<sld:CssParameter name="font-style">normal</sld:CssParameter>
<sld:CssParameter name="font-weight">bold</sld:CssParameter>
</sld:Font>
<sld:LabelPlacement>
<sld:PointPlacement>
<sld:AnchorPoint>
<sld:AnchorPointX>0.0</sld:AnchorPointX>
<sld:AnchorPointY>0.0</sld:AnchorPointY>
</sld:AnchorPoint>
<sld:Displacement>
<sld:DisplacementX>0.0</sld:DisplacementX>
<sld:DisplacementY>0.0</sld:DisplacementY>
</sld:Displacement>
</sld:PointPlacement>
</sld:LabelPlacement>
<sld:Fill>
<sld:CssParameter name="fill">#000000</sld:CssParameter>
</sld:Fill>
</sld:TextSymbolizer>
</sld:Rule>
<sld:Rule>
<sld:Name>rule04</sld:Name>
<sld:Title>芜湖县</sld:Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>name</ogc:PropertyName>
<ogc:Literal>芜湖县</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<sld:PolygonSymbolizer>
<sld:Fill>
<sld:CssParameter name="fill">#FFFF99</sld:CssParameter>
<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>
</sld:Fill>
<sld:Stroke>
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
</sld:Stroke>
</sld:PolygonSymbolizer>
<sld:TextSymbolizer>
<sld:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</sld:Label>
<sld:Font>
<sld:CssParameter name="font-family">黑体</sld:CssParameter>
<sld:CssParameter name="font-size">12.0</sld:CssParameter>
<sld:CssParameter name="font-style">normal</sld:CssParameter>
<sld:CssParameter name="font-weight">bold</sld:CssParameter>
</sld:Font>
<sld:LabelPlacement>
<sld:PointPlacement>
<sld:AnchorPoint>
<sld:AnchorPointX>0.0</sld:AnchorPointX>
<sld:AnchorPointY>0.0</sld:AnchorPointY>
</sld:AnchorPoint>
<sld:Displacement>
<sld:DisplacementX>0.0</sld:DisplacementX>
<sld:DisplacementY>0.0</sld:DisplacementY>
</sld:Displacement>
</sld:PointPlacement>
</sld:LabelPlacement>
<sld:Fill>
<sld:CssParameter name="fill">#000000</sld:CssParameter>
</sld:Fill>
</sld:TextSymbolizer>
</sld:Rule>
<sld:Rule>
<sld:Name>rule05</sld:Name>
<sld:Title>芜湖市区</sld:Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>name</ogc:PropertyName>
<ogc:Literal>芜湖市区</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<sld:PolygonSymbolizer>
<sld:Fill>
<sld:CssParameter name="fill">#386CB0</sld:CssParameter>
<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>
</sld:Fill>
<sld:Stroke>
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
</sld:Stroke>
</sld:PolygonSymbolizer>
<sld:TextSymbolizer>
<sld:Label>
<ogc:PropertyName>name</ogc:PropertyName>
</sld:Label>
<sld:Font>
<sld:CssParameter name="font-family">黑体</sld:CssParameter>
<sld:CssParameter name="font-size">12.0</sld:CssParameter>
<sld:CssParameter name="font-style">normal</sld:CssParameter>
<sld:CssParameter name="font-weight">bold</sld:CssParameter>
</sld:Font>
<sld:LabelPlacement>
<sld:PointPlacement>
<sld:AnchorPoint>
<sld:AnchorPointX>0.0</sld:AnchorPointX>
<sld:AnchorPointY>0.0</sld:AnchorPointY>
</sld:AnchorPoint>
<sld:Displacement>
<sld:DisplacementX>0.0</sld:DisplacementX>
<sld:DisplacementY>0.0</sld:DisplacementY>
</sld:Displacement>
</sld:PointPlacement>
</sld:LabelPlacement>
<sld:Fill>
<sld:CssParameter name="fill">#000000</sld:CssParameter>
</sld:Fill>
</sld:TextSymbolizer>
</sld:Rule>
</sld:FeatureTypeStyle>
</sld:UserStyle>
</sld:UserLayer>
</sld:StyledLayerDescriptor>
对Sld文件进行修改：
修改Sld文件
'<?xml version="1.0" encoding="GBK"?>'+'<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">'+
'<sld:UserLayer>'+
'<sld:LayerFeatureConstraints>'+
'<sld:FeatureTypeConstraint/>'+
'</sld:LayerFeatureConstraints>'+
'<sld:UserStyle>'+
'<sld:Name>'+wuhu+'</sld:Name>'+
'<sld:FeatureTypeStyle>'+
'<sld:Name>group 0</sld:Name>'+
'<sld:FeatureTypeName>Feature</sld:FeatureTypeName>'+
'<sld:SemanticTypeIdentifier>generic:geometry</sld:SemanticTypeIdentifier>'+
'<sld:SemanticTypeIdentifier>colorbrewer:unique:accents</sld:SemanticTypeIdentifier>'+
'<sld:Rule>'+
'<sld:Name>rule01</sld:Name>'+
'<sld:Title>南陵县</sld:Title>'+
'<ogc:Filter>'+
'<ogc:PropertyIsEqualTo>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'<ogc:Literal>南陵县</ogc:Literal>'+
'</ogc:PropertyIsEqualTo>'+
'</ogc:Filter>'+
'<sld:PolygonSymbolizer>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#7FC97F</sld:CssParameter>'+
'<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>'+
'</sld:Fill>'+
'<sld:Stroke>'+
'<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>'+
'</sld:Stroke>'+
'</sld:PolygonSymbolizer>'+
'<sld:TextSymbolizer>'+
'<sld:Label>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'</sld:Label>'+
'<sld:Font>'+
'<sld:CssParameter name="font-family">黑体</sld:CssParameter>'+
'<sld:CssParameter name="font-size">12.0</sld:CssParameter>'+
'<sld:CssParameter name="font-style">normal</sld:CssParameter>'+
'<sld:CssParameter name="font-weight">bold</sld:CssParameter>'+
'</sld:Font>'+
'<sld:LabelPlacement>'+
'<sld:PointPlacement>'+
'<sld:AnchorPoint>'+
'<sld:AnchorPointX>0.0</sld:AnchorPointX>'+
'<sld:AnchorPointY>0.0</sld:AnchorPointY>'+
'</sld:AnchorPoint>'+
'<sld:Displacement>'+
'<sld:DisplacementX>0.0</sld:DisplacementX>'+
'<sld:DisplacementY>0.0</sld:DisplacementY>'+
'</sld:Displacement>'+
'</sld:PointPlacement>'+
'</sld:LabelPlacement>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#000000</sld:CssParameter>'+
'</sld:Fill>'+
'</sld:TextSymbolizer>'+
'</sld:Rule>'+
'<sld:Rule>'+
'<sld:Name>rule02</sld:Name>'+
'<sld:Title>无为县</sld:Title>'+
'<ogc:Filter>'+
'<ogc:PropertyIsEqualTo>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'<ogc:Literal>无为县</ogc:Literal>'+
'</ogc:PropertyIsEqualTo>'+
'</ogc:Filter>'+
'<sld:PolygonSymbolizer>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#BEAED4</sld:CssParameter>'+
'<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>'+
'</sld:Fill>'+
'<sld:Stroke>'+
'<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>'+
'</sld:Stroke>'+
'</sld:PolygonSymbolizer>'+
'<sld:TextSymbolizer>'+
'<sld:Label>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'</sld:Label>'+
'<sld:Font>'+
'<sld:CssParameter name="font-family">黑体</sld:CssParameter>'+
'<sld:CssParameter name="font-size">12.0</sld:CssParameter>'+
'<sld:CssParameter name="font-style">normal</sld:CssParameter>'+
'<sld:CssParameter name="font-weight">bold</sld:CssParameter>'+
'</sld:Font>'+
'<sld:LabelPlacement>'+
'<sld:PointPlacement>'+
'<sld:AnchorPoint>'+
'<sld:AnchorPointX>0.0</sld:AnchorPointX>'+
'<sld:AnchorPointY>0.0</sld:AnchorPointY>'+
'</sld:AnchorPoint>'+
'<sld:Displacement>'+
'<sld:DisplacementX>0.0</sld:DisplacementX>'+
'<sld:DisplacementY>0.0</sld:DisplacementY>'+
'</sld:Displacement>'+
'</sld:PointPlacement>'+
'</sld:LabelPlacement>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#000000</sld:CssParameter>'+
'</sld:Fill>'+
'</sld:TextSymbolizer>'+
'</sld:Rule>'+
'<sld:Rule>'+
'<sld:Name>rule03</sld:Name>'+
'<sld:Title>繁昌县</sld:Title>'+
'<ogc:Filter>'+
'<ogc:PropertyIsEqualTo>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'<ogc:Literal>繁昌县</ogc:Literal>'+
'</ogc:PropertyIsEqualTo>'+
'</ogc:Filter>'+
'<sld:PolygonSymbolizer>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#FDC086</sld:CssParameter>'+
'<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>'+
'</sld:Fill>'+
'<sld:Stroke>'+
'<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>'+
'</sld:Stroke>'+
'</sld:PolygonSymbolizer>'+
'<sld:TextSymbolizer>'+
'<sld:Label>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'</sld:Label>'+
'<sld:Font>'+
'<sld:CssParameter name="font-family">黑体</sld:CssParameter>'+
'<sld:CssParameter name="font-size">12.0</sld:CssParameter>'+
'<sld:CssParameter name="font-style">normal</sld:CssParameter>'+
'<sld:CssParameter name="font-weight">bold</sld:CssParameter>'+
'</sld:Font>'+
'<sld:LabelPlacement>'+
'<sld:PointPlacement>'+
'<sld:AnchorPoint>'+
'<sld:AnchorPointX>0.0</sld:AnchorPointX>'+
'<sld:AnchorPointY>0.0</sld:AnchorPointY>'+
'</sld:AnchorPoint>'+
'<sld:Displacement>'+
'<sld:DisplacementX>0.0</sld:DisplacementX>'+
'<sld:DisplacementY>0.0</sld:DisplacementY>'+
'</sld:Displacement>'+
'</sld:PointPlacement>'+
'</sld:LabelPlacement>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#000000</sld:CssParameter>'+
'</sld:Fill>'+
'</sld:TextSymbolizer>'+
'</sld:Rule>'+
'<sld:Rule>'+
'<sld:Name>rule04</sld:Name>'+
'<sld:Title>芜湖县</sld:Title>'+
'<ogc:Filter>'+
'<ogc:PropertyIsEqualTo>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'<ogc:Literal>芜湖县</ogc:Literal>'+
'</ogc:PropertyIsEqualTo>'+
'</ogc:Filter>'+
'<sld:PolygonSymbolizer>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#FFFF99</sld:CssParameter>'+
'<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>'+
'</sld:Fill>'+
'<sld:Stroke>'+
'<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>'+
'</sld:Stroke>'+
'</sld:PolygonSymbolizer>'+
'<sld:TextSymbolizer>'+
'<sld:Label>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'</sld:Label>'+
'<sld:Font>'+
'<sld:CssParameter name="font-family">黑体</sld:CssParameter>'+
'<sld:CssParameter name="font-size">12.0</sld:CssParameter>'+
'<sld:CssParameter name="font-style">normal</sld:CssParameter>'+
'<sld:CssParameter name="font-weight">bold</sld:CssParameter>'+
'</sld:Font>'+
'<sld:LabelPlacement>'+
'<sld:PointPlacement>'+
'<sld:AnchorPoint>'+
'<sld:AnchorPointX>0.0</sld:AnchorPointX>'+
'<sld:AnchorPointY>0.0</sld:AnchorPointY>'+
'</sld:AnchorPoint>'+
'<sld:Displacement>'+
'<sld:DisplacementX>0.0</sld:DisplacementX>'+
'<sld:DisplacementY>0.0</sld:DisplacementY>'+
'</sld:Displacement>'+
'</sld:PointPlacement>'+
'</sld:LabelPlacement>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#000000</sld:CssParameter>'+
'</sld:Fill>'+
'</sld:TextSymbolizer>'+
'</sld:Rule>'+
'<sld:Rule>'+
'<sld:Name>rule05</sld:Name>'+
'<sld:Title>芜湖市区</sld:Title>'+
'<ogc:Filter>'+
'<ogc:PropertyIsEqualTo>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'<ogc:Literal>芜湖市区</ogc:Literal>'+
'</ogc:PropertyIsEqualTo>'+
'</ogc:Filter>'+
'<sld:PolygonSymbolizer>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#386CB0</sld:CssParameter>'+
'<sld:CssParameter name="fill-opacity">0.5</sld:CssParameter>'+
'</sld:Fill>'+
'<sld:Stroke>'+
'<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>'+
'</sld:Stroke>'+
'</sld:PolygonSymbolizer>'+
'<sld:TextSymbolizer>'+
'<sld:Label>'+
'<ogc:PropertyName>name</ogc:PropertyName>'+
'</sld:Label>'+
'<sld:Font>'+
'<sld:CssParameter name="font-family">黑体</sld:CssParameter>'+
'<sld:CssParameter name="font-size">12.0</sld:CssParameter>'+
'<sld:CssParameter name="font-style">normal</sld:CssParameter>'+
'<sld:CssParameter name="font-weight">bold</sld:CssParameter>'+
'</sld:Font>'+
'<sld:LabelPlacement>'+
'<sld:PointPlacement>'+
'<sld:AnchorPoint>'+
'<sld:AnchorPointX>0.0</sld:AnchorPointX>'+
'<sld:AnchorPointY>0.0</sld:AnchorPointY>'+
'</sld:AnchorPoint>'+
'<sld:Displacement>'+
'<sld:DisplacementX>0.0</sld:DisplacementX>'+
'<sld:DisplacementY>0.0</sld:DisplacementY>'+
'</sld:Displacement>'+
'</sld:PointPlacement>'+
'</sld:LabelPlacement>'+
'<sld:Fill>'+
'<sld:CssParameter name="fill">#000000</sld:CssParameter>'+
'</sld:Fill>'+
'</sld:TextSymbolizer>'+
'</sld:Rule>'+
'</sld:FeatureTypeStyle>'+
'</sld:UserStyle>'+
'</sld:UserLayer>'+
'</sld:StyledLayerDescriptor>'
在文件中进行代码的修改
添加sld.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态更改样式</title>
<link rel="stylesheet" href="OLSrc/ol.css">
<script src="OLSrc/ol.js"></script>
<script src="JS/SLD.js"></script>
<style type="text/css">
#map,html,body{
height: 100%;
width: 100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var layers= [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:66/geoserver/Wuhu/wms',
params:{
'FORMAT': 'image/png',
'TILED':true,
sld_body:get_sld('Wuhu:wuhu')
},
serverType:'geoserver'
})
})
];
var map = new ol.Map({
interaction: ol.interaction.defaults({
doubleClickZoom:false
}) ,
layers: layers,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center:[118.392, 31.357],
zoom: 10,
logo: false
})
});
</script>
</html>
在params参数中添加sld_body属性，在页面代码中添加sld.js文件。直接使用sld.js文件的get_sld函数传入参数：图层名（Wuhu:wuhu）。页面刷新更改样式。
注意：在params中不要写'LAYER':'图层名'，加载就是GeoServer中默认的地图样式。
另一种Sld url方法更改地图样式。
网友评论