6

我是 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 上运行。我需要安装一个反应应用程序吗？这是如何运作的？

4

2 回答 2

5

我们现在已经设置了非常简单的示例，您可以直接克隆并开始玩弄，即使您以前没有任何或知识。

您只需要转到示例之一，让我们使用 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文件是唯一要更改的内容，以更改图层或地图本身。

免责声明：我在 Uber 与制作 deck.gl 的可视化团队一起工作。

于 2017-05-10T21:46:32.117 回答
2

编辑：这是最近有人尝试使用deck.gl
的一个很好的演练 来源：@github.NghiaTranUIT

查看示例有两点需要注意。

  1. 您需要数据字段中的数据
  2. 你需要 react 和其他依赖

从开始

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 上的示例，以更好地了解如何运行入门项目。

于 2017-03-31T05:21:41.163 回答