【可视化】让deck.gl的Example跑起来

矫情的前言

之前没用过什么npm、react的，着实好顿折腾！
渲染上还有些问题，不过样式和地图都能出来了，问题还是不少的，毕竟也不专业js，重要的是能跑出个例子了，且做个记录做备用。
可参考方法(主要还得看官方的)：
①http://blog.csdn.net/future_todo/article/details/72846952
②https://uber.github.io/deck.gl/#/documentation/getting-started/installation
③https://github.com/uber/deck.gl/tree/4.1-release
∴Ctrl+C终止当前执行的任务

开始记录

第一步：安装Node.js，安装node.js后，npm也可以使用了(可能是附带了？)，具体安装方法另行百度

https://nodejs.org/en/download/

Download Node.js

第二步：下载deck.gl，cmd转至该目录下，或在目录下用git bash。【其实只用到了里面的example，不过正经做的话肯定是都需要的】

git clone https://github.com/uber/deck.gl.git

clone deck.gl from git

第三步：
以官网的GETTING STARTED的Installation为参考进行，拷贝出一个例子，本文针对单个例子进行。

npm install --save deck.gl luma.gl
npm install --save react-map-gl babel-runtime

注1：deck.gl基于luma.gl，所以需要安装luma.gl
注2：react-map-gl和babel-runtime在后面会用到，babel-runtime不装会报错
注3：npm执行操作，warn的可以先不管，Error的必须改
注4：warn里面有提到缺react和react-dom，感觉有用，但是实践中好像没什么影响，如果有碰到具体问题可以考虑机上

官网教程

以trips例子为例

过程截图

第四步 安装依赖包(估计是这个意思吧)

npm install  
# 或yarn install

注1：这里会根据package.json进行配置
注2：提示有三个东西挪了位置，建议安装xxx，暂时不管
注3：提示fsevents@^1.0.0......，表示在windows系统下执行了linux的语句，不管

潜在问题1

潜在问题2

第五步：申请mapbox的key，需要注册账号，免费的

申请mapbox的key

第六步：配置mapbox地图key，并启动运行，注意填写时不要带上大括号{}！！！，

export MapboxAccessToken=pk.eyJ1Ij...... && npm start

注1：省略号表示剩余的key字符串
注2：成功启动会显示webpack:Compiled successfully
注3：360浏览器会有问题，推荐用google浏览器

运行成果

结果

结果