如何更新 Kepler.gl MapBox 组件样式答案

【问题标题】：How to update Kepler.gl MapBox component style如何更新 Kepler.gl MapBox 组件样式
【发布时间】：2019-05-08 17:25:09
【问题描述】：

我正在尝试弄清楚如何自定义 kepler.gl 的地图框样式。我想让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());

我也尝试过使用 styled-components ThemeProvider：

<ThemeProvider theme={{width: '100%', height:'100%'}}>
            <KeplerGl
                id="foo"
                mapboxApiAccessToken={'API_KEY'}
                store={store}
              />
</ThemeProvider>

任何帮助将不胜感激！

【问题讨论】：

标签： kepler.gl

【解决方案1】：

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>

【讨论】：