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地图的意义，因为图片的话就不具备地图数据的浏览和后期的开发了，仅仅作为一个展示系统意义不大。失败

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