我正在尝试使用react-map-gl地理位置示例，但.geojson数据不愿意加载

Question

我正在尝试使用https://github.com/uber/react-map-gl/tree/4.1-release/examples/geojson的react-map-gl地理位置示例，但是'data/us-income.geojson‘拒绝在'app.js’中加载(404)。

import {json as requestJson} from 'd3-request';  

componentDidMount() {
    requestJson('data/us-income.geojson', (error, response) => {
      if (!error) {
    this._loadData(response);
  }
});
}

'd3-request‘模块似乎被弃用了，但我无法让它与'd3-fetch’一起工作，正如所建议的那样。如何在react-map-gl中加载.geojson数据？

Answer 1

要通过d3-fetch库加载GeoJSON文件：

1)导入json函数：import { json } from 'd3-fetch'

2)现在可以像这样下载文件内容：

json("data/us-income.geojson")
.then((data) => {
    //...
});

这是一个适用于react-map-gl library的official example

const MAPBOX_TOKEN =
  "--YOUR_KEY-GOES-HERE--"; // 
const SOURCE_ID = "national-park";

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      viewport: {
        latitude: 40.492392,
        longitude: -121.403732,
        zoom: 11
      }
    };

    this.mapRef = React.createRef();
    this.handleMapLoaded = this.handleMapLoaded.bind(this);
    this.handleViewportChange = this.handleViewportChange.bind(this);
  }

  handleViewportChange(viewport) {
    this.setState({ viewport });
  }


  handleMapLoaded() {
    const map = this.mapRef.current.getMap();

    json("data/national-park.json")
    .then((data) => {
      this.initMapData(map, data);
    });

  }

  render() {
    const { viewport } = this.state;

    return (
      <div style={{ height: "100%" }}>
        <MapGL
          ref={this.mapRef}
          onLoad={this.handleMapLoaded}
          mapStyle="mapbox://styles/mapbox/outdoors-v11"
          width="100%"
          height="480px"
          {...viewport}
          onViewportChange={this.handleViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </div>
    );
  }

  initMapData(map, data) {
    map.addSource(SOURCE_ID, data);
    map.addLayer({
      id: "park-boundary",
      type: "fill",
      source: "national-park",
      paint: {
        "fill-color": "#888888",
        "fill-opacity": 0.4
      },
      filter: ["==", "$type", "Polygon"]
    });

    map.addLayer({
      id: "park-volcanoes",
      type: "circle",
      source: "national-park",
      paint: {
        "circle-radius": 6,
        "circle-color": "#B42222"
      },
      filter: ["==", "$type", "Point"]
    });
  }
}