Как преобразовать JSON в GeoJSON

Я очень новичок в изучении javascript, и мои элементарные знания уперлись в стену. Я настроил карту Leaflet, на которой я хочу нанести на нее маркеры на основе divIcon из шнуров из JSON. Благодаря моим бесчисленным исследованиям, пытаясь заставить его работать. Я узнал, почему мой файл 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 не определены.

введите здесь описание изображения

Мои поиски причины, по которой это всплывало undefined, не увенчались успехом. Моя теория здесь, возможно, потому, что 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 в любом случае. Без остального я могу обойтись. Являются ли приведенные выше примеры хорошим или правильным способом преобразования? Если нет, то есть ли у кого-нибудь лучшее предложение, чем то, что я пробовал, что я мог упустить или упустить из виду, что является довольно хорошей возможностью из-за того, что я очень зеленый для этого языка? Заранее спасибо!

EDIT: Поскольку это было доведено до моего сведения, я не загружаю файл 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. Я оставлю это как есть, если не будет лучшего решения.


person DFW Storm Force    schedule 28.04.2019    source источник
comment
Обратите внимание, что вы устанавливаете переменную jsonData только в строку пути. Вы никогда не показываете какой-либо код, фактически загружающий данные (например, из этого файла). Просто установка некоторой переменной на какой-то путь не загружает ее волшебным образом. Вы можете увидеть это, когда вы устанавливаете свойство properties для своей переменной jsonData, а в журнале консоли properties отображается как эта строка пути... поэтому jsonData не содержит ваших данных, а просто какую-то строку. Убедитесь, что вы загружаете/присваиваете данные своей переменной   -  person Patrick Evans    schedule 28.04.2019
comment
Я разместил var jsonData в качестве ссылки, чтобы вы знали, что это за переменная, как указано в двух примерах кода, чтобы показать, что она загружается. Я вижу, что вы говорите, и это имеет смысл. Основываясь на некоторых вопросах, с которыми я столкнулся, и в учебных пособиях, именно так они загружали файл данных. Я немного смущен, потому что, если он не загружал данные, то почему он показывает массив из двух записей, а именно, сколько записей находится в этом файле JSON?   -  person DFW Storm Force    schedule 28.04.2019


Ответы (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).
   */
});
person andris.vilde    schedule 28.04.2019
comment
Это работает отлично, и я пытался это сделать, поскольку у меня было направление, в котором я мог двигаться из предыдущих предложений, так как я знал, что оно не загружается. Я только что добавил это в свое редактирование в ОП до того, как увидел решение, но оно работает, - person DFW Storm Force; 28.04.2019

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

попробуйте заменить это следующей строкой.

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

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

как упомянул @PatrickEvans, вам нужно фактически загружать данные, а не указывать путь в виде строки.

person Manish Gowardipe    schedule 28.04.2019
comment
Использование метода var jsonData = require("./data/tracking.json"); возвращает эту ошибку в консоль, Uncaught ReferenceError: require is not defined. Второй метод import jsonData from "./data/tracking.json"; возвращает ошибку Unexpected identifier, но как при использовании этого метода определить jsonData? - person DFW Storm Force; 28.04.2019
comment
require — это модуль, предназначенный для работы под node.js и не являющийся клиентским javascript, доступным в браузере. Так что это не сработает. - person DFW Storm Force; 28.04.2019