从零开始学习时空数据可视化（序）

前言：没有什么特殊的缘由、也不是要靠这个赚钱（毕竟是免费的），只是在以往的学习过程当中很是感谢不少开发者的无私奉献，包括代码、问题解答以及文章，因而本身也萌生了相似的念头，但愿在记录本身学习收获的同时，也能帮到一些朋友吧。

本文结构安排以下：

• 0 / 为何会有这个系列
• 1 / 学习指北
• 2 / 效果演示
• 3 / 可视化示例
• 4 / 可视化教程
• 5 / 自问自答
• 6 / 几则故事

Demo 视频（记得点超清模式，不然很糊）见 v.qq.com/x/page/x084…

先插播一句，GitHub 项目地址是这个 https://github.com/hijiangtao/glmaps，邮件订阅动态点 watch，鼓励我点 star，参与进来点 fork，嘿嘿。

0 / 为何会有这个系列

我常常被问到「我很喜欢数据可视化，我该如何入门呢？」，我曾在问题「国内有哪些成熟的作前端数据可视化的团队，作工程的前端加入须要补充什么知识」以及「数据可视化工程师将来的路在何方」说过我本身的一些小感觉，但发现这些彷佛不能解决全部疑惑。

你可能由于诸如「相机与可视区是什么，坐标世界如何转换」等问题而止步向前，即使 three.js 已经在 WebGL 上友好的封装了一层 API。事实如此，当你对图形学领域一些基本概念还没了解，你在入门时必定会遇到很多疑惑。究其缘由，其实每一个人精力有限。虽然基于 Web 的图形绘制接口依旧是 SVG 与 canvas，但其背后的标准仍在稳步向前。WebGL (OpenGL ES) 做为一个光栅化引擎，本质只包含两类着色器，但背后仍蕴藏如此多的内容。

若是你是一名数据可视化爱好者，但苦于没有相关基础，那么「从零开始学习时空数据可视化」这个系列即是彻底为你准备的，让咱们开始吧。

1 / 学习指北

先说一句，这个系列是免费的。但愿在帮助你们的同时，咱们相互学习。

我为从零开始学习时空数据可视化系列建立了一个 GitHub 仓库，全部相关代码、文档以及教程都会放在一块儿，我给他取名叫 glmaps。若是你以为值得关注能够点个 watch 接受邮件订阅提醒，若是从中有所收获也欢迎点个 star 鼓励一下。

• 项目地址 GitHub https://github.com/hijiangtao/glmaps
• 中文说明 README github.com/hijiangtao/…

简单来讲，glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，很是容易上手，但愿本项目对正在时空可视化学习之路上探寻的你有所帮助。

但愿经过 glmaps 的系列示例与教程，可让你在使用 three.js 与 deck.gl 时能更加自信地创做出更好的可视化做品。

2 / 效果演示

废话很少说，我录制了一段短视频用于展示 glmaps 的可视化效果，你能够在 YouTube 或者腾讯视频查看。

腾讯视频对画质压缩的很是严重，建议查看时打开超清模式，不然极有可能出现「两米开外，人畜不分」的马赛克效果。

3 / 可视化示例

glmaps 现包含有以下几种可视化形式，更多案例正在丰富中。其中 2.5D 意指在2D地图上绘制2D或者3D的物体，3D 意指彻底在三维空间中实现时空数据的可视化效果。

类型	描述	效果	支持动画	支持聚类
3D / Curve	THREE.BufferGeometry()		Yes	No
3D / Mover	THREE.SphereGeometry()		Yes	No
3D / Cube	THREE.BoxGeometry()		No	No
2.5D / Icon	No modification from deck		No	Yes
2.5D / Brush	Support OD Arc Animation		Yes	No
2.5D / Scatter	Support Fade-out Animation		Yes	No
2.5D / Hexagon	Support Coverage Filter Conditions		Yes	Yes
2.5D / Grid	Support Coverage Filter Conditions		No	Yes
2.5D / Trip	No modification from deck		Yes	No
Other / Segment	The same as curve animation		Yes	No
Other / Moon	Earth-Moon System		Yes	No

4 / 可视化教程

暂定八篇系列教程，若有须要能够提 issue 讨论。

• 从零开始学习时空可视化（零） / three.js 入门笔记 - TBD
• 从零开始学习时空可视化（一） / deck.gl 入门笔记 - TBD
• 从零开始学习时空可视化（二） / 用 React 框架管理你的 three.js 项目 - TBD
• 从零开始学习时空可视化（三） / 用 three.js 画出你的第一个地球 - TBD
• 从零开始学习时空可视化（四） / 深刻浅出 three.js 点、线、面、体的实现过程 - TBD
• 从零开始学习时空可视化（五） / 利用 props 与 transitions 让你的 deck.gl 图层动起来 - TBD
• 从零开始学习时空可视化（六） / 手写 shader 给你的 deck.gl 动画另辟蹊径 - TBD
• 从零开始学习时空可视化（七） / 使用 three.js 和 deck.gl 开发的踩坑记录 - TBD

