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的控制台中给我一个错误。

试图对该解决方案进行数小时的故障排除，但效果也很差。这是我正在使用的测试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提到，您必须实际加载数据，而不是将路径作为字符串给出。

如何将JSON转换为GeoJSON

2 个答案: