基于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>

基于geoserver的伪三维地图制作相关推荐

基于cesium的二三维地图
一.项目简介基于cesium的二三维地图二.实现功能支持虚线和阴影支持以标注的方式显示属性支持要素查询支持二三维度地球显示支持小数据量文件矢量动态切片三.技术选型 Cesium pro ...
三维地图制作数据选型相关参考资料
一.三维遥感底图在大范围的三维地图建设中,采用卫星图像作为三维底图是最好的选择,而免费的遥感图像清晰度无法满足建设 **三维地图的需求,故以**范围为依据,购买取得最新的高空间分辨率卫星遥感图. 卫 ...
基于Geoserver配置多图层地图以及利用uDig来进行样式配置
在GeoServer中配置多个图层的地图相对来说很容易,其步骤为: 1. 进入geoserver 2. 配置相关的FeatureTypes 3. 配置WMS内容,进入以后,主要有以下几个地方需要命名: ...
ESMap平台如何制作多楼层室内三维地图-易景空间地图
随着三维可视化技术和空间定位数据技术的不断发展,三维地图呈现已经不断成熟,特别是在智慧园区.智慧工业.智慧能源.智慧商城等领域,三维地图的应用场景得到了进一步的发展.易景空间的ESMap平台利用地图编 ...
什么地图制作软件好用，简单的地图绘制软件
随着信息社会的到来,智能手机的快速崛起正在改变着人们的生活方式.伴随着大型.巨型建筑物的拔地而起,在这些复杂的建筑物内,人们发现在这里也会迷路.导航,不再是室外的专有功能,室内也需要.有了室内地图,足 ...
商场室内地图-室内地图开发-室内三维地图开发
在当下的移动互联网时代,室外地图领域炉火纯青的技术已经充分地满足了我们关于室外定位.导航的各种需求.但在室内,人们却经常会因为在商场找不到一个洗手间.朋友聚餐找不到饭店,停车场的茫茫车海里找不到一个停 ...
echart 三维可视化地图_揭秘720°三维全景3D实景地图制作技术
近两年来三维全景3D实景地图在三维虚拟现实领域中占有相当大的地位.目前的三维720°线上三维实景展示基本都是通过商迪3D三维全景建模与3d全景地图技术制作.例如:VR游戏.智慧城市规划项目.智慧房地产 ...
基于三维地图的可视化工厂优势
物联网技术.5G技术的不断发展,也为工厂行业的精细化.智能化管理建设打下了基础,解决工厂管理粗放.人员效率低.设备故障多,处理慢等相关问题. 可视化工厂基于工厂CAD图纸与现场实景图片,制作高精度的 ...
Excel真的是三维地图可视化制作最好的选择吗？
随着数据在当下互联网快速发展下变的维度更广,数量更大.结构越来越复杂,人们想要更加清晰,快速的认知和理解一份数据,传统的二维平面图表已经不能满足需求,三维可视化技术越结合多媒体技术.网络技术以及三维镜 ...

基于geoserver的伪三维地图制作

基于geoserver的伪三维地图制作相关推荐

最新文章

热门文章