2017-01-30 207 views
0

我是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}); 

下划线让我的对象......

有什么建议?

回答

0

你所面临的问题是,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] 

这种比较会返回假。

+0

是的,我想知道这是否可能是问题,但我不能改变de json谁是巨大的, 因此,循环检查项目是一个接一个的解决方案? – vmazet

+0

没有看到这个:http:// stackoverflow。com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript TL; DR循环遍历所有的“坐标”元素并检查对象的indexOf试图找到 – otorrillas

+0

感谢您的帮助! – vmazet

0

据我了解,您正在寻找包含坐标[2.4055, 48.8245]的JSON中的“特征”对象。 你需要做的几个步骤来搜索元素:通过features财产

  1. 循环。
  2. geometry.coordinates数组中找到你的坐标。

这里的问题可能是坐标数组可能是嵌套的,因为它是一个MultiPolygon对象。这可能是一个级深:

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

...或两个以上的水平低沉,像在您的示例:

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

在这种情况下,你需要使用递归做搜索。 下面是如何使用lodashunderscore(我使用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是包含要查找的坐标的“特征”对象。