echarts自定义地图

前言

在日常的工作中肯定会遇到各种各样的echarts的行政地图👀，有一天突然领导说xx县想要一个地图，我心想这还不简单嘛😁找到json文件就开干呗😍。结果我找了一天也没有找到县级的json地图文件，我的辛酸路就此开始😢。

问题关键

我们解决根本问题的关键就是要制作出某个县的json文件，相信很多做过echarts地图的小伙伴都知道只要有了json文件，做个地图还不是分分钟,但是地图json文件中的内容是很恶心的😌，下面是某市部分json的截图👇。

准备工作

相关网站

通过可视化的方式编辑geojson地图数据。

BIGEMAP

加载多种在线瓦片地图谷歌，OSM，天地图，bing，高德，以及多种离线地图bmdb格式地图,等等。我们用到他的作用就是导出部分 乡镇的KML文件🥠。

制作流程

导出KML文件

• 下载BIGEMAP客户端

• 选择对应区县
  安装完成之后，打开软件，点击右侧选择行政区域找到对应街道或者乡镇🎨。
  

• 导出KML文件

点击分享按钮，另存到某个文件夹中，依次导出🍧。

注：不直接导出上一级的KML，而是依次导出的原因是，如果导出的是上一级,只有当前级别的轮廓不包括下一级的资源👛。

生成GeoJSON文件

• 打开geojson.io依次导入刚才对应的KML文件。

左上角OPEN->FILE，导入之后就会生成对应可视化地图以及json🍠。

• 将json复制出来随便放在某个echarts地图的示例当中就可以啦🤙。

自定义地图

比如某个地市下新增加了一个开发区，还没有归并到新的行政区划中，就需要我们在GEOJSON中进行手动增加😋。

• 找到对应绘制工具，勾勒区域。

点击多边形工具之后在地图的某个位置通过首尾相连的方式画出一个区域🚇。

• 编辑新增区域属性

点击绘制的区域增加name属性，如果想要增加其他属性可以通过点击AddRow进行增加，一定要点击SAVE进行保存🥙。

• 将json复制出来随便放在某个echarts地图的示例当中发现新增加的区域已经出现了😏。

拓展小工具

DATAV.GeoAtlas

阿里推出的一个用于获取全国、各省、各市的详细地图信息的json文件，针对区县只有对应地图轮廓而没有乡镇或街道，数据来源为高德🤪。

vue-seamless-scroll

在做大屏期间用到的无缝滚动插件挺好用的，不需要自己在去监听表格的高度自己实现了🤪。

总结

在做大屏项目的时候经常会遇到echarts地图👜，我们只需要找到问题的痛点原因是什么，都会找到相关的答案哒🤣,如果你使用的是省市的地图可以直接通过DATAV.GeoAtlas🌯找到你想要的json文件哦,如果对你有帮助记得点赞哦！！🤪

参考链接

解决如何整理出乡镇级的地图