无法从React Kepler.gl中的URL显示geojson

问题描述

我无法通过Kepler.gl React代码从本地API URL显示我的geojson。当我使用Kepler.gl/demo网站时，可以“从URL加载数据”并输入相同的本地主机URL，它可以正常工作。

我正在跟踪本教程：https://youtu.be/BEZjt08Myxs，并带有源代码 https://github.com/leighhalliday/keplergl-demo

我的API返回一个geojson：

http://localhost:8000/api/mytest/distance.geojson

geojson如下：

{"type":"FeatureCollection","features":[{"id":183124,"type":"Feature","geometry":{"type":"Point","coordinates":[-7.6192,33.59279999999999]},"properties":{"event_date":"1999-12-24","event_time":"1999-12-24T00:00:00Z","event_type":"Test","sub_event_type":"Test","notes":"This is a test of the application,hopefully this displays"}}]}

App.js看起来像：

import React from "react";
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 />
    </Provider>
  );
}

function Map() {
  const dispatch = usedispatch();
  const { data } = useSwr("conflict",async () => {
    const response = await fetch(
      "http://localhost:8000/api/mytest/distance.geojson"
    );
    const data = await response.json();
    console.log(data);
    return data;
  });

  React.useEffect(() => {
    if (data) {
      dispatch(
        addDataToMap({
          datasets: {
            info: {
              label: "TESTS",id: "test20"
            },data
          },option: {
            centerMap: true,readOnly: false
          },config: {}
        })
      );
    }
   },[dispatch,data]);

  return (
    <KeplerGl
      id="test"
      mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_API}
      width={window.innerWidth}
      height={window.innerHeight}
    />
  );
}

请注意，当我在Map（）函数的代码中使用教程中的数据时，即：

https://gist.githubusercontent.com/leighhalliday/a994915d8050e90d413515e97babd3b3/raw/a3eaaadcc784168e3845a98931780bd60afb362f/covid19.json

然后效果很好。也许我需要在某个地方添加对geojson的引用，尽管我认为这是在URL中强制使用geojson扩展的要点。

当我转到kepler.gl演示时，可以使用“从URL加载地图”功能正确显示我的本地主机URL。我还可以将geojson下载到我的桌面上并使用加载文件，这也很好用。

我有点不知所措。

这是我的package.json（与本教程中的内容相同）：

{
  "name": "kepler-demo","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","kepler.gl": "^2.0.1","react": "^16.13.1","react-dom": "^16.13.1","react-palm": "^3.1.2","react-redux": "^7.2.0","react-scripts": "3.4.1","redux": "^4.0.5","styled-components": "^5.0.1","swr": "^0.1.18"
   },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

编辑：

我尝试通过更改package.json来升级Kepler.gl模块： “ kepler.gl”：“ ^ 2.3.1”，

这并没有改变我的结果。

这是console.log（data）的结果，向我显示了某些内容（正确的结果，对我来说就像一个geojson）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

kepler.gl reactjs reactjs reactjs reactjs