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

Question

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

任何调整 map 所在 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>
预期结果是 map 显示在文本下方，而不是显示在文本上方。在另一种情况下，我可能想将 map 调整为特定大小；例如 500x500px .

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

Answer 1

在设置 Canvas 宽度和高度的 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;
    }

无论宽度和高度如何，它都会增加绝对定位，这可能会导致一些问题。尝试添加 left和 top css 样式来移动 Canvas 。然而，调整 Canvas 大小应该没有任何问题，请参阅下面的代码片段。

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