javascript - 将Leaflet map 的JSON转换为GeoJSON的更好方法是什么

Question

我想将 JSON 转换为 GeoJSON，以便根据从 API 获取的 JSON 文件在 Leaflet map 上绘制 divIcons。作为 javascript 的新手，我很难找到可行的解决方案。我以为我的问题已在我的其他帖子 How to convert JSON to GeoJSON 中得到解决但这只解决了我没有意识到的一个难题，即将数据加载到我认为是我的问题的代码中。我仍然在努力寻找一个将 JSON 转换为 GeoJSON 的可行解决方案，以便我能够从那里使用它在 map 上绘制 divIcons。

我在这里、YouTube 和其他几个网站上进行了大量研究，其中大多数都是过时的答案，似乎不起作用或不适用于我的情况。我尝试过将 JSON 转换为 GeoJSON 的方法之一是这样的。

$.getJSON("./data/tracking.json", function(jsonData) {
  var outGeoJson = {}
  outGeoJson['properties'] = jsonData
  outGeoJson['type']= "Feature"
  outGeoJson['geometry']= {"type": "Point", "coordinates":
      [jsonData['lat'], jsonData['lon']]}

  console.log(outGeoJson)
}); 

虽然我认为它可以工作，但在睡了一觉后仔细检查控制台后，我注意到坐标仍然出现未定义，因此如果它显示的是数据在底部，我仍然认为它加载不正确。

我尝试的第二种方法是我喜欢的，因为我只能从 JSON 文件中提取我需要的键，这样我就可以在弹出窗口中使用它，它的结果与上面的方法相同。

$.getJSON("./data/tracking.json", function(jsonData) {
var geojson = {
  type: "FeatureCollection",
  features: [],
};

for (i = 0; i < jsonData.positions.length; i++)



    geojson.features.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [jsonData.positions[i].longitude, jsonData.positions[i].latitude]
        },
        "properties": {
          "report_at": jsonData.positions[i].report_at,
          "lat": jsonData.positions[i].lat,
          "lon": jsonData.positions[i].lon,
          "dir": jsonData.positions[i].dir,
          "first": jsonData.positions[i].first,
          "last": jsonData.positions[i].last
        }
      });

    console.log(geojson)
    });

这就是我迄今为止尝试过的方法以及无数其他方法，这些方法会使这篇文章太长而无法列出。有没有比我正在尝试的方法更好、更新的方法来完成此任务，或者我在上面的代码中忽略了一些对于这种语言来说是新的东西？我真的更喜欢第二种方法，除非有人有更好的建议将 JSON 转换为 GeoJSON，这样我就可以在我的 GeoJSON 层中解析它。

编辑:

这是来自 API 的原始 JSON 响应示例，我尝试将其转换为 GeoJSON

{
  "positions": [
    {
      "report_at": "2015-01-21 21:00:08",
      "lat": "38.9080658",
      "lon": "-77.0030365",
      "elev": "0",
      "dir": "0",
      "gps": "0",
      "callsign": "WX2DX",
      "email": "",
      "phone": "",
      "ham": "WX2DX",
      "ham_show": "0",
      "freq": "",
      "note": "",
      "im": "",
      "twitter": null,
      "web": "",
      "unix": "1421874008",
      "first": "William",
      "last": "Smith",
      "marker": "36181"
    },
    {
      "report_at": "2015-01-21 11:45:12",
      "lat": "39.2716141",
      "lon": "-76.6192093",
      "elev": "0",
      "dir": "0",
      "gps": "0",
      "callsign": "rldovejr",
      "email": null,
      "phone": null,
      "ham": null,
      "ham_show": null,
      "freq": null,
      "note": null,
      "im": null,
      "twitter": null,
      "web": null,
      "unix": "1421840712",
      "first": "Ron",
      "last": "Dove",
      "marker": "13573"
    }
}

Answer 1

• 在您的第一个代码示例中，您尝试从 jsonData['lat'] 和 lon 填充 GeoJSON 坐标，但下面的屏幕截图显示您的 jsonData 变量只有一个 positions 成员，它是一个数组，该数组又包含具有 lat 和 lon 成员的对象。

• 在第二个代码示例中，您这次尝试从 jsonData.positions[i].longitude 和纬度填充坐标。但同样，您的 positions 项没有经度和纬度，而是有经度和纬度。在填充下面的 GeoJSON 属性时，您可以正确引用这些内容。

• 坐标应转换为数字(可以使用parseFloat)

• GeoJSON 坐标顺序应为经度在前，纬度在后。