1

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

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

带 React 的甲板 Gl

这是我的代码。甲板gl.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 令牌只是为了确定，但仍然一无所获。

4

1 回答 1

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而不是文档中的代码。有时，文档中的代码是为了解释概念，而不是准备运行。

于 2019-02-21T03:06:27.000 回答