Question

我正在通过将组件添加到我的react应用程序来试用Uber的deck.gl。但是什么也没出现。

我认为它可能与mapbox有关。它只出现一次，仅此而已。我设置宽度，高度等。但是没有任何效果。这是他们网站上的基本示例。

这是我的代码。 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令牌。

Answer 1

根据您的描述（因为没有太多信息），并且mapbox令牌已如您所说处于活动状态，我怀疑您是否创建一个包含root元素的HTML文件，如下所示：

<!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中的代码，而不要阅读文档中的代码。有时，文档中的代码仅用于解释概念，而无法运行。

我正在通过将组件添加到我的react应用程序来试用Uber的deck.gl。但是什么也没出现。任何帮助，将不胜感激

1 个答案: