【WebGIS实例】（16）GeoServer 自定义样式 - 渲染矢量数据
ReBeX 2024-10-03 08:33:00 阅读 71
1. 前言
本篇博客将会分享一系列的 GeoServer 样式，通过这些样式预先在服务端完成数据渲染，让前端应用更便捷的加载数据服务。
2. 面矢量
示例数据：
<code>{ -- -->
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. 无描边单色填充
<code><?xml version="1.0" encoding="UTF-8"?>code>
<StyledLayerDescriptor xmlns="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">code>
<NamedLayer>
<se:Name>面矢量</se:Name>
<UserStyle>
<se:Name>面矢量</se:Name>
<se:FeatureTypeStyle>
<se:Rule>
<se:Name>无描边单色填充</se:Name>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#417656</se:SvgParameter>code>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
</se:FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
修改上述代码中的 #417656 即可改变配色。
2.2. 描边单色填充
<code><?xml version="1.0" encoding="UTF-8"?>code>
<StyledLayerDescriptor xmlns="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">code>
<NamedLayer>
<se:Name>面矢量</se:Name>
<UserStyle>
<se:Name>面矢量</se:Name>
<se:FeatureTypeStyle>
<se:Rule>
<se:Name>描边单色填充</se:Name>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#417656</se:SvgParameter>code>
</se:Fill>
<se:Stroke>
<se:SvgParameter name="stroke">#000</se:SvgParameter>code>
<se:SvgParameter name="stroke-width">1</se:SvgParameter>code>
<se:SvgParameter name="stroke-linejoin">bevel</se:SvgParameter>code>
</se:Stroke>
</se:PolygonSymbolizer>
</se:Rule>
</se:FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
2.3. 根据属性字段分类填充
<code><?xml version="1.0" encoding="UTF-8"?>code>
<StyledLayerDescriptor xmlns="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">code>
<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:Filter xmlns:ogc="http://www.opengis.net/ogc">code>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>分类字段</ogc:PropertyName>
<ogc:Literal>字段一</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#f7fbff</se:SvgParameter>code>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
<se:Rule>
<se:Name>字段二</se:Name>
<se:Description>
<se:Title>字段二</se:Title>
</se:Description>
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">code>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>分类字段</ogc:PropertyName>
<ogc:Literal>字段二</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#c8dcf0</se:SvgParameter>code>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
<se:Rule>
<se:Name>字段三</se:Name>
<se:Description>
<se:Title>字段三</se:Title>
</se:Description>
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">code>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>分类字段</ogc:PropertyName>
<ogc:Literal>字段三</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#73b2d8</se:SvgParameter>code>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
<se:Rule>
<se:Name>字段四</se:Name>
<se:Description>
<se:Title>字段四</se:Title>
</se:Description>
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">code>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>分类字段</ogc:PropertyName>
<ogc:Literal>字段四</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<se:PolygonSymbolizer>
<se:Fill>
<se:SvgParameter name="fill">#2979b9</se:SvgParameter>code>
</se:Fill>
</se:PolygonSymbolizer>
</se:Rule>
</se:FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
持续（缓慢）更新……
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。