基于geoserver的伪三维地图制作

实现2.5维地图
最新推荐文章于 2025-07-28 15:29:01 发布
转载 最新推荐文章于 2025-07-28 15:29:01 发布 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/17230
文章标签：

#前端 #游戏 #数据库 #ViewUI

本文介绍如何使用geoserver和openlayers等开源工具实现2.5维地图效果，并通过不同比例尺设置来切换二维与2.5维显示。

小伙伴在用百度高德这类地图的时候有木有发现当地图放大到一定倍数之后就会出现三维效果（2.5纬）。作为一个爱寻根究底的人，我们一定会问，这种地图是如何实现的呢？基于arcgis或者超图吗？NONONO，这类软件太贵！基于Unity3D这类开源的三维引擎做的？NONONO,这是真三维地图。笔者的原则就是能用开源软件就绝不会用商业软件。由于现在主流的制作web地图的开源软件是geoserver+openlayers+postgresql。因此笔者就思索如何基于geoserver和openlayer制作一个伪三维地图。

由于geoserver不支持直接导入三维模型，隐藏笔者直接着眼于sld，看看能不能通过sld来表达三维效果，经过网上的搜索，找到了类似的配置，试验一下成功。

<?xml version="1.0" encoding="ISO-8859-1"?>  
<StyledLayerDescriptor version="1.0.0"   
    xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"   
    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">  
    <!-- a Named Layer is the basic building block of an SLD document -->  
    <NamedLayer>  
        <Name>default_polygon</Name>  
        <UserStyle>  
            <!-- Styles can have names, titles and abstracts -->  
            <Title>Default Polygon</Title>  
            <Abstract>A sample style that draws a polygon</Abstract>  
            <!-- FeatureTypeStyles describe how to render different features -->  
            <!-- A FeatureTypeStyle for rendering polygons -->  
            <FeatureTypeStyle>  
                <Rule>  
                    <PolygonSymbolizer>  
                        <Geometry>  
                            <ogc:Function name="isometric">  
                                <ogc:PropertyName>geom</ogc:PropertyName>  
                                <ogc:Literal>0.00001</ogc:Literal>  
                            </ogc:Function>  
                        </Geometry>  
                        <Fill>  
                            <CssParameter name="fill">#dddddd</CssParameter>  
                        </Fill>  
                        <Stroke>  
                            <CssParameter name="stroke">#999999</CssParameter>  
                            <CssParameter name="stroke-width">0.1</CssParameter>  
                        </Stroke>  
                    </PolygonSymbolizer>  
                </Rule>  
            </FeatureTypeStyle>  
            <FeatureTypeStyle>  
                <Rule>  
                    <PolygonSymbolizer>  
                        <Geometry>  
                            <ogc:Function name="offset">  
                                <ogc:PropertyName>geom</ogc:PropertyName>  
                                <ogc:Literal>0</ogc:Literal>  
                                <ogc:Literal>0.00001</ogc:Literal>  
                            </ogc:Function>  
                        </Geometry>  
                        <Fill>  
                            <CssParameter name="fill">#ffffe0</CssParameter>  
                        </Fill>  
                        <Stroke>  
                            <CssParameter name="stroke">#999999</CssParameter>  
                            <CssParameter name="stroke-width">0.1</CssParameter>  
                        </Stroke>  
                    </PolygonSymbolizer>  
                </Rule>  
            </FeatureTypeStyle>  
        </UserStyle>  
    </NamedLayer>  
</StyledLayerDescriptor>

OK，可以看到三维效果。

但是，总感觉有点不对劲。于是打开百度地图，看看别人家的实现。发现他们在地图缩小的时候是二维效果，只有当地图放大到一定级别之后才会显示2.5纬效果。这种效果如何实现呢？很简单。把地图的样式设为按照比例尺进行表达，不同的比例尺有不同的效果了，当放大到设定的比例尺时显示三维效果。

