将 GeoJSON 文件导入 React-Leaflet

【问题标题】：Importing GeoJSON file to React-Leaflet将 GeoJSON 文件导入 React-Leaflet
【发布时间】：2020-06-13 16:20:43
【问题描述】：

我正在尝试将 GeoJSON 文件导入到 react-leaflet，如下所示：

import * as bar from "./data/bar.geojson";

...

function Foo() {
  return (
    <Map center={[...]} zoom={...}>
      <TileLayer
        ...
      />
      <GeoJSON data={bar} />
    </Map>
  );
}

export default Foo;

我收到“错误：无效的 GeoJSON 对象”。拨打<GeoJSON data={bar} />。我将相同的 GeoJSON 数据硬编码到这个 javascript 文件中并且它工作正常，所以它一定是导致问题的导入或处理 GeoJSON 文件的方式。

有人知道我为什么会出错吗？提前致谢！

【问题讨论】：

标签： json reactjs leaflet geojson react-leaflet

【解决方案1】：

你可以像这样导入你的 geojson 文件：

    import bar from "./data/bar.geojson";

然后按照您的示例使用它。

【讨论】：

感谢您的帮助！我试过你的，但没有用，但是当我将文件的扩展名从 .geojson 更改为 .json（当然也将行更改为 import bar from "./data/bar.json";）时，它得到了修复。奇怪的是它没有采用.geojson 格式。顺便说一句，我正在使用create-react-app。
我认为 create-react-app 只需将 /\.json$/ 添加到默认 webpack 配置中的 json-loader 即可。糟糕的是，除了弹出所有默认配置之外，没有方便的方法将该配置覆盖为 vue-cli。