【WebGIS实例】（16）GeoServer 自定义样式 - 渲染矢量数据

1. 前言

本篇博客将会分享一系列的 GeoServer 样式，通过这些样式预先在服务端完成数据渲染，让前端应用更便捷的加载数据服务。

2. 面矢量

示例数据：

{type:'FeatureCollection',features:[{type:'Feature',properties:{分类字段:'字段一'},geometry:{coordinates:[[[158,44],[158,40],[165,40],[165,44],[158,44]]],type:'Polygon'},id:0},{type:'Feature',properties:{分类字段:'字段二'},geometry:{coordinates:[[[158,39],[158,36],[165,36],[165,39],[158,39]]],type:'Polygon'}},{type:'Feature',properties:{分类字段:'字段三'},geometry:{coordinates:[[[166,44],[166,41],[174,41],[174,44],[166,44]]],type:'Polygon'}},{type:'Feature',properties:{分类字段:'字段四'},geometry:{coordinates:[[[166,40],[166,36],[174,36],[174,40],[166,40]]],type:'Polygon'}}]}

2.1. 无描边单色填充

<?xml version="1.0" encoding="UTF-8"?><StyledLayerDescriptorxmlns="http://www.opengis.net/sld"xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd"version="1.1.0"xmlns:ogc="http://www.opengis.net/ogc"xmlns:se="http://www.opengis.net/se"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xlink="http://www.w3.org/1999/xlink"><NamedLayer><se:Name>面矢量</se:Name><UserStyle><se:Name>面矢量</se:Name><se:FeatureTypeStyle><se:Rule><se:Name>无描边单色填充</se:Name><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#417656</se:SvgParameter></se:Fill></se:PolygonSymbolizer></se:Rule></se:FeatureTypeStyle></UserStyle></NamedLayer></StyledLayerDescriptor>

修改上述代码中的

#417656

即可改变配色。

2.2. 描边单色填充

<?xml version="1.0" encoding="UTF-8"?><StyledLayerDescriptorxmlns="http://www.opengis.net/sld"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:se="http://www.opengis.net/se"version="1.1.0"xmlns:ogc="http://www.opengis.net/ogc"xmlns:xlink="http://www.w3.org/1999/xlink"xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd"><NamedLayer><se:Name>面矢量</se:Name><UserStyle><se:Name>面矢量</se:Name><se:FeatureTypeStyle><se:Rule><se:Name>描边单色填充</se:Name><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#417656</se:SvgParameter></se:Fill><se:Stroke><se:SvgParametername="stroke">#000</se:SvgParameter><se:SvgParametername="stroke-width">1</se:SvgParameter><se:SvgParametername="stroke-linejoin">bevel</se:SvgParameter></se:Stroke></se:PolygonSymbolizer></se:Rule></se:FeatureTypeStyle></UserStyle></NamedLayer></StyledLayerDescriptor>

2.3. 根据属性字段分类填充

<?xml version="1.0" encoding="UTF-8"?><StyledLayerDescriptorxmlns="http://www.opengis.net/sld"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:se="http://www.opengis.net/se"version="1.1.0"xmlns:ogc="http://www.opengis.net/ogc"xmlns:xlink="http://www.w3.org/1999/xlink"xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd"><NamedLayer><se:Name>面矢量</se:Name><UserStyle><se:Name>面矢量</se:Name><se:FeatureTypeStyle><se:Rule><se:Name>字段一</se:Name><se:Description><se:Title>字段一</se:Title></se:Description><ogc:Filterxmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>分类字段</ogc:PropertyName><ogc:Literal>字段一</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#f7fbff</se:SvgParameter></se:Fill></se:PolygonSymbolizer></se:Rule><se:Rule><se:Name>字段二</se:Name><se:Description><se:Title>字段二</se:Title></se:Description><ogc:Filterxmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>分类字段</ogc:PropertyName><ogc:Literal>字段二</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#c8dcf0</se:SvgParameter></se:Fill></se:PolygonSymbolizer></se:Rule><se:Rule><se:Name>字段三</se:Name><se:Description><se:Title>字段三</se:Title></se:Description><ogc:Filterxmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>分类字段</ogc:PropertyName><ogc:Literal>字段三</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#73b2d8</se:SvgParameter></se:Fill></se:PolygonSymbolizer></se:Rule><se:Rule><se:Name>字段四</se:Name><se:Description><se:Title>字段四</se:Title></se:Description><ogc:Filterxmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>分类字段</ogc:PropertyName><ogc:Literal>字段四</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter><se:PolygonSymbolizer><se:Fill><se:SvgParametername="fill">#2979b9</se:SvgParameter></se:Fill></se:PolygonSymbolizer></se:Rule></se:FeatureTypeStyle></UserStyle></NamedLayer></StyledLayerDescriptor>

持续（缓慢）更新……