基于geoserver的伪三维地图制作

小伙伴在用百度高德这类地图的时候有木有发现当地图放大到一定倍数之后就会出现三维效果（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>

时间： 2024-11-02 00:02:08

基于geoserver的伪三维地图制作的相关文章

都市圈：为谁绘制三维地图

为创业梦想死磕到底还是选择更为务实的道路,喻红星曾在两者之间摇摆不定,现在他选择了前者,但这也不意味着一定会成功. 文|CBN记者 李娜 实习记者 韩季芝 打开网站,输入始发地和目的地,查询吃喝玩乐行的最佳路线,这是电子地图网站的最基本功能.给这些平面地图一些立体的感觉,再让这些"立体"更真实一些-喻红星的"都市圈"不同于其他电子地图网站的地方就在这里.他的设想是创立一个可以"与真实接轨"的三维地图网站. 在创业之前,喻红星曾经在太平洋保险从事过

opengl es-基于OpenGL的三维地图可视化移动客户端设计上的问题

问题描述 基于OpenGL的三维地图可视化移动客户端设计上的问题 请问大神,什么样的代码能实现,在android应用中显示.OBJ格式的文件用以显示三维地图?

搜狗地图宣布开放三维地图API 九月推语音导航

9月7日消息,近日,http://www.aliyun.com/zixun/aggregation/12831.html">互联网地图服务商搜狗地图正式对外开放三维地图API.三维地图API的开放,让地图应用的展现更加形象.逼真,网民可以在二维.卫星和三维地图之间自由轻松切换,将极大提升各个合作网站的用户体验. 据悉,搜狗地图的三维数据由E都市独家提供,覆盖了全国84个大中型城市,城市数量正在逐步增加.与此前搜狗地图开放的API相同,三维地图API还将继续以免费的形式供合作伙伴使用. 此前

旋转geoserver发布的wms地图

以前都是以为访问geoserver发布的wms地图是不能旋转的,旋转要通过wfs的方式来访问地图.现在通过wms方式也可以使地图旋转.方法就是在正常的访问地图url后面加上&angle=XXX即可. http://10.33.31.14:89/geoserver/parking/wms?service=WMS&version=1.1.0&request=GetMap&layers=parking:tingchewei&styles=&bbox=120.215

基于asp.net的百度地图API编程

问题描述 基于asp.net的百度地图API编程 在地图上的给某个覆盖物添加事件,点击这个覆盖物后出现信息框,信息框的数据从数据库里读出. 解决方案 http://developer.baidu.com/map/jsdemo.htm#d0_2http://developer.baidu.com/map/jsdemo.htm#d0_1http://developer.baidu.com/map/jsdemo.htm#d0_4http://developer.baidu.com/map/jsdemo

基于busybox的Linux小系统制作 （initrd）

我们有时候有需要在busybox基础上,制作linux,可是却不知道具体怎么做,这里将对基于busybox的linux小系统制作做出详细的步骤说明.准备环境:1.一个Redhat完整系统的虚拟机,本次实例使用的是Redhat Enterprise Linux 5.82.在主虚拟机上添加一块硬盘作为小系统的存储盘,这里添加的是IDE硬盘,3.准备linux内核源码以及busybox源码,这里使用linux-2.6.38.5和busybox-1.20.2版本4.复制当前系统上的内核配置(/usr/s

模仿百度三维地图的js数据分享_javascript技巧

百度三维地图的js数据格式:mapData["sign"] ["5,158,141"]={"busStation":{"4,317,282": [{"id":"ff8080811c462eb7011d2e23d5b91083","name":"地安门站","y":579152,"x":650606}, {&q

E都市/三维地图程序/都市圈/魅力城市，开源3.1版本。带API接口完整演示

问题描述 E都市/三维地图程序/都市圈/魅力城市,开源3.1版本.带API接口完整演示http://www.gugegu.cn详细介绍空间使用的是国外空间所以慢了些有意的朋友请直接电话联系!QQ:6970766英语阅读网·_·喜欢在给和英语的朋友永远欢迎您!www.enrtm.com祝你在站内SEE的愉快!版主们请原谅.在此一贴.^_^ 解决方案 解决方案二:路过接分....解决方案三:jf解决方案四:jf解决方案五:JF,路过

Illustrator设计漂亮的三维线条制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计漂亮的三维线条的制作教程. 教程分享:         好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的设计漂亮的三维线条的制作教程继续分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是很清楚了三维线条制作方法了吧,那么各位就快去按照小编上面给大家分享的教程自己去尝试着制作吧.