eCharts二三維地圖總結

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

1.背景

最近多個項目中的登錄頁面陸續提出了不少地圖需求，主要圍繞地圖的立體感、交互等設計。業主爸爸，即使登錄頁也要整出花樣，希望有眼前一亮的感覺，比如：

 

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

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

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

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

d.一般的二維地圖引擎實現不了以上地圖傾斜立體的需求（即使實現，也比較麻煩，請查看《基於圖片實現酷炫地圖展示和交互的方案》https://www.cnblogs.com/naaoveGIS/p/8136432.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/

                                                                       如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^