如何从json文件中读取数据，并使用React将其绘制在kepler.gl中

Question

我正在研究kepler.gl…wright现在我正在从一个api读取数据，并在keplr.gl中绘制数据，这很好，这是代码。。。

import keplerGlReducer from "kepler.gl/reducers";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { taskMiddleware } from "react-palm/tasks";
import { Provider, useDispatch } from "react-redux";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import useSwr from "swr";
const reducers = combineReducers({
keplerGl: keplerGlReducer
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default function App() {
return (
<Provider store={store}>
<Map />
<csv/>
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const { data } = useSwr("covid", async () => {
const response = await fetch(
"https://gist.githubusercontent.com/leighhalliday/a994915d8050e90d413515e97babd3b3/raw/a3eaaadcc784168e3845a98931780bd60afb362f/covid19.json"
);
const data = await response.json();
return data;
});
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
data
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
}
}, [dispatch, data]);
return (
<KeplerGl
id="covid"
mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
width={window.innerWidth}
height={window.innerHeight}
/>
);
}

现在我想从jason或csv文件中读取数据，并将数据绘制到kepler.gl映射中。。我该怎么做？有人能帮我吗？。。。。。感谢

Answer 1

在React中，像这样做

import datajson from './yourdata.json';
const data=datajson;

Answer 2

最简单的方法是将json或csv文件放在代码旁边，然后
导入json文件：

const dataJson = require('./data.json');

将数据源更改为json:

const data = dataJson
// or dataJson.data depending on your json structure

或者，如果您的数据是csv格式，最快的方法是安装csv-parse，然后：

const data = parse(csvData, {
//config based on your csv format
columns: true,
skip_empty_lines: true
});

希望这就是你想要的