Javascript 是否有开普勒的工作示例？

现在，在提供的kepler.gl React示例中有一个开放的、突破性的bug

公开问题：

当前似乎不起作用的React示例：

我正在尝试在我的React应用程序中使用开普勒.gl地图。我可以看到边栏和其他无关的东西显示出来，但实际的地图本身没有。如果有人有任何将开普勒地图集成到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();

从“React”导入React；
从“react dom”导入react dom；
从'redux'导入{createStore，applyMiddleware，combinereducer，compose}；
从“react redux”导入{Provider}
从“redux thunk”导入redux thunk
将*作为serviceWorker从“/serviceWorker”导入；
从“axios”导入axios；
从“./components/App”导入应用程序；
从“/config”导入配置；
//还原剂
从“./reducers/auth”导入身份验证；
从“./reducers/runtime”导入运行时；
从“./reducers/navigation”导入导航；
从“./reducers/posts”导入帖子；
//从“./reducers”导入减速机；
从“kepler.gl/减速机”导入开普勒减速机；
从“kepler.gl/middleware”导入{enhanceReduxMiddleware}；
axios.defaults.baseURL=config.baseURLApi；
axios.defaults.headers.common['Content-Type']=“application/json”；
const token=localStorage.getItem（'token'）；
如果（令牌）{
axios.defaults.headers.common['Authorization']=“Bearer”+令牌；
}
常数减速机=组合减速机({
啊,，
运行时，
航行
帖子，
//  (
)}
);
}
}
const mapStateToProps=state=>state；
const dispatchToProps=dispatch=>（{dispatch}）；
导出默认连接（mapStateToProps、dispatchToProps）（地图）；

在您的示例中，我没有看到任何明显不正常的情况，但如果显示了UI，而地图没有显示，则可能是与Mapbpox相关的导入和令牌等。检查控制台是否存在错误或警告，并检查“网络”选项卡会很好

---

如果您仍然需要，我将创建React App plus Typescript和KeplerGL的一个工作示例导入Codesandbox供您参考：

在根目录中保存一个.env文件，并提供您的React\u API=

---

它将工作

React_API=Hi@Sunny Sharma，欢迎加入堆栈溢出社区！为了改进你的答案，如果你能再详细一点，那将非常有帮助。也许可以提供一些上下文，说明为什么需要

React\u API=

env变量，以及该变量与问题相关的用途。

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);