在 reactjs 中的 mapboxgl 上显示 GeoJSON 数据

Question

我已经为 waterStations 创建了这个 GeoJSON 文档

var waterStation = {
  type: 'FeatureCollection',
  features: [
  {
    type: 'Feature',
    properties: {
     title: 'Water Refill Station',
     description: 'Description to be added...'
    },
    geometry: {
     type: 'Point',
     coordinates: [-120.4295379, 37.3634714]
    }
  }]};

然后我按照 mapboxgl 教程使用弹出窗口在地图上创建数据点。但是现在我已经构建了一个 csv 到 GeoJson 转换器，并且想将以下代码中的变量 waterStation 更改为 geoJson，这是我的新变量的名称。

waterStation.features.forEach(function(marker) {
  console.log(geoJson.features[1]);
  console.log(marker);
  var refill = document.createElement('div');
  refill.className = 'water-station';
  refill.appendChild(document.createElement('i'));
  new mapboxgl.Marker(refill).setLngLat(marker.geometry.coordinates).setPopup(new mapboxgl.Popup({offset: 25}).setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>')).addTo(map);
});}

我的问题是，当我从 waterStation 更改为 geoJson 时，forEach 函数不会输出任何一个 console.log() 执行。下面列出了我如何将 csv 转换为 geojson 的副本。

import axios from 'axios';
import Papa from 'papaparse';
var results = {};
var geoJson = {
  type: 'FeatureCollection',
  features: []
};

axios.get(`path to my csv file`).then(res => {
  var csvString = res.data;
  results = Papa.parse(csvString, {
    delimiter: ",",
    header: true,
    dynamicTyping: true
  });

  for (var i = 0; i < results.data.length; i++) {
    geoJson.features.push({
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [
          results.data[i].longitude,
          results.data[i].latitude
        ]
      },
      'properties': {
        'title': results.data[i].title,
        'description': results.data[i].description
      }
    });
  }
});

Answer 1

我找到了一个快速而简短的答案。由于 axios 的工作方式， .push() 不会在调用外部同时加载。为了解决这个问题，我只是在 .then() 中删除了弹出式 forEach 循环，它会同时显示所有数据。

在 reactjs 中的 mapboxgl 上显示 GeoJSON 数据

Displaying GeoJSON data on mapboxgl in reactjs

geojson

mapbox

reactjs