eCharts二三維地圖總結

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

最近多個項目中的登陸頁面陸續提出了很多地圖需求，主要圍繞地圖的立體感、交互等設計。業主爸爸，即便登陸頁也要整出花樣，但願有眼前一亮的感受，好比：

 

搞GIS的同窗遇到地圖問題，習慣性的就是引入地圖引擎，可是仔細分析這類頁面，它真的須要引入一個龐大的地圖引擎來解決嗎？

a.地圖引擎太大，不利於登陸頁加載效率。

b.該地圖並不強調座標系等等，也不強調地圖的精細度，發揮不了地圖引擎方案（加上配圖）的優點。

c.以上交互不多，僅僅是打點、和圖層選中交互。

d.通常的二維地圖引擎實現不了以上地圖傾斜立體的需求（即便實現，也比較麻煩，請查看《基於圖片實現酷炫地圖展現和交互的方案》http://www.javashuo.com/article/p-utlqgeai-gm.html），須要基於三維引擎。

針對這些問題，最近讓ysj同窗分別對echarts和echarts-gl地圖作了一下方案總結。針對SHP處理成geojson格式不作累述，這裏主要記錄一下總結和效果。

2.echarts地圖

Echarts地圖能夠實現：

1. 自定義地圖數據，可是須要爲經緯度座標系的geojson格式數據。
2. 可與echarts熱力集成。
3. 能夠經過設定symbol的type，實現打點，有交互事件。
4. 能夠經過設定symbol的type，實現聚類圓餅，模擬聚類效果。
5. 能夠經過設置雙層地圖的思想，分別對總體地圖和各要素分別設置不一樣的樣式，實現地圖總體輪廓邊框和內部要素邊框展現不一樣樣式的效果。
6. 能夠經過增長陰影和偏移，實現立體的效果。

總體展現以下：

 

3.echarts-gl地圖

用echarts二維地圖模擬的立體效果並非真正的三維，也沒法真正的傾斜，只是一種視覺效果而已。Echarts的三維地圖中，其屬性略有不一樣，可是思路大同小異，這裏直接給出最後總體效果：

 

 

　　

　　　　　　　　　　　　　　　　　　　　     -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                       若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^