1.別人的效果

        作為一個GIS專業的，做一個高大上的GIS系統一直是我的夢想，雖然至今為止還沒有做出一個理想中的系統，但是偶爾看看別人做的，學習下別人的技術還是很有必要的。眼睛是最容易誤導我們的，有時候看著炫酷的效果，可能只是因為一點視覺誤差，本文用一個別人的系統介面來解析如何實現一個小區域的立體地圖效果。

        上圖就是別人的系統，吸引我的不止是濃濃科技感的佈局配色，還有那中間凸起的帶立體效果的影像圖區域。

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