Я опробовал deck.gl от Uber, добавив компонент в свое приложение реакции.Но ничего не появляется.Любая помощь будет оценена - PullRequest
Новая
       62

Я опробовал deck.gl от Uber, добавив компонент в свое приложение реакции.Но ничего не появляется.Любая помощь будет оценена

0 голосов
/ 07 февраля 2019

Я пробовал Uber Deck.gl, добавив компонент в мое приложение реакции.Но ничего не появляется.

Я полагаю, это может быть связано с mapbox.Он появился один раз, но это было все.Я устанавливаю ширину, высоту и т. Д. Но ничего не работает.Это основной пример на их сайте.

Палуба Gl с React

Вот мой код.deckgl.component.js 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { StaticMap } from 'react-map-gl';
import DeckGL, { LineLayer, ScatterplotLayer } from 'deck.gl';

const MAPBOX_ACCESS_TOKEN = '<MAPBOX_TOKEN>';

// Viewport settings
const INITIAL_VIEW_STATE = {
    latitude: 37.785164,
    longitude: -122.41669,
    zoom: 16,
    bearing: -20,
    pitch: 60
};

class DeckGlComponent extends Component {

    render() {
        return (
            <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} width="100%" height="100%">
                <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
                <LineLayer
                    data={[{ sourcePosition: [-122.41669, 37.7883], targetPosition: [-122.41669, 37.781] }]}
                    getStrokeWidth={5}
                />
                <ScatterplotLayer
                    data={[{ position: [-122.41669, 37.79] }]}
                    radiusScale={100}
                    getFillColor={[0, 0, 255]}
                />
            </DeckGL>
        );
    }
}

export default DeckGlComponent;

и index.js 

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

import DeckGlComponent from './deckgl.component';

render(
    <DeckGlComponent />,
    document.getElementById('root')
);

serviceWorker.unregister();

Это абсолютно просто.Но ничего не получается.Я создал новый токен mapbox просто для уверенности и до сих пор ничего.

1 Ответ

0 голосов
/ 21 февраля 2019

Согласно вашему описанию (поскольку информации не так много), и токен mapbox активен, как вы сказали, я подозреваю, что если вы создадите файл HTML, содержащий элемент root, например: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #root {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Этот файл необходим при вызове следующих кодов: 

render(
    <DeckGlComponent />,
    document.getElementById('root')
);

Вы можете поместить свой код в codepen или некоторые онлайн-редакторы, чтобы мы могли помочь вам более конкретно.

Кроме того, я рекомендую вам читать коды в этой папке https://github.com/uber/deck.gl/tree/master/examples/get-started, а не коды в документах.Иногда коды в документах служат для объяснения концепций и не готовы к работе.

...