【可视化】让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/

7871333-622c0f8e8dd0eb06.png
Download Node.js

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

git clone https://github.com/uber/deck.gl.git
7871333-1d8ef805fd630068.png
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,感觉有用,但是实践中好像没什么影响,如果有碰到具体问题可以考虑机上

7871333-462f3af1c4a1f868.png
官网教程
7871333-8ce7c6c8c99cb7e7.png
以trips例子为例
7871333-2eb619a71244a681.png
过程截图

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

npm install  
# 或yarn install

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

7871333-4d15a42f92079b5c.png
潜在问题1

7871333-1625cee1c57958ae.png
潜在问题2

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

7871333-9ed4fecba0f5ae9a.png
申请mapbox的key

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

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

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

7871333-0ef639e5f4147a9f.png
运行成果
7871333-2d4c02eaefcf5446.png
结果
7871333-60c6169e3c779747.png
结果
展开阅读全文

没有更多推荐了,返回首页