EChart中使用地圖方式總結(jié)

2018年02月06日 22:18:57 來源：https://blog.csdn.net/shaxiaozilove/article/details/79274772

? ? ? 最近在仿照EChart公交線路方向示例，開發(fā)表示排水網(wǎng)和污水網(wǎng)流向地圖，同時(shí)地圖上需要疊加排放口、污染源、污水處理廠等要素。由于之前沒有用過EChart，尤其是EChart的地圖功能，琢磨嘗試很久，終于弄明白了地圖上面、線及點(diǎn)要素的加載及顯示方法，總結(jié)如下。

? ? ? 1、底圖的加載

? ? ? 一般地圖都需要底圖，EChart中底圖的數(shù)據(jù)來源，有三種方式，分別如下：

（1）百度地圖。需要引入百度地圖API，具體使用方法參見官方示例（http://echarts.baidu.com/examples/editor.html?c=lines-bmap-effect，如下左圖），此時(shí)series中引入的其他要素層中，coordinateSystem 的值必須設(shè)置為 'bmap'，也就是其它層的數(shù)據(jù)，以bmap地圖作為空間坐標(biāo)系統(tǒng)的參照，如下右圖：

? ? ? ? ?? ? ? ? ? ? ? ??

（2）json及registerMap的方式。這種方式底圖數(shù)據(jù)以json（geojson）格式存儲(chǔ)，具體geojson的格式（參考http://geojson.org/）及轉(zhuǎn)換為geojson的方法（可采用Mapshaper，使用參考http://blog.csdn.net/column/details/14830.html）自行了解。在獲取json格式的數(shù)據(jù)后，采用registerMap進(jìn)行手動(dòng)注冊，給地圖取一個(gè)名字。EChart中使用的方法，可參考官方示例（http://echarts.baidu.com/examples/editor.html?c=map-usa），series中的map為用戶自己注冊的地圖，要點(diǎn)如下。注意問題：registerMap只能注冊面狀要素的json數(shù)據(jù)，對(duì)點(diǎn)、線無效！

? ? ? ? ??? ? ? ?

（3）<script及geo方式。這種方式的底圖數(shù)據(jù)，可以直接用 script 標(biāo)簽引入包含數(shù)據(jù)的 js 文件，引入后會(huì)自動(dòng)注冊地圖名字和數(shù)據(jù)，如<script src="../../data/china.js"></script>，引入后EChart自動(dòng)對(duì)地圖進(jìn)行注冊，可參考EChart官方示例（http://www.echartsjs.com/gallery/editor.html?c=scatter-map），使用要點(diǎn)如下。注意問題：series中的coordinateSystem必須設(shè)置為 geo，即采用的坐標(biāo)系統(tǒng)參考與geo中定義的地圖保持一致；geo方式也只適用于面狀地圖數(shù)據(jù)，對(duì)點(diǎn)和線要素?cái)?shù)據(jù)無效！

? ? ? ? ? ??

2、線要素的加載

線要素的加載，一般通過series中type設(shè)置為 line 的方式實(shí)現(xiàn)（具體參考http://echarts.baidu.com/option.html#series-lines），參數(shù)coordinateSystem設(shè)置為bmap（百度地圖）、geo或registerMap手動(dòng)注冊的地圖名稱。

3、點(diǎn)要素的加載

點(diǎn)要素的加載，一般通過series中type設(shè)置為scatter或effectScatter（具體參考http://echarts.baidu.com/option.html#series-scatter和http://echarts.baidu.com/option.html#series-effectScatter），參數(shù)coordinateSystem設(shè)置為bmap（百度地圖）、geo或registerMap手動(dòng)注冊的地圖名稱。

以上是對(duì)EChart中使用地圖的總結(jié)，不恰當(dāng)?shù)牡胤竭€請(qǐng)及時(shí)指出，謝謝！

?

轉(zhuǎn)載于:https://www.cnblogs.com/hao-1234-1234/p/9292996.html

總結(jié)

以上是生活随笔為你收集整理的EChart中使用地图方式总结（转载）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。