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教程在弹出窗口的地图上创建数据点。但是现在我已经为GeoJson转换器构建了一个csv，并希望将以下代码中的变量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（）执行。下面列出了我如何使用gesjson进行csv的副本。

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()不会在呼叫之外同时加载。为了解决这个问题，我只是将forEach循环放在.then()内，它将同时显示所有数据。

在reactjs中的mapboxgl上显示GeoJSON数据

1 个答案: