如何在 React 中使用带有 Mapbox 的本地 GeoJSON 文件

Question

美好的一天，

我在 React 中使用 Mapbox 来制作带有多边形图层的地图。问题是我必须为多边形图层使用 local GeoJSON 文件，而我 不能使用 URL。我已经看到了一些解决方案，但是 none 在 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

Answer 1

您可以通过多种方式完成。

- 在 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" >
...