我正在尝试弄清楚如何自定义 kepler.gl 的 Mapbox 样式。我想让mapbox组件填充屏幕宽度和高度。
我已经尝试使用调度程序更新它,但没有成功:
this.props.dispatch(loadCustomMapStyle({inputStyle: {url: 'mapbox://styles/mapbox/navigation-guidance-day-v4', id: 'some-id', style: {width: '100%', height: '100%'}}}));
this.props.dispatch(addCustomMapStyle());
我还尝试使用样式组件 ThemeProvider:
<ThemeProvider theme={{width: '100%', height:'100%'}}>
<KeplerGl
id="foo"
mapboxApiAccessToken={'API_KEY'}
store={store}
/>
</ThemeProvider>
任何帮助将不胜感激!
最佳答案
KeplerGl 组件接受 width
和 height
属性(文档 here )。要使用 div 的尺寸更改这些,您可以使用 AutoSizer 。例如,要让 KeplerGl 组件填充屏幕,您可以将其包装在全屏的 div 中,如下所示:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
...
<div style={{position: "absolute", width: "100%", height: "100%"}}>
<AutoSizer>
{({height, width}) => (
<KeplerGl
mapboxApiAccessToken={MAPBOX_TOKEN}
id="map"
width={width}
height={height}
/>
)}
</AutoSizer>
</div>
关于kepler.gl - 如何更新 Kepler.gl MapBox 组件样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56046093/