如何让deck.gl与react-map-gl组件正确显示在父容器范围内

问题根因 #

DeckGL 自动生成的 deck-gl-wrapper 容器默认采用 position: absolute 定位，而你当前的父容器 <Box id='mapcontainer'> 没有设置相对定位规则，导致该自动生成的容器直接相对于页面 body 进行定位，自然会溢出父容器边界。你之前尝试的 parent、canvas 属性属于DeckGL原生JS API的配置项，React封装版本会自动处理容器挂载逻辑，不需要手动传入，只要样式规则正确即可正常渲染。

修复步骤 #

你只需要做两处修改即可解决问题：

• 给父级 Box 组件添加 position: 'relative' 和 overflow: 'hidden' 样式，让内部绝对定位的元素以该容器为基准定位，同时裁剪超出边界的内容
• 给 DeckGL 组件添加宽高为 100% 的样式，让其自动撑满父容器

修改后代码示例 #

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,
                // 新增以下两个样式
                position: 'relative',
                overflow: 'hidden'
            }}
        >
            <DeckGL
                initialViewState={INITIAL_VIEW_STATE}
                controller={true}
                id="deck-gl"
                // 新增style属性设置宽高
                style={{width: '100%', height: '100%'}}
            >
                <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;

可选补充 #

如果后续需要对自动生成的 wrapper 容器做更精细的样式控制，可以直接通过ID选择器定义CSS规则：

#deck-gl-wrapper {
  position: absolute;
  inset: 0; /* 等价于 top/right/bottom/left 都为0 */
}

内容的提问来源于stack exchange，提问作者Ax0n