上一篇 | 这是最后一篇Beplay下一篇
前端研究 订阅所有【前端研究】的Beplay

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

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

最终效果,链接:http://258754.cn/2020/guidong/demo.html

 

经过几天的学习,解决了一些疑难问题,特汇总如下以供参考:

 

 

难点
解决方法
参考文章或链接
echarts地理图的基础实现-基于geojson
参考了百度官方示例-香港地图
外框发光效果实现
geo--itemStyle
 
得到县一级的geojson数据
很多方法得到,本处给出一个很方便的工具
网上公开的geojson数据,免费只到县一级,没有乡镇一级地图

1、自己手工绘制,比较粗糙,边界不准

2、找到了精确边界数据的购买渠道,很便宜

geojson.io这个网站可以手工绘制区块
买到的 geojson数据比较旧,今年度新的区划已经发生了合并。

使用mapshaper.org提供的工具,对区划进行了合并,完美解决了问题。

 

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

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

 

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

 

 

本文同时发布到两处:

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

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



[本Beplay由 admin 于 2020-06-12 09:18 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: echartechart geojsongeojson
相关Beplay:
评论: 0 | 引用: 0 | 查看次数: 229
发表评论
昵 称:
密 码:
游客发言不需要密码.
邮 箱:
支持Gravatar头像.
网 址:
输入网址便于回访.
内 容:
验证码:
选 项:

虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