1

这是一个代码沙箱示例，我试图在其中显示特定组件内的地图。但是，我无法让 deck.gl 和 react-map-gl div 存在于它们的父级中。相反，它们会溢出到文档正文的范围内。

该示例的基本布局是：

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

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

的id和似乎是从传递给 DeckGL 组件的 id 创建的，<div>和分别。我传入组件的位置在哪里。<canvas>id="deck-gl-wrapper"id="deck-gl""deck-gl"id<deckGL>

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

来自 devtools 的元素结构截图

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

文档链接：
react-map-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;
4

1 回答 1

1

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

于 2021-09-14T17:09:47.217 回答