在完成这些学习后，你将能够独立实现如上列出的几种可视化形式做品，而我的认为这些形式已经大体包含了基本的时空可视化类型。

5 / 自问自答

首先感谢你对 glmaps 项目的关注。在你进一步阅读本项目以前，想对你说的一些话。

Q1: 除了列出的可视化框架，glmaps 项目还用到了哪些 Web 技术?

从 16.8.0 开始，Hooks 便正式登录 React，glmaps 在开发过程当中也从中受益不少。若是你还不了解 React Hooks，建议先查看 Introducing Hooks 了解大概，由于 glmaps 在多处使用到了各种 Hooks。另外一方面，因为 deck.gl 利用了 WebGL2 特性进行可视化绘制，因此在查看 demo 前请确保你的浏览器支持这项技术。你能够经过 get.webgl.org/ 或者 get.webgl.org/webgl2/ 网站来查看你的浏览器对 WebGL(2) 的支持状况。

除此外，因为 glmaps 未采用相似 create-react-app 这样成熟的脚手架进行搭建，而是我按需在构建流程上对 webpack 及 Babel 中的功能进行组合，所以在打包构建方面必定还存在诸多须要继续完善的地方。若你在本地运行 Demo 时遇到任何报错，我相信这均可能是 glmaps 自己的问题，而非你的问题，欢迎经过 issues 和我交流讨论。

Q2: 可视化初学者该如何利用这个项目学习？

我比较建议你采用以下顺序配合 glmaps 进行学习：

• 先学习如何在你的项目中引入 three.js 以及 deck.gl，了解基本的使用、项目建立，这部份内容直接在 three.js 与 deck.gl 官网即可找到。尝试根据教程，试试画出你的第一个图形；
• 大概扫一下这两个框架的主 API 都有哪些，并试试下些官方 demo 在本地运行，感觉下这些框架在实现可视化上的巨大能力；
• 跟着「从零开始学习时空数据可视化系列」教程一步步把 glmaps 中涉及到的可视化案例都实现一遍；若是你对 three.js 与 deck.gl 有过必定的尝试，你也能够直接参考我在 src 文件夹中抽象出的代码；
• （可选）尝试经过 npm install glmaps --save 在你的 demo 中引入 glmaps 进行展示；
• 按照你的理解重写 glmaps 示例代码，并为他添加更多特性；
• 恭喜你已经成功入门基本的时空数据可视化编程！你如今能够更加深刻地了解 three.js 或者 deck.gl，并更加自信地创做出更好的可视化做品。

Q3: 如何参与到 glmaps 项目中来？

glmaps is still at the very beginning period of my thoughts, you are welcome to oepn ISSUE, PR or email me, if you have any ideas on how to make glmaps better for visualization beginners:

• Participate in implementing tutorials together;
• Contribute codes to glmaps with PR (such as imporve mover animation in Globe);
• Speak out your doubts in learning data visualization with issues;
• Tell me your advice on how to make glmaps better with issues;
• Other aspects not included yet.

6 / 几则故事

故事一

前两天云舒在朋友圈的动态忽然成了热点新闻，其中我很是赞同第一句的后半句「特意写出来你们看到，免得我改变心意」，glmaps 也是在这种环境下诞生的。

不要误解，我不离婚，我只是想说即使 glmaps 还处于初期阶段，我仍决定如今把它分享出来。起初，这个想法诞生于两个多月前，我曾在问题「做为前端工程师的你在深刻研究哪些领域？」中说到新的一年要多搞搞数据可视化，但因为工做忙碌与天生懒惰，因而一直在给本身找日后拖延的借口。

如今把它分享出来，一方面是代码层面在基本功能上已完善，另外一方面是想经过公开来鞭策本身按时完成剩余文章的编写，即「自我催更」。

故事二

在为 glmaps 制做视频与截图时，发现 Globe Curve 还有点像流浪地球，若是把贝塞尔曲线换成直线，再在分布上改一改就更像了。

故事三

因为平时还有工做要完成，因此如何分配时间呢？我以为忙是件好事，必定程度上能够刺激你提升自我时间管理能力，因此我会利用好晚上及周末的时间来逐步完善这个项目，step by step。

另外，因为各类缘由我也好久没尝试过 three.js 了，因此怎么说呢，仍是那句话：但愿在帮助你们的同时，咱们相互学习。欢迎更有经验的同窗多多指教！

更多本文未提到的内容欢迎移步 GitHub 啦！