矯情的前言

之前沒(méi)用過(guò)什么npm、react的，著實(shí)好頓折騰！
渲染上還有些問(wèn)題，不過(guò)樣式和地圖都能出來(lái)了，問(wèn)題還是不少的，畢竟也不專業(yè)js，重要的是能跑出個(gè)例子了，且做個(gè)記錄做備用。
可參考方法(主要還得看官方的)：
①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終止當(dāng)前執(zhí)行的任務(wù)

開(kāi)始記錄

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

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

Download Node.js

第二步：下載deck.gl，cmd轉(zhuǎn)至該目錄下，或在目錄下用git bash?！酒鋵?shí)只用到了里面的example，不過(guò)正經(jīng)做的話肯定是都需要的】

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

clone deck.gl from git

第三步：
以官網(wǎng)的GETTING STARTED的Installation為參考進(jìn)行，拷貝出一個(gè)例子，本文針對(duì)單個(gè)例子進(jìn)行。

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在后面會(huì)用到，babel-runtime不裝會(huì)報(bào)錯(cuò)
注3：npm執(zhí)行操作，warn的可以先不管，Error的必須改
注4：warn里面有提到缺react和react-dom，感覺(jué)有用，但是實(shí)踐中好像沒(méi)什么影響，如果有碰到具體問(wèn)題可以考慮機(jī)上

官網(wǎng)教程

以trips例子為例

過(guò)程截圖

第四步 安裝依賴包(估計(jì)是這個(gè)意思吧)

npm install  
# 或yarn install

注1：這里會(huì)根據(jù)package.json進(jìn)行配置
注2：提示有三個(gè)東西挪了位置，建議安裝xxx，暫時(shí)不管
注3：提示fsevents@^1.0.0......，表示在windows系統(tǒng)下執(zhí)行了linux的語(yǔ)句，不管

潛在問(wèn)題1

潛在問(wèn)題2

第五步：申請(qǐng)mapbox的key，需要注冊(cè)賬號(hào)，免費(fèi)的

申請(qǐng)mapbox的key

第六步：配置mapbox地圖key，并啟動(dòng)運(yùn)行，注意填寫時(shí)不要帶上大括號(hào){}！！！，

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

注1：省略號(hào)表示剩余的key字符串
注2：成功啟動(dòng)會(huì)顯示webpack:Compiled successfully
注3：360瀏覽器會(huì)有問(wèn)題，推薦用google瀏覽器

運(yùn)行成果

結(jié)果

結(jié)果