Reactjs 如何使用deck.gl中的数据？

我是deck.gl的新手，有一些问题。每当我尝试使用API作为数据时，我都会尝试使用以下API

data: 'https://envirocar.org/api/stable/measurements'

但它不起作用，或者如果我把api的数据放在json文件中，并把它放在我当前的工作中 它不工作的目录，例如：

data:'../data_file.json'

即使是.csv文件也不起作用，但当我以数组形式使用数据时，就像下面这样，它就起作用了。我不知道为什么如果有人知道，请帮助我

data: [
   {
      "type": "Feature",
      "geometry": {
         "type": "Point",
         "coordinates": [
            6.4847174678758375,
            51.22546715521443
         ]
      }
]

我说的是_renderLayers（）中的数据

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“react map gl”导入{StaticMap}；
从“@deck.gl/react”导入DeckGL；
从'@deck.gl/layers'导入{ScatterplotLayer}；
const MAPBOX_TOKEN=process.env.MapboxAccessToken；
常量初始视图状态={
经度：6.4847174678758375，
纬度：51.22546715521443，
缩放：11，
maxZoom:16，
音高：0，
方位：0
};
导出默认类应用程序扩展组件{
_renderLayers（）{
返回[
新散射层({
id:'散点图'，
数据：'https://envirocar.org/api/stable/measurements',
半径刻度：10，
半径最小像素：0.25，
getPosition:d=>（d.features.geometry.coordinates），
getFillColor:[255,0255]，
})
];
}
render（）{
常量mapStyle=mapbox://styles/mapbox/light-v9';
返回(
);
}
}
导出函数renderDOM（容器）{
渲染（，容器）；
}

我建议下载数据并在本地保存。

您需要添加dataTransform，如下所示：

导出默认类应用程序扩展组件{
_renderLayers（）{
返回[
新散射层({
id:'散点图'，
数据：'https://envirocar.org/api/stable/measurements',
数据转换：d=>d.features，
半径刻度：10，
半径最小像素：0.25，
getPosition:d=>d.geometry.coordinates，
getFillColor:[255,0255]，
})
];
}

我认为这并不能回答用户的问题，但却绕过了使用API的预期操作方式。

import React, {Component} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';

const MAPBOX_TOKEN = process.env.MapboxAccessToken; 
const INITIAL_VIEW_STATE = {
  longitude: 6.4847174678758375,
  latitude: 51.22546715521443,
  zoom: 11,
  maxZoom: 16,
  pitch: 0,
  bearing: 0
};

export default class App extends Component {
  _renderLayers() {
    return [
      new ScatterplotLayer({
        id: 'scatter-plot',
        data: 'https://envirocar.org/api/stable/measurements',
        radiusScale: 10,
        radiusMinPixels: 0.25,
        getPosition: d => (d.features.geometry.coordinates),
        getFillColor: [255,0,255],
      })
    ];
  }

  render() {
    const mapStyle = 'mapbox://styles/mapbox/light-v9';

    return (
      <DeckGL layers={this._renderLayers()} initialViewState={INITIAL_VIEW_STATE} controller={true}>
        <StaticMap
          reuseMaps
          mapStyle={mapStyle}
          preventStyleDiffing={true}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </DeckGL>
    );
  }
}

export function renderToDOM(container) {
  render(<App />, container);
}