可视化制作之地图制作技巧

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:通常可视化地图我们使用geojson数据+(echarts/highchart等)制作,经常我们业务需要的地图没有合适geojson数据,原因大致如下:本文给出的是本人独家解决方法是通过AI制作地图数据,以真实地图或者草图为底,秒出边界和中心,导出svg,通过正则(下面提供一个gulp插件转)转为geojson数据;秀张鼠绘

背景

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

效果


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

后现代经济

后现代经济

姜奇平 / 中信出版社 / 2009-7 / 45.00元

《后现代经济:网络时代的个性化和多元化》站在历史“终结”与“开始”的切换点上,以价值、交换、货币、资本、组织、制度、福利等方面为线索,扬弃现代性经济学,对工业化进行反思,深刻剖析了“一切坚固的东西都烟消云散”的局限性,在此基础上展开对现代性经济的解构和建构。“9·11”中坚固的世贸中心大楼灰飞烟灭,2008年坚固的华尔街投资神话彻底破灭,坚固的雷曼兄弟公司在挺立了158年后烟消云散……一切坚固的东......一起来看看 《后现代经济》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试