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});
下划线让我的对象......
有什么建议?
答
你所面临的问题是,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]
这种比较会返回假。
答
据我了解,您正在寻找包含坐标[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
是包含要查找的坐标的“特征”对象。
是的,我想知道这是否可能是问题,但我不能改变de json谁是巨大的, 因此,循环检查项目是一个接一个的解决方案? – vmazet
没有看到这个:http:// *。com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript TL; DR循环遍历所有的“坐标”元素并检查对象的indexOf试图找到 – otorrillas
感谢您的帮助! – vmazet