mapbox-gl-js - 如何防止deck 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

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

奖励：它也是响应式的。

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