使用echarts地图,大屏实现“县乡级行政区划”数据展示的几个难点汇总

某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,

最终效果,链接: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提供的工具,对区划进行了合并,完美解决了问题。

 

合并操作及控制台语法花了点时间。

工具:mapshaper.org

 

解析贴:

https://segmentfault.com/q/1010000013001601

同一页面展示多个图表 vue组件将地图封装了一下 查看本文源码

 

解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。

 

 

本文同时发布到两处:

本人博客:http://www.contactu.cn

知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248



[本日志由 admin 于 2020-06-12 09:18 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: echart geojson
相关日志:
评论: 0 | 引用: 0 | 查看次数: 5869
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