如何将JSON转换为GeoJSON

Question

我对javascript的学习非常陌生，而我的基础知识也碰壁了。 我已经设置了一个Leaflet映射，希望从JSON的电线上绘制基于divIcon的标记。 通过我无数的尝试使其工作的研究。 我了解了为什么即使我在控制台中确认正在读取JSON文件也无法正常工作的原因。 我了解到Leaflet希望将其用于GeoJSON。 所以我花了几个小时研究如何转换它。 我的大部分发现已经过时，不再起作用或不适用于我。 这是我通过严格的研究所做的尝试。

首先，我为测试JSON文件的路径设置了一个变量，如下所示。

var jsonData = "./data/tracking.json";

在尝试将JSON转换为GeoJSON时，我尝试了此操作。

var outGeoJson = {}
outGeoJson['properties'] = jsonData
outGeoJson['type']= "Feature"
outGeoJson['geometry']= {"type": "Point", "coordinates":
    [jsonData['lat'], jsonData['lon']]}

console.log(outGeoJson)

检查控制台，发现来自JSON文件的数组中的坐标未定义。

我对出现这种情况的原因的搜索不明确。 我在这里的理论可能是因为JSON在数组之前具有关键位置，而事实是数组。 我继续寻找可能解决此问题的有效解决方案。 接下来，我尝试了此解决方案。

var geojson = {
  type: "FeatureCollection",
  features: [],
};

for (i = 0; i < jsonData.positions.length; i++) {
  if (window.CP.shouldStopExecution(1)) {
    break;
  }
  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
    }
  });
}

window.CP.exitedLoop(1);

console.log(geojson)

此解决方案在Uncaught TypeError: Cannot read property 'length' of undefined控制台中给我一个错误Uncaught TypeError: Cannot read property 'length' of undefined 。

尝试对该解决方案进行数小时的故障排除，但效果也很差。 这是我正在使用的测试JSON文件的示例。

{
  "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，lat，lon，dir，first，last。 剩下的我无能为力。 我是否尝试过将上述示例转换为好方法？ 如果不是，那么有没有人比我一直在尝试的更好的建议，就是我可能会想念或遗忘，由于这种语言非常绿色，这很有可能吗？ 提前致谢！

编辑：由于已经引起了我的注意，我没有加载JSON文件，这是我已经完成的加载工作，因为建议不适用于它们，因为它们适用于node.js，而不是本机javascript的一部分。

    $.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)
});

这确实加载了在控制台中显示的文件，并已转换为GeoJSON。 除非有更好的解决方案，否则我将保持现状。

Answer 1

如果您确实在项目中添加了jQuery，那么您几乎可以做到了：

$.getJSON("./data/tracking.json", function(jsonData) {
    /* 
    Here the anonymous function is called when the file has been downloaded.
    Only then you can be sure that the JSON data is present and you can work with it's data.
    You have to keep in mind if you are getting the file synchronously or asynchronously (default).
   */
});

Answer 2

var jsonData = "./data/tracking.json";

尝试用下一行替换它。

var jsonData = require("./data/tracking.json"); 要么

import jsonData from "./data/tracking.json"; #es6 style

正如@PatrickEvans提到的，您必须实际加载数据，而不是将路径作为字符串给出。