Reactjs получить координаты из (geo) json

Question

Я новичок в ReactJS, я использую рекламный буклет для рендеринга карты, На этой карте я положил некоторый маркер с точкой координат.

Короткий рассказ, я стараюсь, чтобы получить какой-либо объект из JSON файлов, содержащих значения по площади, и координаты точки для полигона визуализации на карте, это выглядит следующим образом:

{ 
    "type": "FeatureCollection", 
    "crs": { 
    "type": "name", 
    "properties": { 
     "name": "urn:ogc:def:crs:OGC:1.3:CRS84" 
    } 
    }, 
    "features": [ 
    { 
     "type": "Feature", 
     "id": 656, 
     "properties": { 
     "DCOMIRIS": "940180101", 
     "DEPCOM": "94018", 
     "NOM_COM": "Charenton-le-Pont", 
     "IRIS": "0101", 
     "TYP_IRIS": "H", 
     "DEP": "94", 
     "aire": 0.2069, 
     "population": 3974 
     }, 
     "geometry": { 
     "type": "MultiPolygon", 
     "coordinates": [ 
      [ 
      [ 
       [2.4197, 48.8214], 
       [2.4196, 48.8205], 
       [2.4196, 48.8199], 
       [2.4196, 48.819], 
       [2.4196, 48.8181], 
       [2.4196, 48.8172], 
       [2.4196, 48.8169], 
       [2.4183, 48.8167], 
       [2.418, 48.8166], 
       [2.4166, 48.8164], 
       [2.4159, 48.8163], 
       [2.4159, 48.8163], 
       [2.4159, 48.8163], 
       [2.4155, 48.817], 
       [2.4152, 48.8175], 
       [2.4149, 48.8178], 
       [2.4148, 48.8181] 
      ] 
      ] 
     ] 
     } 
    }, 
    { 
     "type": "Feature", 
     "id": 657, 
     "properties": { 
     "DCOMIRIS": "940180109", 
     "DEPCOM": "94018", 
     "NOM_COM": "Charenton-le-Pont", 
     "IRIS": "0109", 
     "TYP_IRIS": "H", 
     "DEP": "94", 
     "aire": 0.4146, 
     "population": 3906 
     }, 
     "geometry": { 
     "type": "MultiPolygon", 
     "coordinates": [ 
      [ 
      [ 
       [2.4055, 48.8245], 
       [2.4053, 48.8244], 
       [2.4042, 48.8235], 
       [2.4032, 48.8226], 
       [2.4024, 48.8219], 
       [2.4014, 48.8211], 
       [2.4013, 48.821], 
       [2.4011, 48.8209], 
       [2.401, 48.8207], 
       [2.4009, 48.8207], 
       [2.4009, 48.8206], 
       [2.4007, 48.8207], 
       [2.3996, 48.8212] 
      ] 
      ] 
     ] 
     } 
    } 

С подчеркиванием я пытаюсь получить некоторый объект со значением координаты, например:

var find = _.findWhere(this.state.data, {coordinates: [2.4055,   48.8245]}); 

, но я не получил ничего, я не знаю, как искать «глубже» в моей JSON. Если я стараюсь:

var find = _.findWhere(this.state.data, {id: 656}); 

Подчеркивание получить меня объект ...

Любые советы?

Answer 1

Проблемы вы столкнулись в том, что метод find, вероятно, сравнивая каждый из json координат объекта, например:

"coordinates": [ 
     [ 
     [ 
      [2.4055, 48.8245], 
      [2.4053, 48.8244], 
      [2.4042, 48.8235], 
      [2.4032, 48.8226], 
      [2.4024, 48.8219], 
      [2.4014, 48.8211], 
      [2.4013, 48.821], 
     ] 
     ] 
] 

С объектом вы предоставляете:

"coordinates": 
    [2.4055, 48.8245] 

И это сравнение доходности ложный.

Answer 2

Насколько я понял, вы ищете объект «функции» внутри JSON, который содержит координаты [2.4055, 48.8245]. Вам нужно сделать несколько шагов для поиска элемента:

1. Loop через features свойства.
2. Найти координату внутри geometry.coordinates массив.

Проблема здесь может заключаться в том, что массив координат может быть вложен, поскольку это объект MultiPolygon. Это может быть один уровень глубокая:

[ [ 1.1, 2.2 ], [ 3.3, 4.4 ] ] 

... или два и более глубоких уровней, как в вашем примере:

[ [ [ 5.1, 6.2 ], [ 7.3, 8.4 ] ] ] 

В этом случае вам необходимо выполнить поиск с помощью рекурсии. Вот как это можно сделать с помощью lodash или underscore (я тестировал с помощью lodash).

// Recursive search function. 
function find(coords, items) { 
    var i = 0, found; 

    for (; i < items.length; i++) { 
    if (_.isArray(items[i])) { 
     if (items[i].length === 2 && _.isNumber(items[i][0]) && _.isNumber(items[i][1]) && _.isEqual(items[i], coords)) { 
     return items[i]; 
     } else { 
     found = find(coords, items[i]); 
     if (found) { 
      return found; 
     } 
     } 
    } 
    } 
} 

// Coordinates you're looking for 
var coords = [2.4055, 48.8245]; 

// Loop through the features and find coordinates. 
var result = _.find(_.get(data, 'features'), function (feature) { 
    return find(coords, _.get(feature, 'geometry.coordinates')); 
}); 

result «свойство» объект, который содержит координаты, что вы ищете.