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

最终效果，链接：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://blog.258754.cn

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

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: echartechart geojsongeojson
相关日志: