WebGIS简单实现一个区域炫酷的3D立体地图效果

1.别人的效果

作为一个GIS专业的，做一个高大上的GIS系统一直是我的梦想，虽然至今为止还没有做出一个理想中的系统，但是偶尔看看别人做的，学习下别人的技术还是很有必要的。眼睛是最容易误导我们的，有时候看着炫酷的效果，可能只是因为一点视觉误差，本文用一个别人的系统界面来解析如何实现一个小区域的立体地图效果。

　　　　　　　　　　图片来源：http://www.popodv.com/ui.html#&gid=1&pid=39

上图就是别人的系统，吸引我的不止是浓浓科技感的布局配色，还有那中间凸起的带立体效果的影像图区域。

2.技术分析

作为一个GIS专业毕业的，又从事GIS开发7年的老鸟，我试着来想想如何实现中间地图的立体区域效果。

想法1：

立体效果可以看做一个阴影，css3中有一个box-shadow属性可以试试。这个是前端的常规做法，但是如果放到GIS地图可能就比较困难了，毕竟地图数据是放到地图插件里面来呈现的(当然也可以自己写个地图插件，有这个能力请忽略本文章，大神走好)，如果使用现有主流的ArcGIS JS、OL3、leaflet或者百度、高德、谷歌的API，估计都没有提供直接阴影渲染的接口，更何况只是其中的一个区域呢。放弃

想法2：

图片覆盖层，记得当年弄百度地图API的时候，有一个图层叫overlay的，可以将图片的4个角固定到地图的4个点，然后图片就可以跟随地图的缩放移动。我想可以直接弄一张图片做成立体效果放到地图上面。当然这样可以实现上图的效果，但是脱离了GIS地图的意义，因为图片的话就不具备地图数据的浏览和后期的开发了，仅仅作为一个展示系统意义不大。失败

        

于是我把这个图发到了几个朋友的群里(都是做技术的)，一个朋友提点了我，膜拜！！！

该朋友是他们公司GIS专员，负责他厂关于GIS的一切技术。不由感叹，同九义汝河秀！

于是简单的分析了下，这样的立体效果实现可以用自发布地图服务来实现，其中涉及到4个图层：

        图层1：底图

        图层2：带条纹渲染填充的区域边界，向南偏移10（随便写的，做一个假设和比较）

        图层3：带条纹渲染填充的区域边界，向南偏移8（随便写的，做一个假设和比较）

        图层4：图层2、3区域的影像图，不偏移

3.写在最后

以上技术分析仅为个人拙见，如果有更好的实现方法，请不吝赐教。

　　

　　查看更多GIS、WPF、JAVA、前端技术分享，请访问我的个人技术网站，查看更多技术分享。网站地址：www.88gis.cn