EChart中使用地圖方式總結（轉載）

EChart中使用地圖方式總結

2018年02月06日 22:18:57

來源：https://blog.csdn.net/shaxiaozilove/article/details/79274772

      最近在仿照EChart公交線路方向示例，開發表示排水網和污水網流向地圖，同時地圖上須要疊加排放口、污染源、污水處理廠等要素。因爲以前沒有用過EChart，尤爲是EChart的地圖功能，琢磨嘗試好久，終於弄明白了地圖上面、線及點要素的加載及顯示方法，總結以下。

      一、底圖的加載

      通常地圖都須要底圖，EChart中底圖的數據來源，有三種方式，分別以下：

（1）百度地圖。須要引入百度地圖API，具體使用方法參見官方示例（http://echarts.baidu.com/examples/editor.html?c=lines-bmap-effect，以下左圖），此時series中引入的其餘要素層中，coordinateSystem 的值必須設置爲 'bmap'，也就是其它層的數據，以bmap地圖做爲空間座標系統的參照，以下右圖：

                         

（2）json及registerMap的方式。這種方式底圖數據以json（geojson）格式存儲，具體geojson的格式（參考http://geojson.org/）及轉換爲geojson的方法（可採用Mapshaper，使用參考http://blog.csdn.net/column/details/14830.html）自行了解。在獲取json格式的數據後，採用registerMap進行手動註冊，給地圖取一個名字。EChart中使用的方法，可參考官方示例（http://echarts.baidu.com/examples/editor.html?c=map-usa），series中的map爲用戶本身註冊的地圖，要點以下。注意問題：registerMap只能註冊面狀要素的json數據，對點、線無效！

                 

（3）<script及geo方式。這種方式的底圖數據，能夠直接用 script 標籤引入包含數據的 js 文件，引入後會自動註冊地圖名字和數據，如<script src="../../data/china.js"></script>，引入後EChart自動對地圖進行註冊，可參考EChart官方示例（http://www.echartsjs.com/gallery/editor.html?c=scatter-map），使用要點以下。注意問題：series中的coordinateSystem必須設置爲 geo，即採用的座標系統參考與geo中定義的地圖保持一致；geo方式也只適用於面狀地圖數據，對點和線要素數據無效！

            

二、線要素的加載

線要素的加載，通常經過series中type設置爲 line 的方式實現（具體參考http://echarts.baidu.com/option.html#series-lines），參數coordinateSystem設置爲bmap（百度地圖）、geo或registerMap手動註冊的地圖名稱。

三、點要素的加載

點要素的加載，通常經過series中type設置爲scatter或effectScatter（具體參考http://echarts.baidu.com/option.html#series-scatter和http://echarts.baidu.com/option.html#series-effectScatter），參數coordinateSystem設置爲bmap（百度地圖）、geo或registerMap手動註冊的地圖名稱。

以上是對EChart中使用地圖的總結，不恰當的地方還請及時指出，謝謝！