Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

时间:2024-04-05 15:47:56

背景:公司原本使用高德在线地图,但是由于有的客户是使用内网的,造成地图打开是空白的。于是,增加了离线地图功能,通过页签切换地图,默认展示在线地图,点击离线页签时,展示的是echarts离线地图。

重要: ---- demo 源码链接---

链接:https://pan.baidu.com/s/1tIKVs1exU_fDctbcoP7beg 
提取码:81e6

内含: my-offline-map.rar (demo源码) 离线地图开发说明.doc (说明文档)

1. 实现:

1.1 初始化为世界地图。

1.2 鼠标悬浮,具有高亮效果。具有地图标记渲染功能,点击标记,展示该标记信息弹窗。点击右上角关闭按钮,关闭弹窗。

1.3 当点击其他国家时,进入其他国家,展示该国家地图;点击该国的某个行政区,则展示该行政区地图; 继续往下钻取,则返回初始世界地图。

1.4 当点击中国时,进入中国地图;点击某个省,展示省级地图;点击对应某个市,展示

该市地图;点击该市的某个县,展示该县级地图;继续往下钻取,则返回初始世界地图。

2. 主要技术 Echarts  框架  angular

3. 主要文件:

assets文件夹下 data和echarts文件夹,用于存放所有的Json文件,以及中英翻译的JS map文件。

Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

 4. 常见问题解决:

4.1 Echarts 地图点击事件多次触发原因,有触发三次的,有触发两次的

我推测是因为地图有下钻,虽然你点了中国地图,但同时也点了省份地图

myChart.off('click');   // 这里使用off避免重复调用

Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

 

4.2 Echart地图三级下钻地图在平移和缩放后,点击到省,由于中心点的偏移,省跑到容器以外的地方去了,导致新生成的地图看不见。--- 解决方法:后来发现,是重新绘制图表的时候需要: myChart.setOption(option,true),在setOption()方法中添加true,表示重新绘制,最后完美解决。

5. 效果图:

Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

 

 

 Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

 Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示             Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

6. 其他注意事项

 6.1 全部地理名称翻译为中文展示;countries-map.js--其他国家名称翻译为中文;other-province-map.js --其他国家行政区翻译成中文;

 6.2 由于其他国家的各个国家json文件名称,与英文名称有差异,所以会导致有的国家点击可能请求的json文件为404,那是因为文件名称与请求查询的名称不一致。代码中通过 getCountriesFileName 函数处理;如果在世界地图上有哪个国家,点击无法钻取到该国家地图,则打开控制台查看请求路径的 json 文件名,与 all-countries 文件夹下对应的国家json文件名是否一致,如果不一致,请继续通过往 getCountriesFileName 函数里面 eleList 数组中追加。

 

Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示

 Echarts离线地图开发--实现web端 初始化世界地图,其他国家钻取到行政区,中国钻取到省市区的展示