<?xml version="1.0" encoding="UTF-8"?>
<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" version="1.0.0">
    <sld:UserLayer>
        <sld:LayerFeatureConstraints>
            <sld:FeatureTypeConstraint/>
        </sld:LayerFeatureConstraints>
        <sld:UserStyle>
            <sld:Name>hikvision2qi b3 tingchewei</sld:Name>
            <sld:FeatureTypeStyle>
                <sld:Name>group 0</sld:Name>
                <sld:FeatureTypeName>Feature</sld:FeatureTypeName>
                <sld:SemanticTypeIdentifier>generic:geometry</sld:SemanticTypeIdentifier>
                <sld:SemanticTypeIdentifier>simple</sld:SemanticTypeIdentifier>
                <sld:Rule>
                    <sld:Name>Large</sld:Name>
                    <sld:MaxScaleDenominator>200.0</sld:MaxScaleDenominator>
                    <sld:PolygonSymbolizer>
					 <sld:Geometry>  
                            <ogc:Function name="isometric">  
                                <ogc:PropertyName>geom</ogc:PropertyName>  
                                <ogc:Literal>0.00001</ogc:Literal>  
                            </ogc:Function>  
                        </sld:Geometry>  
                        <sld:Fill>
                            <sld:CssParameter name="fill">#FFE7A6</sld:CssParameter>
                        </sld:Fill>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#E8D1AE</sld:CssParameter>
                            <sld:CssParameter name="stroke-width">0.2</sld:CssParameter>
                        </sld:Stroke>
                    </sld:PolygonSymbolizer>
                    <sld:TextSymbolizer>
                        <sld:Label>
                            <ogc:PropertyName>number</ogc:PropertyName>
                        </sld:Label>
                        <sld:Font>
                            <sld:CssParameter name="font-family">Arial</sld:CssParameter>
                            <sld:CssParameter name="font-size">12.0</sld:CssParameter>
                            <sld:CssParameter name="font-style">normal</sld:CssParameter>
                            <sld:CssParameter name="font-weight">normal</sld:CssParameter>
                        </sld:Font>
                        <sld:LabelPlacement>
                            <sld:PointPlacement>
                                <sld:AnchorPoint>
                                    <sld:AnchorPointX>0.5</sld:AnchorPointX>
                                    <sld:AnchorPointY>0.5</sld:AnchorPointY>
                                </sld:AnchorPoint>
                                <sld:Displacement>
                                    <sld:DisplacementX>0.0</sld:DisplacementX>
                                    <sld:DisplacementY>0.0</sld:DisplacementY>
                                </sld:Displacement>
                                <sld:Rotation>
                                    <ogc:PropertyName>lblrotate</ogc:PropertyName>
                                </sld:Rotation>
                            </sld:PointPlacement>
                        </sld:LabelPlacement>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#404040</sld:CssParameter>
                        </sld:Fill>
                        <sld:VendorOption name="maxDisplacement">0</sld:VendorOption>
						<sld:VendorOption name="spaceAround">-5</sld:VendorOption>
                    </sld:TextSymbolizer>
                </sld:Rule>
                <sld:Rule>
                    <sld:Name>small</sld:Name>
                    <sld:MinScaleDenominator>200.0</sld:MinScaleDenominator>
                    <sld:MaxScaleDenominator>400.0</sld:MaxScaleDenominator>
                    <sld:PolygonSymbolizer>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#FFE7A6</sld:CssParameter>
                        </sld:Fill>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#E8D1AE</sld:CssParameter>
                            <sld:CssParameter name="stroke-width">0.2</sld:CssParameter>
                        </sld:Stroke>
                    </sld:PolygonSymbolizer>
                    <sld:TextSymbolizer>
                        <sld:Label>
                            <ogc:PropertyName>number</ogc:PropertyName>
                        </sld:Label>
                        <sld:Font>
                            <sld:CssParameter name="font-family">Arial</sld:CssParameter>
                            <sld:CssParameter name="font-size">10.0</sld:CssParameter>
                            <sld:CssParameter name="font-style">normal</sld:CssParameter>
                            <sld:CssParameter name="font-weight">normal</sld:CssParameter>
                        </sld:Font>
                        <sld:LabelPlacement>
                            <sld:PointPlacement>
                                <sld:AnchorPoint>
                                    <sld:AnchorPointX>0.5</sld:AnchorPointX>
                                    <sld:AnchorPointY>0.5</sld:AnchorPointY>
                                </sld:AnchorPoint>
                                <sld:Displacement>
                                    <sld:DisplacementX>0.0</sld:DisplacementX>
                                    <sld:DisplacementY>0.0</sld:DisplacementY>
                                </sld:Displacement>
                                <sld:Rotation>
                                    <ogc:PropertyName>lblrotate</ogc:PropertyName>
                                </sld:Rotation>
                            </sld:PointPlacement>
                        </sld:LabelPlacement>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#404040</sld:CssParameter>
                        </sld:Fill>
                        <sld:VendorOption name="maxDisplacement">0</sld:VendorOption>
            <sld:VendorOption name="spaceAround">-5</sld:VendorOption>
                    </sld:TextSymbolizer>
                </sld:Rule>
         <sld:Rule>
                    <sld:Name>medium</sld:Name>
                    <sld:MinScaleDenominator>400.0</sld:MinScaleDenominator>
                    <sld:MaxScaleDenominator>600.0</sld:MaxScaleDenominator>
                    <sld:PolygonSymbolizer>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#FFE7A6</sld:CssParameter>
                        </sld:Fill>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#E8D1AE</sld:CssParameter>
                            <sld:CssParameter name="stroke-width">0.2</sld:CssParameter>
                        </sld:Stroke>
                    </sld:PolygonSymbolizer>
                    <sld:TextSymbolizer>
                        <sld:Label>
                            <ogc:PropertyName>number</ogc:PropertyName>
                        </sld:Label>
                        <sld:Font>
                            <sld:CssParameter name="font-family">Arial</sld:CssParameter>
                            <sld:CssParameter name="font-size">6.0</sld:CssParameter>
                            <sld:CssParameter name="font-style">normal</sld:CssParameter>
                            <sld:CssParameter name="font-weight">normal</sld:CssParameter>
                        </sld:Font>
                        <sld:LabelPlacement>
                            <sld:PointPlacement>
                                <sld:AnchorPoint>
                                    <sld:AnchorPointX>0.5</sld:AnchorPointX>
                                    <sld:AnchorPointY>0.5</sld:AnchorPointY>
                                </sld:AnchorPoint>
                                <sld:Displacement>
                                    <sld:DisplacementX>0.0</sld:DisplacementX>
                                    <sld:DisplacementY>0.0</sld:DisplacementY>
                                </sld:Displacement>
                                <sld:Rotation>
                                    <ogc:PropertyName>lblrotate</ogc:PropertyName>
                                </sld:Rotation>
                            </sld:PointPlacement>
                        </sld:LabelPlacement>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#404040</sld:CssParameter>
                        </sld:Fill>
                        <sld:VendorOption name="maxDisplacement">0</sld:VendorOption>
            <sld:VendorOption name="spaceAround">-5</sld:VendorOption>
                    </sld:TextSymbolizer>
                </sld:Rule>
                <sld:Rule>
                    <sld:Name>Smallest</sld:Name>
                    <sld:MinScaleDenominator>600.0</sld:MinScaleDenominator>
                    <sld:PolygonSymbolizer>
                        <sld:Fill>
                            <sld:CssParameter name="fill">#FFE7A6</sld:CssParameter>
                        </sld:Fill>
                        <sld:Stroke>
                            <sld:CssParameter name="stroke">#E8D1AE</sld:CssParameter>
                            <sld:CssParameter name="stroke-width">0.2</sld:CssParameter>
                        </sld:Stroke>
                    </sld:PolygonSymbolizer>
                </sld:Rule>
            </sld:FeatureTypeStyle>
			<sld:FeatureTypeStyle>  
                <sld:Rule>
					<sld:Name>Large</sld:Name>
                    <sld:MaxScaleDenominator>200.0</sld:MaxScaleDenominator>				
                    <sld:PolygonSymbolizer>  
                        <sld:Geometry>  
                            <ogc:Function name="offset">  
                                <ogc:PropertyName>geom</ogc:PropertyName>  
                                <ogc:Literal>0</ogc:Literal>  
                                <ogc:Literal>0.00001</ogc:Literal>  
                            </ogc:Function>  
                        </sld:Geometry>  
                        <sld:Fill>  
                            <sld:CssParameter name="fill">#d8e5f2</sld:CssParameter>  
                        </sld:Fill>  
                        <sld:Stroke>  
                            <sld:CssParameter name="stroke">#999999</sld:CssParameter>  
                            <sld:CssParameter name="stroke-width">0.1</sld:CssParameter>  
                        </sld:Stroke>  
                    </sld:PolygonSymbolizer>  
                </sld:Rule>  
            </sld:FeatureTypeStyle>   
        </sld:UserStyle>
    </sld:UserLayer>
