JS前端三维地球渲染——中国各城市航空路线展示

前言

我还从来没有写过有关纯JS的文章（上次的矢量瓦片展示除外，相对较简单。），自己也学习过JS、CSS等前端知识，了解JQuery、React等框架，但是自己艺术天分实在不过关，不太喜欢前端设计，比较喜欢后台的逻辑处理。

昨天整理自己收藏的东西，无意中看到一个3维地球展示的开源框架，非常漂亮，怎么自己当时仅是收藏并未研究呢？于是喜欢技术无法自拔的我不分三七二十一，立马开始研究。

框架介绍

框架名称为PhiloGL，从名字就能看出这是一个用来显示3维物体的WebGL框架。其官网介绍为：

PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development

大意是一个数据可视化、创意编码和游戏开发的WebGL框架。官网中提供了很多酷炫的3维实例，各位可以在其中找到自己感兴趣的东西。这段时间我一直在做GIS方向，于是看到3维地球就无法自拔，DEMO位置http://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights/。这是一个全球航空路线的3维展示，用户可以选择不同的航空公司进行展示。截图如下：

我的工作

看到这么酷炫的东西当然想要变成自己的，这是一个老程序员对技术不懈执着追求的内发原因。我本来想做一个中国春运期间迁徙图，奈何搜了半天居然找不到数据，没有数据一切岂不是白扯。航空路线是一个非常好的展示，但是人家DEMO都已经给出了，我总不能拿来就说是我做的吧？那么只能稍微改点东西，一来假装东西是自己做的，二来也算是对整个框架的一个学习。本身以为是个很轻松的事情，没想到却比想象中复杂的多。我实现的功能是根据中国的城市显示对应的航空路线，即当列表中选择某城市时，在3维中画出进出此城市的所有航线。效果如下：

示例演示页面：http://wsf1990.gitee.io/airline_china/airline_china.html，oschina地址：https://gitee.com/wsf1990/airline_china

原理浅析

本文不做过深的技术探讨（因为我也还没吃透