时间戳

首页 > 解决方案 > Kepler.gl 地图中心默认设置为 0,0

mapbox - Kepler.gl 地图中心默认设置为 0,0

问题描述

有人在这里使用 Kepler.gl 吗？需要知道如何修改开普勒的地图中心动态？现在当我加载数据时，地图默认指向 0,0 lag-lng

标签： mapboxmapbox-glkepler.gl

解决方案

如果您已经编写了自己的 load-data-modal（类似于 kepler.gl git repo 中的demo-app）并将其注入应用程序，则可以使用 updateMap 函数来设置地图状态。在 load-data-modal.js 的顶部，添加以下行：

import {updateMap} from 'kepler.gl/actions';

为了分派动作，您需要向组件添加分派函数。一种方法是使用 redux 连接：

import {connect} from 'react-redux';

然后在文件的底部，将导出替换为

const mapStateToProps = state => state
const mapDispatchToProps = (dispatch, props) => ({
    dispatch,
    keplerGlDispatch: forwardTo("map", dispatch)
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(LoadDataModal);

完成后，您可以使用 updateMap 更改地图状态并更新 lat lon，如下所示：

this.props.keplerGlDispatch(updateMap({"latitude": 39.738756,"longitude": -105.023357}));

推荐阅读