【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>

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

相关推荐
ReBeX2 天前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis
undefined&&懒洋洋3 天前
Cesium使用flyToBoundingSphere实现倾斜相机视角观察物体
前端·javascript·cesium·webgis
supermapsupport3 天前
SuperMap GIS基础产品FAQ集锦(20241104)
java·javascript·gis·supermap·webgis
GIS瞧葩菜6 天前
GeoSever发布图层(保姆姬)
wms·geoserver·cesium
纸飞机的旅行7 天前
如何快速使用Cesium完成项目
vue.js·webgis
qbbmnnnnnn13 天前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理拓展图层顺序调整功能
vue.js·webgl·三维可视化·cesium·vue3.0·webgis·vuedraggable
T0uken1 个月前
【WebGIS】Cesium:Viewer 初始化、地图加载与基础交互
gis·cesium·webgis
qbbmnnnnnn1 个月前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理基础
前端·wmts·cesium·vue3.0·webgis·3dtiles·图层管理
GIS开发特训营1 个月前
开源 Three.js 案例及入门教程
开发语言·javascript·gis·gis开发·webgis·三维gis
qbbmnnnnnn1 个月前
【WebGis开发 - Cesium】三维可视化项目教程---初始化场景
gis·三维可视化·cesium·webgis