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

花了几个小时尝试对该解决方案进行故障排除，但也没有成功。这是我正在使用的测试 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

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

尝试用下一行替换它。

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

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

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

Answer 2

如果您的项目中添加了 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).
   */
});

如何将 JSON 转换为 GeoJSON

How to convert JSON to GeoJSON

javascript

json

geojson

leaflet