Как запустить Deck.gl примеры начала работы

Я новичок с точки зрения реагирования, 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. Нужно ли устанавливать приложение реакции? Как это работает?

Источник

2 ответа

Решение

Теперь у нас есть довольно простые примеры, с которыми вы можете напрямую клонировать и начать играть, даже если у вас нет каких-либо предыдущих знаний о responsejs или deck.gl.

Вам просто нужно перейти к одному из примеров, давайте сделаем это с помощью hello-world с webpack 2.

Прежде всего вам нужно перейти на веб-сайт 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.

Источник

РЕДАКТИРОВАТЬ: Вот хорошее недавнее прохождение кем-то, кто экспериментирует с 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, чтобы лучше понять, как запустить стартовый проект.

Источник
Другие вопросы по тегам