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

【问题标题】：how to read data from json file an plot it in kepler.gl using React如何从 json 文件中读取数据并使用 React 在 kepler.gl 中绘制数据
【发布时间】：2020-04-17 09:56:20
【问题描述】：

我正在研究 kepler.gl .... 赖特现在我正在从一个 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 地图中。我该怎么做，谁能帮助我？.....谢谢

【问题讨论】：

标签： json reactjs kepler.gl

【解决方案1】：

在 React 中这样做

import datajson from './yourdata.json';

const data=datajson;

【讨论】：

【解决方案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
});

希望这就是你要找的东西

【讨论】：

const dataJson = require('./data.json');得到这个先生的错误..