有 kepler.gl 的工作反应示例吗？

Question

目前，在提供的 kepler.gl React 示例中存在一个未解决的重大错误。

未解决的问题： https ://github.com/keplergl/kepler.gl/issues/983

目前似乎不起作用的 React 示例： https ://github.com/keplergl/kepler.gl/tree/master/examples

我正在尝试让 kepler.gl 地图在我的 React 应用程序中工作。我可以看到侧边栏和其他无关的东西出现，但实际的地图本身却没有。如果有人有任何将开普勒地图集成到 React 应用程序中的工作示例，我很乐意看到它，但如果有人知道为什么我当前的集成被破坏，那也会有很大的帮助。

在我的 index.js 文件中，我有：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers, compose} from 'redux';
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as serviceWorker from './serviceWorker';
import axios from 'axios';

import App from './components/App';
import config from './config';

// reducers
import auth from './reducers/auth';
import runtime from './reducers/runtime';
import navigation from './reducers/navigation';
import posts from './reducers/posts';
// import reducers from './reducers';

import keplerGlReducer from 'kepler.gl/reducers';
import {enhanceReduxMiddleware} from 'kepler.gl/middleware';

axios.defaults.baseURL = config.baseURLApi;
axios.defaults.headers.common['Content-Type'] = "application/json";
const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = "Bearer " + token;
}

const reducers = combineReducers({
    auth,
    runtime,
    navigation,
    posts,
    // <-- mount kepler.gl reducer in your app
    keplerGl: keplerGlReducer,
  });

const store = createStore(
  reducers,
  applyMiddleware(
    ReduxThunk
  )
);

ReactDOM.render(
    <Provider store={store}>
        <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"></link>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet"></link>
        <script src="https://unpkg.com/kepler.gl/umd/keplergl.min.js"></script>
        <App />
    </Provider>,
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

在我的地图组件中，我有：

import React from 'react';
import {connect} from 'react-redux';

import KeplerGl from 'kepler.gl';
import {addDataToMap} from 'kepler.gl/actions';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';


const sampleTripData = {
  fields: [
    {name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},
    {name: 'pickup_longitude', format: '', type: 'real'},
    {name: 'pickup_latitude', format: '', type: 'real'}
  ],
  rows: [
    ['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],
    ['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],
    ['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]
  ]
};

const sampleConfig = {
  visState: {
    filters: [
      {
        id: 'me',
        dataId: 'test_trip_data',
        name: 'tpep_pickup_datetime',
        type: 'timeRange',
        enlarged: true
      }
    ]
  }
};

class Maps extends React.Component {

  componentDidMount() {
    this.props.dispatch(
      addDataToMap({
        datasets: {
          info: {
            label: 'Sample Taxi Trips in New York City',
            id: 'test_trip_data'
          },
          data: sampleTripData
        },
        option: {
          centerMap: true,
          readOnly: false
        },
        config: sampleConfig
      })
    );
  }

  render() {
    return (
      <div style={{position: 'absolute', left: 0, width: '100vw', height: '100vh'}}>
        soimething
        <AutoSizer>
        {({height, width}) => (
          <KeplerGl
          id="map"
          width={width}
          mapboxApiAccessToken={"my mapbox token"}
          height={height}
          />
        )}
      </AutoSizer>
      </div>

    );
  }
}

const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({dispatch});

export default connect(mapStateToProps, dispatchToProps)(Maps);

Answer 1

我在您的示例中没有看到任何明显不正常的内容，但如果 UI 显示而地图未显示，则可能是与 Mapbpox 相关的导入和令牌等。检查您的控制台是否有错误或警告和还要检查网络选项卡。

我将一个使用 Create React App 加上 Typescript 和 KeplerGL 的工作示例导入到 Codesandbox 中，供您参考（如果您仍然需要）：https ://codesandbox.io/s/create-react-app-typescript-keplergl-bv0vb