如何在 React 中使用带有 Mapbox 的本地 GeoJSON 文件 - 在 react 中导入 geojson- 使用 mapbox 数据加载

如何解决如何在 React 中使用带有 Mapbox 的本地 GeoJSON 文件 - 在 react 中导入 geojson- 使用 mapbox 数据加载

美好的一天，

我在 React 中使用 MapBox 制作带有多边形图层的地图。问题是我必须为多边形层使用本地 GeoJSON 文件，而我不能使用 URL。我见过一些解决方案，但在 React 中没有。

这是带有有效 URL 的代码：

import React,{ Component } from "react";
import ReactMapBoxGL,{ Source,Layer } from "react-map-gl";

class MapBox extends Component {
  state = {
    viewport: {
      width: "100vw",height: "90vh",latitude: 44.065256,longitude: -125.075801,zoom: 4,},};
  render() {
    return (
      <div className="MapBox">
        <ReactMapBoxGL
          {...this.state.viewport}
          onViewportChange={(viewport) => this.setState({ viewport })}
          mapStyle="mapBox://styles/mapBox/outdoors-v11"
          mapBoxApiAccesstoken="pk.eyJ1IjoiY2FybGF2ZGIiLCJhIjoiY2o0ZTM3d293MHRraTMydWZ5aGVtajdldSJ9.BMk1gf9OXguMOhEqcP43eg"
        >
          <Source
            id="oregonjson"
            type="geojson"
#Here is the URL:
            data="https://raw.githubusercontent.com/glynnbird/usstatesgeojson/master/oregon.geojson"
          />
          <Layer
            id="anything"
            type="fill"
            source="oregonjson"
            paint={{ "fill-color": "#228b22","fill-opacity": 0.4 }}
          />
        </ReactMapBoxGL>
      </div>
    );
  }
}

export default MapBox;

本地文件的名称是“oregon_local.geojson”，与 URL 完全相同。

代替 URL，我尝试过：

<Source
    id="oregonjson"
    type="geojson"
    data={require("../diagrams/oregon_local.geojson")}
/>

这给出了一个错误：

Error {message: "Input data is not a valid GeoJSON object."}

我也试过：

<Source
     id="oregonjson"
     type="geojson"
     data={"file://D:/diagrams/oregon_local.geojson"}
/>

这给出了错误：

Not allowed to load local resource

我也试过：

<Source
   id="oregonjson"
   type="geojson"
   data={"http://../diagrams/oregon_local.geojson"}
/>

这给出了错误：

Error {message: "Failed to fetch"}

如何在 React 中使用 MapBox 将本地 GeoJSON 加载为多边形图层？

Here is a link to the Sandbox

解决方法

你可以通过几种方式做到这一点。

- 在 react 中导入 geojson

将 geojson 文件扩展名更改为 json

import oregon_local from './assets/oregon.json'
...
<Source id="oregonjson" type="geojson" data={oregon_local} >
...

如果您的 geojson 文件文件很小，这种方式是可以的，因为它将被捆绑到您的 javascript 中。

- 使用 mapbox 数据加载

将您的 geojson 文件放在 public/data 文件夹中

<Source type="geojson" data="/data/oregon.geojson" >
...