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

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

giscoder 2019-11-26 10:33:19  403  收藏

分类专栏： 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

}

})

    });

其渲染结果如图所示：

————————————————

版权声明：本文为CSDN博主「giscoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/giscoder/article/details/103251623