可视化制作之地图制作技巧
背景
通常可视化地图我们使用geojson数据+(echarts/highchart等)制作,经常我们业务需要的地图没有合适geojson数据,原因大致如下:
- 《测绘法》图表地图通常是简易版地图,很难与真实地图一致,导致结果:正规网站不能提供下载
- 第三方能下载到的矢量地图数据只能到国级省级
- 县区级别的行政划分变动频繁(比如前两年的杭州地图不包括临安)
- 地图区域划分可能不同于行政划分
思路
本文给出的是本人独家解决方法是通过AI制作地图数据,以真实地图或者草图为底,秒出边界和中心,导出svg,通过正则(下面提供一个gulp插件转)转为geojson数据;
为什么使用AI
- 有图层有组合有钢笔制作准确省事
- 有前进有后退不怕出错
- 出了制作地图geojson数据,还可以利用生产svg做各种吊炸天效果(比如3D地图晒个demo)
- 本人美工大佬,精通PS AE AI等等;
秀张鼠绘
案例
使用方法
1.下载
git clone https://github.com/yuhonyon/svg2geojson.git
2.安装
npm i
3.使用
- 将 svg 文件直接放在
svg/
目录下 - 输入命令
gulp
在 dist/ 目录下将生产对应的目录,目录下有转换后的 geojson 文件以及行政中心的坐标文件和 svg 原文件
教学
制作地图 geojson 数据的所有步骤
- 设计地图草稿
- 根据设计稿使用 ai 画矢量地图
- 导出 svg
- 使用 gulp 将 svg 转换为 geojson
- 使用图表库制作地图
设计地图草稿
设计师设计地图草稿(只需明确行政划分区域即可),如下图
使用 AI 描出矢量图
- 将设计草稿导入 AI
- 新建图层,在图层内跟据设计稿使用钢笔工具描出一个行政区的行政(使用多边形描边)
- 将该图层取名为行政区名字
- 重复第 2 步,描出所有行政区
- 选择所有描点,转换尖角,去除不小心画出的曲线(导出的 svg 不是由 polygon 组成的而是 path 的时候使用这个方法,建议描完后就使用一次)
- 在每个图层中心处再画一个圆形或者椭圆
- 删除设计草稿的图层导出 svg,没有出错的话格式应该如下
- 如果发现 poluygon 标签变成了 path,请注意第 4 步骤
** 注意:导出的 svg 转换出的 geojson 制作的地图将会是垂直颠倒的(可能是坐标轴不一样,
一个左上角一个右下角),所以我们要把我们制作的 AI 图垂直翻转后再导出 svg **
将 svg 转换为 geojson
效果
相关推荐
魅惑青花瓷 2020-11-11
赶路人儿 2020-11-02
liujianhua 2020-10-22
Locksk 2020-10-12
菜鸟 2020-09-14
yyhhlancelot 2020-08-26
dayslrk 2020-08-16
MrFuWen 2020-08-15
letheashura 2020-08-14
molong0 2020-08-06
redis 2020-08-02
zlfing 2020-07-27
guoyun0 2020-07-19
anglehearts 2020-07-18
yyhhlancelot 2020-07-06
walegahaha 2020-06-15
Leonwey 2020-06-11
bingdata 2020-06-09
wndong 2020-06-04