零基础学习基于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


视频效果展示:




分享到:


相關文章: