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

1. 前言

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

2. 面矢量

示例数据

json 复制代码
{
  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 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<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">
  <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>
            </se:Fill>
          </se:PolygonSymbolizer>
        </se:Rule>
      </se:FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

修改上述代码中的 #417656 即可改变配色。

2.2. 描边单色填充

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<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">
  <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>
            </se:Fill>
            <se:Stroke>
              <se:SvgParameter name="stroke">#000</se:SvgParameter>
              <se:SvgParameter name="stroke-width">1</se:SvgParameter>
              <se:SvgParameter name="stroke-linejoin">bevel</se:SvgParameter>
            </se:Stroke>
          </se:PolygonSymbolizer>
        </se:Rule>
      </se:FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

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

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<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">
  <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">
            <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>
            </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">
            <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>
            </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">
            <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>
            </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">
            <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>
            </se:Fill>
          </se:PolygonSymbolizer>
        </se:Rule>
      </se:FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

持续(缓慢)更新......

相关推荐
熟悉不过19 天前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab
supermapsupport25 天前
SuperMap GIS基础产品FAQ集锦(20250402)
gis·supermap·webgis·idesktopx·iclient3d
星火19131425 天前
arcgis jsapi 4.31 调用geoserver 发布的wms服务
arcgis·geoserver
该怎么办呢1 个月前
Cesium双击放大地图
javascript·cesium·webgis
喆星时瑜1 个月前
地理信息可视化技术大全【WebGIS 教程一】
信息可视化·gis·开发·地图·webgis
GIS好难学2 个月前
考研出分24小时,人类精神状态图鉴
前端·考研·gis·gis开发·webgis·地信
wv1124062 个月前
请求Geoserver的WTMS服务返回200不返回图片问题-跨域导致
geoserver·跨域·wtms
GIS学姐嘉欣2 个月前
DeepSeek预测25考研分数线
前端·考研·gis·webgis
白嫖叫上我3 个月前
Ceisum无人机巡检直播视频投射
无人机·cesium·webgis
GIS学姐嘉欣3 个月前
GIS开发及计算机就业主流技术岗
前端·学习·gis·webgis