kepler.gl 是否有任何有效的反應示例？

Question

現在，在提供的 kepler.gl React 示例中存在一個開放的、破壞性的錯誤。

公開問題： https : //github.com/keplergl/kepler.gl/issues/983

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

我正在嘗試在我的 React 應用程序中使用 kepler.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();

在我的地圖組件中，我有：

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 顯示出來而地圖沒有顯示，則可能是 Mapbbox 相關的導入和令牌等。檢查您的控制台是否有錯誤或警告和還要檢查網絡選項卡。

如果您仍然需要它，我將使用 Create React App plus Typescript 和 KeplerGL 的工作示例導入 Codesandbox 以供您參考： https ://codesandbox.io/s/create-react-app-typescript-keplergl-bv0vb

Answer 2

在 root 中保存一個 .env 文件並給你 React_API= 它會工作