Question

如何防止甲板 gl 层占据整个视口？

2020-03-27

2642

mapbox-gl-js deck.gl react-map-gl

我有一个 DeckGL 组件，我将它括在 div 标签中并指定其大小，但 deckGL 层似乎占据了整个视口。这是我的代码片段。

const INITIAL_VIEW_STATE = {
    longitude: 83.32247972488423,
    latitude: 17.714023254029464,
    zoom: 10,
    pitch: 0,
    bearing: 0
}

<div class="my-container"> 
 <DeckGL initialViewState={INITIAL_VIEW_STATE} layer={layer} controller>
   // here I'm putting a static map
 </DeckGL>
</div>

如何在具有给定大小的特定 div 中呈现 deck gl 组件。

Answer 1

您需要为 deck.gl 容器添加一个尺寸，例如“my-container”。添加高度、宽度和位置。根据需要切换高度和宽度值，但保留位置值为“relative”。这样，您可以调整 DeckGL 组件的大小，并且它可以在您的容器内完全呈现。

额外好处：它还具有响应性。

<div class"my-container" style={{ height: '50vh', width: '50vw', position: 'relative' }}
    <DeckGL>
        ...
    </DeckGL>
</div>