我通过将组件添加到我的反应应用程序来尝试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令牌，以确保仍然没有。
根据你的描述（因为没有太多的信息），并且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中的代码而不是文档中的代码。有时，文档中的代码用于解释概念，而不是为运行做好准备。