echarts-gl学习笔记
在做毕设的时候⽼师提了⼀个需求，做⼀个3D的飞⾏轨迹展⽰视频，就像
中展⽰的⼀样，制作分两步：
先做出3D的轨迹效果
将每次的效果截图
把截图拼起来作为视频
3D轨迹效果
考虑的⼯具有:
processing.js
three.js
d3.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地理坐标的拓展，然后在⽹上搜索了⼀下相关资料，发现了：
然后看了看官⽅的⽰例，就是我想要的那种，完全契合：基本集成了地图展⽰需要的所有东西，⽽且从之前使⽤echarts的经历：使⽤简单，⽂档⽐较齐全来看，应该上⼿不难，所以就决定先试⼀试echarts-gl。
Globe
补充⼀部分官⽅⽂档中没有提到的globe属性
viewControl
targetCoord: 使camara重新聚焦到给定的坐标
截屏
使⽤echarts-gl完成了基本要求之后，我就开始思考如何使⽤js截屏，⽹上搜了⼀下⼤概有⼀下⼏种⽅法：
使⽤html2canvas库
canvas⾃带的导出函数
phantomjs⼯具
echarts⾃带的导出功能
html2canvas库
看了⼀下html2canvas的⼤概原理，它是通过获取页⾯的DOM和元素的样式信息，并将其渲染成canvas图⽚，从⽽实现给页⾯截图的功能。svg canvas
我并不需要整个页⾯的截图，并且html2canvas不⽀持跨域的图⽚加载，所以放弃了。
phantomjs⼯具
这个⼩⼯具是爬⾍时常⽤的⼀个库
PhantomJS是⼀个⽆界⾯的，可脚本编程的WebKit浏览器引擎。它原⽣⽀持多种web 标准：DOM 操作，CSS选择
器，JSON，Canvas 以及SVG。
完全就是我需要的，就决定⽤它了！
安装
在Windows下安装：下载官⽅的压缩包，解压缩后直接进⼊bin⽬录下，双击就可以运⾏了，不过建议将所在的⽬录添加到path中，这样就可以在命令⾏中采⽤phantomjs hello.js这样的形式运⾏了
不过试了⼀下发现phantomjs不⽀持webGL，所以没法对我的毕设⽹页进⾏截屏，只能放弃了
echarts⾃带的导出功能

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。