在做毕设的时候老师提了一个需求，做一个3D的飞行轨迹展示视频，就像

http://422south.com/work/nats-future-air-traffic-patterns-for-london

中展示的一样，制作分两步：

先做出3D的轨迹效果将每次的效果截图把截图拼起来作为视频

3D轨迹效果

考虑的工具有:

processing.jsthree.jsd3.js

processing.js

作为processing在web平台的衍生物，processing.js目前跟processing本身联系十分紧密，我简单看了一下processing.js的官网介绍，貌似需要使用processing本身的pde格式文件，感觉可能无法继承自我现有的已完成的工作，需要一切从头开始，所以不考虑。

three.js

粗略的看了一下three.js的介绍、文档：three.js就是封装好了很多基本的3D元素，需要开发者自己从基本的球、线等元素构造出需要的物体，对于目前我的需求来说过于基本了一些，如果采用three.js绘制地图，估计工作量小不了。

d3.js

处于本身文档的考虑，放弃

echarts-gl

在看echarts的文档时，突然发现多了个“GL”选项，出于好奇心，点进去看了一下，发现居然有一个globe项的说明，并且从文档里面看应该是一个支持3D地理坐标的拓展，然后在网上搜索了一下相关资料，发现了：

http://echarts.baidu.com/blog/

然后看了看官方的示例，就是我想要的那种，完全契合：基本集成了地图展示需要的所有东西，而且从之前使用echarts的经历：使用简单，文档比较齐全来看，应该上手不难，所以就决定先试一试echarts-gl。

Globe

补充一部分官方文档中没有提到的globe属性

viewControl targetCoord: 使camara重新聚焦到给定的坐标

截屏

使用echarts-gl完成了基本要求之后，我就开始思考如何使用js截屏，网上搜了一下大概有一下几种方法：

使用html2canvas库canvas自带的导出函数phantomjs工具echarts自带的导出功能

html2canvas库

看了一下html2canvas的大概原理，它是通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。 我并不需要整个页面的截图，并且html2canvas不支持跨域的图片加载，所以放弃了。

phantomjs工具

这个小工具是爬虫时常用的一个库

PhantomJS是一个无界面的,可脚本编程的WebKit浏览器引擎。它原生支持多种web 标准：DOM 操作，CSS选择器，JSON，Canvas 以及SVG。

完全就是我需要的，就决定用它了！

安装

在Windows下安装：下载官方的压缩包，解压缩后直接进入bin目录下，双击phantomjs.exe就可以运行了，不过建议将phantomjs.exe所在的目录添加到path中，这样就可以在命令行中采用phantomjs hello.js这样的形式运行了 不过试了一下发现phantomjs不支持webGL，所以没法对我的毕设网页进行截屏，只能放弃了

echarts自带的导出功能