如何将坐标数组传递给 react-map-gl 热图图层？答案

【问题标题】：How to pass an array of coordinates to react-map-gl heatmap layer?如何将坐标数组传递给 react-map-gl 热图图层？
【发布时间】：2019-07-04 16:33:32
【问题描述】：

在将文档与我的用例相协调时遇到了一些麻烦。我在尝试使用 d3 让 openstreet 地图进行反应时遇到了一点困难，并且一直在玩 react-map-gl ......很棒的库，非常适合拨号！这个库建立在 d3 和 openstreetmaps 之上，并使用了很多的 d3 插件...这是我要复制的示例：

https://github.com/uber/react-map-gl/blob/5.0-release/examples/heatmap/src/app.js

在此示例中，坐标所在的数据位于 geoJson 文件中，并以如下所示的方法访问（从上面的链接复制并粘贴...在此代码中，他们使用 d3-请求插件通过geoJson文件获取和解析，该文件包含有关地震等的其他数据）：

  _handleMapLoaded = event => {
    const map = this._getMap();

    requestJson(
      'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
      (error, response) => {
        if (!error) {
          // Note: In a real application you would do a validation of JSON data before doing anything with it,
          // but for demonstration purposes we ingore this part here and just trying to select needed data...
          const features = response.features;
          const endTime = features[0].properties.time;
          const startTime = features[features.length - 1].properties.time;

          this.setState({
            earthquakes: response,
            endTime,
            startTime,
            selectedTime: endTime
          });
          map.addSource(HEATMAP_SOURCE_ID, {type: 'geojson', data: response});
          map.addLayer(this._mkHeatmapLayer('heatmap-layer', HEATMAP_SOURCE_ID));
        }
      }
    );
  };

如果您使用的是 GeoJson，那就太好了，而且我已经做了很多工作以将 d3 指向美国各州、县或邮政编码的对象……但是我想做的事情要简单得多！我有一组数据要获取，并作为道具传递给这个热图组件，它看起来像这样：

[
{name: locationOne, latitude: 1.12345, longitude: -3.4567},
{name: locationTwo, latitude: 1.2345, longitude: -5.678},
...etc

]

所以问题是，如果我不使用 geoJson，我如何告诉热图使用什么坐标？任何帮助表示赞赏！！！

【问题讨论】：

标签： reactjs heatmap react-map-gl

【解决方案1】：

即使您的数组中的数据不是geoJson，我们也可以将它处理成geoJSON。我们可以通过创建一个工厂函数来使用数组数据返回有效的 geoJSON。

一旦将数据转换为 geoJSON，就可以按照您找到的示例中所示使用它。

const rawData = [
  {name: 'Feature 1', value: 2, latitude: 1.12345, longitude: -3.4567},
  {name: 'Feature 2', value: 5, latitude: 1.2345, longitude: -5.678},
];

const makeGeoJSON = (data) => {
  return {
    type: 'FeatureCollection',
    features: data.map(feature => {
      return {
        "type": "Feature",
        "properties": {
          "id": feature.name,
          "value": feature.value
        },
        "geometry": {
          "type": "Point",
          "coordinates": [ feature.latitude, feature.longitude]
        }
      }
    })
  }
};

const myGeoJSONData = makeGeoJSON(rawData);

console.log(myGeoJSONData);

【讨论】：