使用echarts地图,大屏实现“县乡级行政区划”数据展示的几个难点汇总
          
		
		
		作者:admin  日期:2020-06-12某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,
最终效果,链接:http://258754.cn/2020/guidong/demo.html
 
经过几天的学习,解决了一些疑难问题,特汇总如下以供参考:
| 难点 | 解决方法 | 参考文章或链接 | 
| echarts地理图的基础实现-基于geojson | 参考了百度官方示例-香港地图 | https://echarts.apache.org/examples/zh/editor.html?c=map-HK | 
| 外框发光效果实现 | geo--itemStyle | |
| 得到县一级的geojson数据 | 很多方法得到,本处给出一个很方便的工具 | https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe | 
| 网上公开的geojson数据,免费只到县一级,没有乡镇一级地图 | 1、自己手工绘制,比较粗糙,边界不准 2、找到了精确边界数据的购买渠道,很便宜 | geojson.io这个网站可以手工绘制区块 | 
| 买到的 geojson数据比较旧,今年度新的区划已经发生了合并。 | 使用mapshaper.org提供的工具,对区划进行了合并,完美解决了问题。 
 合并操作及控制台语法花了点时间。 | 
 解析贴: | 
| 同一页面展示多个图表 | vue组件将地图封装了一下 | 查看本文源码 | 
解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。
本文同时发布到两处:
知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248










