二维下，行政区划借助 geoserver样式配置，实现伪3d效果

冰雪为融

已于 2022-07-26 16:26:38 修改

阅读量1.3k

点赞数 1

分类专栏： OpenLayers geoserver 文章标签： css 前端

于 2022-07-26 16:24:39 首次发布

本文链接：https://blog.csdn.net/lhjuejiang/article/details/125997162

版权

OpenLayers 同时被 2 个专栏收录

20 篇文章 8 订阅

订阅专栏

geoserver

5 篇文章 0 订阅

订阅专栏

参考文章：通过sld样式拉伸渲染为伪3d建筑的地图效果通过geoserver发布 - 灰信网（软件开发博客聚合）

SLD 样式之GeoServer中设计2.5维建筑物 - fengl - 博客园

最终效果图如下：

首先要知道拉伸的对象是建筑或者其他附着设施，即面图层，点和线要素不存在高度的拉伸。

配置中关注一下内容：

主要是isometric和offset两个ogc:function的名称
isometric方法名中

     <Geometry>
          <ogc:Function name="isometric">
            <ogc:PropertyName>the_geom</ogc:PropertyName>
            <ogc:Literal>0.08</ogc:Literal>
          </ogc:Function>
     </Geometry>
 
/*
第一个参数the_geom是指空间数据类型的字段名称，在geoserver中发布矢量数据的时候能看到要素
的属性字段，一般情况下空间数据类型的默认字段名称就是the_geom。
第二个参数是指拉伸长度值单位与要素所在坐标系一致
*/

然后设置 offset偏移量

<PolygonSymbolizer>
        <Geometry>
          <ogc:Function name="offset">
            <ogc:PropertyName>the_geom</ogc:PropertyName>
            <ogc:Literal>0</ogc:Literal>
            <ogc:Literal>150</ogc:Literal>
          
          </ogc:Function>
        </Geometry>
        <Fill>
          <CssParameter name="fill">#BAD8E2</CssParameter>
          <CssParameter name="fill-opacity">1</CssParameter>
        </Fill>
    
</PolygonSymbolizer>
 
 
/*
    这里都是固定的拉伸值和偏移量，在实际应用中可以借助地理要的字段进行要素的拉伸，将
    <ogc:Literal>的属性换成<ogc:PropertyName>height</ogc:PropertyName>height是指字段名
*/

四、问题总结
问题一：比如设置函数offset的X,Y偏移量，因为坐标系原因，你写的值太小比如0.001或者太大比如100000等，导致看不到这种效果，所以根据情况先慢慢增大Y值的偏移量看有没有伪三维的效果。

<code> <ogc:Literal>0</ogc:Literal>
<ogc:Literal>0.08</ogc:Literal> </code>

问题二：设置函数offset的偏移量Y值，但是没有和isometric函数的拉伸值保持一致，所以导致伪三维效果不好看，所以最好保持offset的Y值和isometric函数的拉伸值保持一致。
问题三：配色问题，一定要选好颜色，比如百度那种就不错，让人开起来想三维的。

上面效果图实现：

叠加三个wms图层，然后配置不同的样式（第一层是正常的样式，不设置偏移等属性），注意：wms顺序也需要注意一下

下面是两个偏移的sld文件

1、设置偏移 0.08

<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
    <sld:UserLayer>
        <sld:LayerFeatureConstraints>
            <sld:FeatureTypeConstraint/>
        </sld:LayerFeatureConstraints>
        <sld:UserStyle>
            <sld:Name>Default Styler</sld:Name>
            <sld:FeatureTypeStyle>
                <sld:Name>group0</sld:Name>
                <sld:FeatureTypeName>Feature</sld:FeatureTypeName>
                <sld:Rule>
                    <sld:Name>default rule</sld:Name>
                    <sld:PolygonSymbolizer>
                        <sld:Geometry>
                            <ogc:Function name="isometric">
                                <ogc:PropertyName>the_geom</ogc:PropertyName>
                                <ogc:Literal>0.08</ogc:Literal>
                            </ogc:Function>
                        </sld:Geometry>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#001E39</sld:CssParameter>
                            <sld:CssParameter name="fill-opacity">0.61</sld:CssParameter>
                        </sld:Fill>
                       
                    </sld:PolygonSymbolizer>
                    <sld:PolygonSymbolizer>
                        <sld:Geometry>
                            <ogc:Function name="offset">
                                <ogc:PropertyName>the_geom</ogc:PropertyName>
                                <ogc:Literal>0</ogc:Literal>
                                <ogc:Literal>-0.08</ogc:Literal>
                            </ogc:Function>
                        </sld:Geometry>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#001E39</sld:CssParameter>
                        </sld:Fill><Stroke>
          <CssParameter name="stroke">#4B96B6</CssParameter>
          <CssParameter name="stroke-width">0.5</CssParameter>
        </Stroke>
                    </sld:PolygonSymbolizer>
                </sld:Rule>
            </sld:FeatureTypeStyle>
        </sld:UserStyle>
    </sld:UserLayer>
</sld:StyledLayerDescriptor>

第二个样式：设置偏移 0.16

<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
    <sld:UserLayer>
        <sld:LayerFeatureConstraints>
            <sld:FeatureTypeConstraint/>
        </sld:LayerFeatureConstraints>
        <sld:UserStyle>
            <sld:Name>Default Styler</sld:Name>
            <sld:FeatureTypeStyle>
                <sld:Name>group0</sld:Name>
                <sld:FeatureTypeName>Feature</sld:FeatureTypeName>
                <sld:Rule>
                    <sld:Name>default rule</sld:Name>
                    <sld:PolygonSymbolizer>
                        <sld:Geometry>
                            <ogc:Function name="isometric">
                                <ogc:PropertyName>the_geom</ogc:PropertyName>
                                <ogc:Literal>0.16</ogc:Literal>
                            </ogc:Function>
                        </sld:Geometry>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#001E39</sld:CssParameter>
                            <sld:CssParameter name="fill-opacity">0.61</sld:CssParameter>
                        </sld:Fill>
                       
                    </sld:PolygonSymbolizer>
                    <sld:PolygonSymbolizer>
                        <sld:Geometry>
                            <ogc:Function name="offset">
                                <ogc:PropertyName>the_geom</ogc:PropertyName>
                                <ogc:Literal>0</ogc:Literal>
                                <ogc:Literal>-0.16</ogc:Literal>
                            </ogc:Function>
                        </sld:Geometry>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#001E39</sld:CssParameter>
                        </sld:Fill><Stroke>
          <CssParameter name="stroke">#4B96B6</CssParameter>
          <CssParameter name="stroke-width">0.5</CssParameter>
        </Stroke>
                    </sld:PolygonSymbolizer>
                </sld:Rule>
            </sld:FeatureTypeStyle>
        </sld:UserStyle>
    </sld:UserLayer>
</sld:StyledLayerDescriptor>