如何让 deck.gl 和 react-map-gl 正确显示？

Question

Here is a code sandbox example 我试图在特定组件内显示地图。但是，我无法让 deck.gl 和 react-map-gl div 存在于它们的父级中。相反，它们会溢出到文档正文的范围内。

例子的基本布局是：

        <Box id='mapcontainer'>
            <DeckGL id="deck-gl">
                <MapView id="map"  >
                    <StaticMap/>
                </MapView>
            </DeckGL>
        </Box>

Deck.gl 似乎在 <Box id='mapcontainer'> div 和 <DeckGL id='deck-gl'> div 之间创建了一个 <div> 和一个 <canvas> 元素，我无法让 div 和 canvas 位于它们的父 Box 中.

<div> 和 <canvas> 中的 id 似乎是分别从传递给 DeckGL 组件的 ID 创建的，id="deck-gl-wrapper" 和 id="deck-gl"。其中"deck-gl" 是我传递给<deckGL> 组件的id。

这可能是也可能不是实际问题，但在 devtools 中使用元素检查器是我目前最好的猜测。

谁能帮我弄清楚为什么 deck.gl 和 react-map-gl 组件不在其父级范围内？即使我在DeckGL 组件中设置了parent 和/或canvas 属性？

文档链接：
react-map-gl
deck.gl

上面链接的代码框中包含一个功能示例。我已经包含了许多我作为 cmets 尝试过的东西，但到目前为止还没有运气。

https://codesandbox.io/s/deck-gl-and-mui-react-e3t23?file=/src/App.js

谢谢...

对于本地快速参考，app.js 文件如下所示。

import Box from "@material-ui/core/Box";
import DeckGL from "@deck.gl/react";
import { MapView } from "@deck.gl/core";
import { LineLayer } from "@deck.gl/layers";
import { StaticMap } from "react-map-gl";

const MAPBOX_ACCESS_TOKEN = <tokenInCodeSandboxIfYouNeedIt>

const INITIAL_VIEW_STATE = {
    longitude: -122.41669,
    latitude: 37.7853,
    zoom: 13,
    pitch: 0,
    bearing: 0
};

const data = [
    {
        sourcePosition: [-122.41669, 37.7853],
        targetPosition: [-122.41669, 37.781]
    }
];

function App() {
    return (
        <Box
            id='mapcontainer'
            sx={{
                border: 1,
                height: 450,
                width: "auto",
                m: 5
            }}
        >
            <DeckGL
                initialViewState={INITIAL_VIEW_STATE}
                controller={true}
                id="deck-gl"
            >
                <LineLayer id="line-layer" data={data} />
                <MapView
                    id="map"
                    controller={false}
                >
                    <StaticMap
                        mapStyle="mapbox://styles/mapbox/dark-v9"
                        mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} 
                    />
                </MapView>
            </DeckGL>
        </Box>
    );
}

export default App;

Answer 1

为了让deck.gl 组件占用父组件的可用空间，您可以将position: 'relative' 添加到您的Box 的覆盖中，ID 为mapcontainer。