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

Question

我有一个 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 中渲染甲板 gl 组件。

Answer 1

您需要在您的示例“my-container”中为deck.gl 容器添加一个维度。添加高度、宽度和位置。根据需要切换高度和宽度值，但将位置值保留为“相对”。通过这种方式，您可以调整 DeckGL 组件的大小，并且它可以完全在您的容器内呈现。

奖励：它也是响应式的。

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