零基礎學習基於js和json文件加載與鑽取:echart地圖


1.思路

Echart加載地圖的方式有三種:

(1) 利用百度地圖api調用百度地圖作為底圖:

優點:數據項目多,範圍大。

缺點:地圖上的區域分區不明確,如何分區,例如省份,市的鑽區,方法有難度

(2) 利用js命令加載地圖

優點:加載地圖方便,導入js文件就可以使用。

缺點:只有框圖,js文件目前只有world,china和省級的,下一級就沒有了。

(3) 利用json命令加載地圖

優點:地圖多,加載相對方便。

缺點:只有框圖,加載地圖後跟js文件使用方法一樣,阿里提供了json地圖級,可以到縣區級。

2. 案例:利用異步傳輸方式加載地圖

案例中,利用js和json文件進行了在線文件的加載,大家可以直接下載為離線數據使用。前臺用jquery編寫,後臺用python的flask編寫。效果如下圖所示。

零基礎學習基於js和json文件加載與鑽取:echart地圖

地圖加載圖示

零基礎學習基於js和json文件加載與鑽取:echart地圖

結果顯示


客戶端:

操作過程如下:

零基礎學習基於js和json文件加載與鑽取:echart地圖

圖1


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖2


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖3


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖4


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖5


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖6


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖7


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖8


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖9


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖10

零基礎學習基於js和json文件加載與鑽取:echart地圖

圖11


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖12


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖13


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖14


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖15


零基礎學習基於js和json文件加載與鑽取:echart地圖

圖16


視頻效果展示:




分享到:


相關文章: