如何運行Deck.gl入門示例

Question

我是react，js和deck.gl的新手，想從deck.gl運行基本的入門示例 ：

我在哪里放這個代碼，我使用哪個擴展，我是否需要其他文件，例如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的任何知識。

您只需要轉到其中一個示例 ，讓我們使用webpack 2 hello-world進行操作。

在此之前，您需要訪問MapBox網站 ，創建一個帳戶並生成一個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.}

Answer 2

編輯 ：這是一個有人試驗deck.gl的最新演練
資料來源： @ github.NghiaTranUIT

---

看一下這些例子，有兩點需要注意。

1. 您需要數據字段中的數據
2. 你需要反應和其他依賴

---

從入門開始

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]} />

它們省略了數據應該如何構建（因此可能存在問題）。

另一件事是圖書館依賴於使用反應

來自hello-world-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上的示例，以便更好地了解如何運行啟動項目。