始める方法Deck.glを実行する例

Question

私は、反応JSとdeck.glの面で初心者ですとdeck.glから基本的なgetting started exampleを実行したいと思います：

私はこのコードを入れてくださいどの拡張子を使用するのですか？他のファイルが必要ですか？これを実行するにはapp.js：

import DeckGL from 'deck.gl/react'; 
import {ArcLayer} from 'deck.gl'; 

const flights = new ArcLayer({ 
    id: 'flights', 
    data: [] // Some flight points 
}); 

<DeckGL width={1920} height={1080} layers={[flights]} /> 

を私は漠然とした質問には本当に申し訳ありませんが、私は本当にこの例では、Mac上で作業を取得するために必要な手順をしたいと思います。 反応アプリをインストールする必要はありますか？これはどのように作動しますか？

Answer 1

reactjsまたはdeck.glの知識がなくても、直接的にクローンを作成してやりとりすることができます。

examplesのいずれかに移動するだけで、webpack 2 hello-worldでやりましょう。

何かをする前に、MapBox websiteにアクセスしてアカウントを作成し、マップのタイルをレンダリングするためのAPIキーを生成する必要があります。あなたはそれを持っていたら、ちょうど環境変数としてエクスポート：

export MAPBOX_ACCESS_TOKEN=42eufr5aeoushanoeu 

その後、あなたが実際に次のことをやって起動することができます

git clone git@github.com:uber/deck.gl.git 
cd examples/hello-world-webpack2 
npm install 
npm start 

そして、あなたが行くように良いことがあり、app.jsファイルのみですレイヤーやマップ自体を変更するために変更するもの

_{免責事項：私はdeck.glを作成した視覚化チームでUberに勤務しています。}

Answer 2

EDIT：注意するには、2つのものがある例を見てみると@github.NghiaTranUIT

---

： ここではdeck.gl
ソースを試して誰かの良い最近のウォークスルーです。彼らは、データがどうあるべきか省略

import DeckGL from 'deck.gl/react'; 
import {ArcLayer} from 'deck.gl'; 

const flights = new ArcLayer({ 
    id: 'flights', 
    data: [] // data field needs to have data 
}); 

<DeckGL width={1920} height={1080} layers={[flights]} /> 

1. あなたが
2. はあなたが反応する必要があるデータフィールド内のデータや他の依存関係入門から

---

を必要とします構造化されています（したがって、どこに問題があるかもしれません）。

他の事は、ライブラリはハロー世界-webpack2から

を反応
package.json

"dependencies": { 
    "deck.gl": "^4.0.0-rc.3", 
    "immutable": "^3.8.1", 
    "luma.gl": "^3.0.0", 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-map-gl": "^2.0.0" 
}, 

を使用してに依存していることであるので、これらの例以下、あなたが持っている必要があります反応deck.glで独自のプロジェクトを実行する

スタータープロジェクトの実行方法を理解するために、githubの例を参照することをおすすめします。