背景

通常可视化地图我们使用 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

效果