OpenLayers动态修改GeoServer发布的地图样式

流程思路

1.改写GeoServer相应的SLD，使其支持动态修改样式；
2.修改前端请求WMS服务参数。

修改GeoServer的SLD

该部分在GeoServer官网上有说明，想了解更多请访问GeoServer官网：https://docs.geoserver.org/stable/en/user/styling/sld/extensions/substitution.html#sld-variable-substitution
GeoServer从2.0.2开始支持通过改变请求参数来动态改变WMS服务的SLD样式，如改变字体、大小、颜色等。

示例

本文以动态修改点状符号的类型、颜色和大小为例进行说明。

常规状态下SLD写法

常规状态下要渲染点的颜色和大小，其SLD如下：

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
  <NamedLayer>
    <UserStyle>
      <Title>Default point</Title>
      <Abstract>A sample style that just prints out a 6px wide red square</Abstract>

      <FeatureTypeStyle>
        <Rule>
          <Title>Red square</Title>
          <PointSymbolizer>
            <Graphic>
              <Mark>
                <WellKnownName>square</WellKnownName>
                <Fill>
                  <CssParameter name="fill">#FF0000</CssParameter>
                </Fill>
              </Mark>
              <Size>6</Size>
            </Graphic>
          </PointSymbolizer>
        </Rule>

      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

该样式下渲染结果如下图：

需动态修改状态下的SLD

在需修改的关键点处已标明注释

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
  <NamedLayer>
    <UserStyle>
      <Title>Default point</Title>
      <Abstract>A sample style that just prints out a 6px wide red square</Abstract>

      <FeatureTypeStyle>
        <Rule>
          <Title>Red square</Title>
          <PointSymbolizer>
            <Graphic>
              <Mark>
                <WellKnownName>
                 <!--此处将点符号类型改为函数类型的-->
                  <ogc:Function name="env">
                    <!--name为前端调用时符号类型的参数名-->
                      <ogc:Literal>name</ogc:Literal>
                      <!--默认符号类型-->
                      <ogc:Literal>square</ogc:Literal>
                   </ogc:Function>
                </WellKnownName>
                <Fill>
                  <CssParameter name="fill">
				  <!--此处将颜色值改为函数类型的-->
                    #<ogc:Function name="env">
					  <!--color为前端调用时颜色的参数名-->
                      <ogc:Literal>color</ogc:Literal>
					  <!--默认颜色值-->
                      <ogc:Literal>FF0000</ogc:Literal>
                   </ogc:Function>
                  </CssParameter>
                </Fill>
              </Mark>
              <Size>
			     <!--此处将大小改为函数类型的-->
                 <ogc:Function name="env">
				    <!--size为前端调用时符号大小的参数名-->
                    <ogc:Literal>size</ogc:Literal>
					<!--默认大小-->
                    <ogc:Literal>6</ogc:Literal>
                 </ogc:Function>
              </Size>
            </Graphic>
          </PointSymbolizer>
        </Rule>

      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

OpenLayers调用核心代码

var raster = new ol.layer.Tile({
      source: new ol.source.TileWMS({
		url: 'geoserver 服务地址',
			params: { 
				LAYERS: '图层名称', 
				VERSION: "1.1.1", 
				env:'color:00FF00;name:triangle;size:12'  //重点处：修改点状符号为：绿色、三角形、大小为12						
			}
		})
    });

其渲染结果如图所示：

扫描下方二维码，关注微信公众号，精彩内容同步更新