Reactjs從（地理）json獲取座標

我是ReactJS的初學者，我使用反應傳單進行地圖渲染，在這張地圖上，我在座標點上放了一些標記。Reactjs從（地理）json獲取座標

短篇小說，我試圖從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});

下劃線讓我的對象......

有什麼建議？

來源

2017-01-30 vmazet

你所面臨的問題是，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]

這種比較會返回假。

來源

2017-01-30 11:42:42 otorrillas

是的，我想知道這是否可能是問題，但我不能改變de json誰是巨大的，因此，循環檢查項目是一個接一個的解決方案？ – vmazet

沒有看到這個：http：// stackoverflow。com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript TL; DR循環遍歷所有的「座標」元素並檢查對象的indexOf試圖找到 – otorrillas

感謝您的幫助！ – vmazet

據我瞭解，您正在尋找包含座標[2.4055, 48.8245]的JSON中的「特徵」對象。你需要做的幾個步驟來搜索元素：通過features財產

循環。
在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是包含要查找的座標的「特徵」對象。

來源

2017-01-30 20:47:37 ischenkodv

Reactjs從（地理）json獲取座標

回答

相關問題