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

【问题标题】：How to use data in deck.gl?如何使用deck.gl中的数据？
【发布时间】：2020-03-09 09:08:49
【问题描述】：

我是 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} 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);
}

【问题讨论】：

标签： reactjs deck.gl react-map-gl

【解决方案1】：

你需要像这样添加dataTransform：

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

另外，请注意对 getPosition 的更改。

【讨论】：

【解决方案2】：

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

【讨论】：

我不认为这可以回答用户的问题，而是规避了使用 API 的预期操作方式。