使用 deck.gl 和 nebula.gl 的特定 geojson URL 在我的 React 应用程序中不起作用

Question

我试图为世界上每个国家/地区显示一个多边形，这些位置在国家/地区内 URL 但这并没有让我得到我想要的多边形，而是将其用作字符串。虽然在示例中无法获取数据，但您可以访问站点本身。 https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-forked-08hvs?file=/app.js

  const countries = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson';

    console.log(countries)

    const layerGeo = new EditableGeoJsonLayer({
        id: 'geojson-layer',
        data: countries,
        mode: ViewMode,
        onClick: d => console.log(d)
    })


<DeckGL
  initialViewState={viewState}
  controller={true}
  layers={layerGeo}
  getTooltip={getTooltip}
  views={new MapView({repeat: true})}
>
 <StaticMap
  mapStyle='mapbox://styles/mapbox/streets-v11'
  mapboxApiAccessToken={MAPBOX_TOKEN}
 />
</DeckGL>

如何在不复制文件并自己存储的情况下从 URL 获取这些数据。

Answer 1

我没有尝试让 URL 工作，而是下载了文件并导入到应用程序本身，因此解决了这个问题。

Answer 2

来自 documentation：data 选项接受 javascript 对象。在您的示例代码中，您将 url 作为字符串传递。

首先尝试获取 url，然后将响应数据解析为对象。最后你可以输入 data 选项：

const url = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson';

async function getCountries(url) 
{
  let response = await fetch(url);
  let data = await response.json()
  return data;
}

let countries = getCountries(url);

const layerGeo = new EditableGeoJsonLayer({
  id: 'geojson-layer',
  data: countries,
  mode: ViewMode,
  onClick: d => console.log(d)
})

使用 deck.gl 和 nebula.gl 的特定 geojson URL 在我的 React 应用程序中不起作用

Specific geojson URL is not working within my react app using deck.gl and nebula.gl

reactjs

deck.gl

react-map-gl