如何获取和 return 静态 geojson？

Question

我正在尝试通过获取调用访问原始 geojson 并将其存储在状态中。这只是暂时的，不是生产规模的应用程序。我不确定我哪里出错了。我的代码如下：

 fetchData = async () => {
      let data = await
        fetch(
          "https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/examples/basic/crimes_by_district.geojson"
          )
          .then((response) => response.json())
          .then((geojson) => {
            console.log("my_data: ", geojson)
            return geojson
          })

      console.log("my_data: ", geojson)
      this.setState({ geojson: data })
      return data
  }

我得到以下信息：

my_data:  {type: "FeatureCollection", features: Array(22), crs: {…}}
App.js:218 my_data:  /static/media/hh_2020112300_2020120623_Saturday_02.d9141b26.geojson

Answer 1

我认为问题是当 console.log("my_data: ", geojson)（第二个）执行时 geojson 超出范围。第二个控制台日志不应该是 console.log("data: ", data) 吗？

Answer 2

试试这个

let data = await fetch(
  "https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/examples/basic/crimes_by_district.geojson",
  {
    headers: {
      accept:
        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
      "accept-language": "en-US,en;q=0.9,ar;q=0.8,bn;q=0.7",
      "cache-control": "max-age=0",
      "if-none-match":
        'W/"8c50b5f19d835c2097cf05ef5967bdf5531f37aaaed918b17479328f69aa7309"',
      "sec-ch-ua":
        '"Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"',
      "sec-ch-ua-mobile": "?0",
      "sec-fetch-dest": "document",
      "sec-fetch-mode": "navigate",
      "sec-fetch-site": "none",
      "sec-fetch-user": "?1",
      "upgrade-insecure-requests": "1",
    },
    referrerPolicy: "strict-origin-when-cross-origin",
    body: null,
    method: "GET",
    mode: "cors",
    credentials: "omit",
  }
);

如何获取和 return 静态 geojson？

How do I fetch and return a static geojson?

javascript

fetch

geojson

reactjs