</sld:StyledLayerDescriptor>


地图之家总目录
GIS之家家长
02-28 1万+
地图之家总目录 cesium示例 leaflet示例
城乡规划转型GIS开发：数字化浪潮下的职业突
2403_88103571的博客
02-13 2993
国土空间规划一张图”“数字孪生城市”“实景三维中国”——近年来，国家政策与科技风口将地理信息技术（GIS）推向热潮。反观城乡规划行业：传统规划设计院缩编降薪，地产行业震荡，考编竞争白热化。当“画图民工”遭遇职业瓶颈，一群城乡规划人正悄悄将目光投向GIS开发赛道。在新中地就有这样一群人，通过城规转型GIS开发成功就业。那么，城规为何能丝滑转型GIS开发？小白怎么转？有哪些注意事项？今天给大家好好聊聊。
geoserver三维_基于geoserver的伪三维地图制作
weixin_39520775的博客
12-20 1720
小伙伴在用百度高德这类地图的时候有木有发现当地图放大到一定倍数之后就会出现三维效果(2.5纬)。作为一个爱寻根究底的人，我们一定会问，这种地图是如何实现的呢？基于arcgis或者超图吗？NONONO，这类软件太贵！基于Unity3D这类开源的三维引擎做的？NONONO,这是真三维地图。笔者的原则就是能用开源软件就绝不会用商业软件。由于现在主流的制作web地图的开源软件是geoserver+open...
VUE+echart绘制地图（伪3D）
一起学习一起进步~
04-28 678
首先我们需要创建一个div来盛放地图，这里的div必须给出对应的宽和高，不然地图无法显示！地图数据json可以根据自己的项目需求去修改，无固定要求！导入改vue界面，并以BaoJi表示。）和data数值即可。
OpenLayers3基础之上开发的二三维离线地图演示系统
最新发布
weixin_36231030的博客
07-28 902
OpenLayers 3是一个功能强大的开源Web GIS客户端库，它允许开发者在网页中嵌入交互式的地图，并提供了丰富的API来控制地图的显示和行为。作为Web GIS领域的佼佼者，OpenLayers 3以其高性能和灵活性受到开发者青睐。离线地图在许多应用场景中不可或缺，特别是在网络覆盖不全或无法使用的环境中。当用户处于地下室、飞机、偏远地区或者在进行紧急救援行动时，一个预先下载好的离线地图能够提供极大的帮助。离线地图的必要性主要体现在以下几个方面：网络依赖性降低。
access设计视图打不开_5、使用数据视图创建表（ACCESS图解操作系列）
weixin_39698217的博客
11-22 2530
操作要求：在D:Access目录下有一ACCESS数据库“教学管理.accdb”。1、利用表的“数据视图”创建如右图的“学生－数据视图”表知识要点：1、如何利用表的数据视图创建数据表。2、注意利用数据视图创建表时，字段数据类型的默认情况。操作说明： 上节向同学们介绍了ACCESS中表的基本的、也是最重要的创建方法“设计器”设计。通过该方法，我们能按照实际的要求来对表的整个结构进行设计。本节将介绍另...
geoserver三维_使用Geoserver和Google Earth打造三维GIS展示系统
weixin_39575410的博客
12-20 1198
给图层添加高度数据，需要根据实体几何类型分别处理。对于面，例如行政区界或建筑物，需要创建一个高度模板文件。对于线(点)，例如架空电缆，高程将直接从图形数据中读取。GeoServer 1.7.1及以上版本支持输出三维面的KML(KMZ)，1.7.6及以上版本支持输出三维线(点)的KML(KMZ)。发布三维面图层：用Geoserver发布三维面的过程非常简单，测试中我们使用Geoserver自带的示例...
用MapXtreme创建仿三维地图
weixin_30933531的博客
01-09 108
现在WebGIS已经很火热了，仿三维的WebGIS也雨后春笋地冒出来，广州本土测绘企业http://www.o.cn/更是热得不得了，广州地铁里都是用了他们的地图，知名度飙升不少。 用MapXtheme进行开发，能否实现类似的功能呢？ 答案是可以的，不过最基础的，还是要借助http://www.o.cn/的地图来实现。 在GIS领域里，有一个重要的概念“栅格”，意思就是把地图映射为矩阵...
openlayers 伪3d底图
02-20
关于“伪3D底图”的实现，在OpenLayers中通常是通过一些特定的技术手段让二维地图呈现出三维效果的一种视觉表达形式。以下是几种常见的做法： ### 使用倾斜影像 一种简单的方式是利用预先处理好的带有一定的角度...
vue + echarts(5.2.1)仿3d地图
qq_42619759的博客
10-24 2115
vue + echarts(5.2.1)仿3d地图 飞线 坐标标点 区域默认选中 轮询选中区域
基于geoServer搭建的一个离线地图服务器
02-09
基于geoserver搭建的一个离线地图服务器,翻不了墙,国内的百度谷歌又满足不了地图需求,就自己整理了一个,亲测可用,有需要的可用下载借鉴一下...
基于geoserver专题图
03-28
NULL 博文链接：https://smartgwt.iteye.com/blog/1206807
Web 3D Service (W3DS) in Geoserver
04-28
The availability of 3D data \on demand", through a service The development of web clients where 3D data can be fully explored, while minimizing data communication
基于GeoServer开发的地理场景可视化系统
不爱赖床的懒虫博客
07-18 2336
图层预览模块是为了方便系统的使用者可以直观的去查看所部署至服务器中的地理图层，用户可根据左侧所构建的图层管理模块，选择服务器中所部署的图层进行预览。用户可在上方图(a)中输入服务器网址或选用本系统的地图服务器来加载服务器中的图层数据，选中任意空间数据便可在右侧的preview框中进行地理场景的预览。属性配置界面中的初始数据为服务器中所存储的图层信息，用户可结合自身需求进行图层信息的修改，以实现大规模地理场景的可视化分析。通过勾选模块中的图层并调节图层属性，便可实现多图层的可视化分析。...
vue中Echarts实现伪3D地图
q_qman的博客
10-21 4282
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图： 2.代码 <template> <div ref="myEchart" class="map-echart"> </div> </template> <script> import echarts from 'echarts' export def
二维下，行政区划借助 geoserver样式配置，实现伪3d效果
冰雪为融的博客
07-26 1769
二维下，行政区划借助 geoserver样式配置，实现伪3d效果
基于开源geoserver-manager发布自定义的数据源和图层(java)
hsg77的专栏
07-15 3336
基于开源geoserver-manager发布自定义的数据源和图层(java) 调用方法： String zookeeper="node111:2181,node112:2181,node113:2181"; GeoServerUtil.createWorkspace("hsg"); GeoServerUtil.publisher.removeWorkspace("hsg",true); GeoS...
使用Geoserver和Google Earth打造三维GIS展示系统
iwillsw的专栏
10-27 7629
给图层添加高度数据，需要根据实体几何类型分别处理。对于面，例如行政区界或建筑物，需要创建一个高度模板文件。对于线（点），例如架空电缆，高程将直接从图形数据中读取。GeoServer 1.7.1及以上版本支持输出三维面的KML(KMZ)，1.7.6及以上版本支持输出三维线（点）的KML(KMZ)。›发布三维面图层：用Geoserver发布三维面的过程非常简单，测试中我
geoserver三维
04-25
### GeoServer 支持的三维地图服务类型及功能 GeoServer 虽然以其强大的二维地图服务能力闻名，但在三维地图服务的支持方面也有一定的扩展性和潜力。尽管其原生功能并不完全专注于三维领域，但可以通过与其他技术栈集成来实现丰富的三维地图服务。 #### 1. **WMS 3D 扩展** 虽然标准 WMS 主要针对二维地图设计，但一些客户端（如 OpenLayers 或 Cesium）已经实现了对 WMS 数据的三维渲染支持。这意味着即使 GeoServer 自身不直接提供专门的三维服务接口，也可以借助这些客户端工具将发布的 WMS 层转化为三维视图[^2]。例如，在 Cesium 中加载来自 GeoServer 的 WMS 图层后，可以利用地形数据叠加形成逼真的三维效果。 #### 2. **与外部三维框架结合** 为了更好地满足日益增长的三维需求，GeoServer 可以配合其他专业的三维 GIS 平台共同作业。比如提到过的企业级解决方案 GeniusWorld 2.0 C 版本便具备强大而全面的三维处理能力，包括但不限于 SG 格式、Geo3DML 格式以及初步兼容 BIM 和 3DTiles 数据的能力[^3]。这种组合方式不仅保留了 GeoServer 在传统矢量/栅格数据分发上的优势，还弥补了自身对于复杂三维场景构建经验不足的问题。 #### 3. **实验性质插件开发** 社区贡献者们也在不断探索新的可能性，尝试为 GeoServer 添加更多面向未来的三维特性。目前已有若干处于测试阶段或者有限可用状态下的插件项目致力于增强该产品的立体表现力，像 CityGML 插件就是其中一个例子，它允许导入并共享城市级别规模内的精细建筑模型集合[^4]。 综上所述，尽管当前版本下 GeoServer 对应于纯粹意义上的独立型完整三维地图服务体系尚显稚嫩；然而凭借灵活开放架构所带来的无限延展空间，再加上周边生态系统的鼎力相助，则完全可以胜任大多数常规性的三维地理信息展示任务。 ```javascript // 示例代码片段 - 在 Cesium 中加载 GeoServer 发布的 WMS 图层作为三维底图 var viewer = new Cesium.Viewer('cesiumContainer'); var imageryLayer = new Cesium.WebMapServiceImageryProvider({ url : 'http://localhost:8080/geoserver/wms', layers : 'topp:states' }); viewer.imageryLayers.addImageryProvider(imageryLayer); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值