现在在提供的 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);