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

Question

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

例子的基本布局是：

        <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> 和一个 <canvas> 元素68=]，我无法让 div 和 canvas 住在他们的 parent 盒子里。

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

这可能是也可能不是真正的问题，但我现在最好的猜测是使用 devtools 中的元素检查器。

谁能帮我弄清楚为什么 deck.gl 和 react-map-gl 组件不在它们的 parent 范围内？即使我在 DeckGL 组件中设置了 parent and/or canvas 道具？

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

上面链接的codesandbox中包含一个功能示例。我已经将我尝试过的许多事情作为评论包括在内，但到目前为止还没有成功。

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 组件占用父组件可用的 space，您可以将 position: 'relative' 添加到 id 为 mapcontainer 的 Box 的覆盖中。

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

How do I get deck.gl and react-map-gl to display correctly?

html

css

reactjs

deck.gl

react-map-gl