Deck.gl(地图框)静态地图不调整大小 - 覆盖屏幕上的所有内容

Question

我正在尝试向 react 项目添加一个基本 deck.gl(mapbox 静态映射( - 我可以这样做;但是，一旦地图加载，它就会占用整个页面，任何其他信息都隐藏在地图后面。例如，我在地图上方的<p>中有一些文本，它隐藏在地图后面，而它应该显示在地图上方。

任何调整地图所在的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>
);
}
}

添加到名为"内容"的类

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

添加到应用程序.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;
}

无论宽度和高度如何，它都会增加绝对定位，这可能会导致一些问题。尝试添加left和topCSS 样式来移动画布。但是，调整画布的大小应该可以毫无问题地工作，请参阅下面的代码片段。

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