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

Answer 1

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

奖金：它也是响应式的。

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

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

How to prevent deck gl layers from occupying entire viewport?

mapbox-gl-js

deck.gl

react-map-gl