Question

我是ReactJS的初学者，我使用react-leaflet进行地图渲染，在这张地图上，我放了一些带坐标点的标记。

简短的故事，我尝试从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]

此比较返回false。

Answer 2

据我所知，您正在JSON中搜索包含坐标[2.4055, 48.8245]的“功能”对象。您需要执行几个步骤来搜索元素：

遍历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是一个“功能”对象，其中包含您正在寻找的坐标。

Reactjs从（geo）json获取坐标

2 个答案: