如何使deck.gl和gl正确显示？

Question

在下面是一个代码沙箱示例中，我试图在特定组件中显示一个映射。但是，我不能得到的deck.gl和反应-地图-gl div生活在他们的父母.相反，它们会扩散到文档体的范围。

该示例的基本布局如下：

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

看来，Deck.gl正在创建一个<div>和一个<canvas>元素，它位于<Box id='mapcontainer'> div和<DeckGL id='deck-gl'> div之间，而我无法让div和画布驻留在它们的父Box中。

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

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

​

​

有人能帮我弄清楚为什么deck.gl和react gl组件不在父边界内吗？即使当我在parent组件中设置canvas和/或canvas道具时？

文件链接：

反应图-gl

deck.gl

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

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组件占用父组件的可用空间，您可以使用映射容器的id将position: 'relative'添加到您的Box的重写中。