Deck.gl (Mapbox) StaticMap 不会调整大小 - 覆盖屏幕上的所有内容

Question

我正在尝试将基本的deck.gl（mapbox 静态地图）添加到反应项目中 - 我可以这样做；然而，一旦地图被加载，它就会占据整个页面，并且任何其他信息都隐藏在地图后面。例如，我<p>在地图上方的a 中有一些文本，当它应该显示在地图上方时，它会隐藏在地图后面。

任何调整地图所在 div 大小的尝试均未成功： margin-top, height etc..

该类称为 DglMap

class DglMap extends Component {
  render() {
    const layers = [];
    return (
      <div className="dglMapStyle">
        <DeckGL
          initialViewState={initialViewState}
          controller={true}
          layers={layers}
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}

添加到名为 Content 的类

class Content extends Component {
  state = {};
  render() {
    return (
      <div>
        <BaseMap />
      </div>
    );
  }
}

添加到 app.js

function App() {
  return (
    <Router>
      <div>
        <SomeText />
        <Route exact path="/" component={MainContent} />
      </div>
    </Router>
  );
}
export default App;

文件SomeText返回<div><p>SomeText</p></div>

预期结果是地图显示在文本下方，而不是显示在文本上方。在另一种情况下，我可能想将地图调整为特定大小；例如500x500px。

任何帮助表示赞赏并乐意详细说明。干杯!

Answer 1

在Deck.Gl设置画布宽度和高度的部分中，似乎有这样的代码：

    if (width || width === 0) {
      width = Number.isFinite(width) ? `${width}px` : width;
      this.canvas.style.width = width;
    }

    if (height || height === 0) {
      height = Number.isFinite(height) ? `${height}px` : height;
      this.canvas.style.position = 'absolute';
      this.canvas.style.height = height;
    }

无论宽度和高度如何，它都会添加绝对定位，这可能会导致您出现一些问题。尝试添加leftcsstop样式来移动画布。然而，调整画布大小应该可以正常工作，没有任何问题，请参阅下面的代码片段。

<DeckGL width={width} height={height}></DeckGL>