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中渲染deck gl组件。

Answer 1

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

奖金：它也很敏感。

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

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

1 个答案: