如何在 json 数据中显示值

Question

想知道是否有人可以帮助我一些 JavaScript。

我有一个 json 文件，它看起来类似于下面的文件，尽管这是原始文件的缩减版本，它要大得多。 我试图从中获取一些坐标，并使用它们来勾勒出谷歌 map 上的特定区域，我设置了一个小提琴来测试：

https://jsfiddle.net/pork1977/up8rnf6d/

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 1,
                "LEVEL1_NAM": "EUROPE"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                24.128105619999872,
                                34.858005329767494
                            ],
                            [
                                24.128505619999856,
                                34.808905329767484
                            ],
                            [
                                24.044605619999857,
                                34.850005329767484
                            ],
                            [
                                24.074605619999858,
                                34.868605329767476
                            ],
                            [
                                20.819105619999874,
                                80.719105329767487
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 2,
                "LEVEL1_NAM": "AFRICA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                32.954405619999847,
                                -26.058594670232509
                            ],
                            [
                                32.895205619999871,
                                -26.040794670232515
                            ],
                            [
                                32.980505619999889,
                                -25.972794670232517
                            ],
                            [
                                32.982705619999848,
                                -25.98359467023252
                            ],
                            [
                                32.954405619999847,
                                -26.058594670232509
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 3,
                "LEVEL1_NAM": "AUSTRALASIA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                169.185405619999841,
                                -52.576994670232516
                            ],
                            [
                                169.028205619999852,
                                -52.559194670232515
                            ],
                            [
                                169.000705619999877,
                                -52.507194670232515
                            ],
                            [
                                169.205205619999873,
                                -52.441394670232512
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 4,
                "LEVEL1_NAM": "ASIA-TROPICAL"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                96.914105619999845,
                                -12.198094670232521
                            ],
                            [
                                96.902405619999882,
                                -12.199994670232513
                            ],
                            [
                                96.914705619999864,
                                -12.151994670232511
                            ],
                            [
                                96.924405619999874,
                                -12.182794670232511
                            ],
                            [
                                96.914105619999845,
                                -12.198094670232521
                            ]
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "LEVEL1_COD": 5,
                "LEVEL1_NAM": "SOUTHERN AMERICA"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                -67.212794380000133,
                                -55.893594670232517
                            ],
                            [
                                -67.246994380000132,
                                -55.894994670232514
                            ],
                            [
                                -67.41389438000013,
                                -55.832194670232518
                            ],
                            [
                                -67.246994380000132,
                                -55.828094670232517
                            ]
                        ]
                    ]
                ]
            }
        }
    ]
}

我正在尝试对此进行过滤。 当我为过滤器中的 LEVEL1_COD 键指定值时，我想要做的是获取“坐标”。

我已经通过运行以下命令来做到这一点，在本例中，它向我显示了 EUROPE 的坐标，因为它的 LEVEL1_COD 值设置为 1。注意：这里的 json 变量使用的是我上面代码片段的完整版本。

var json = JSON.parse($.getJSON({'url': "https://raw.githubusercontent.com/tdwg/wgsrpd/master/geojson/level1.geojson", 'async': false}).responseText);

var coords = json.features.filter(function (el) {
    return (el.properties.LEVEL1_COD == "1");
})[0].geometry.coordinates

console.log(coords);

Console.log 显示：

[ [ [ [ 24.128105619999872, 34.858005329767494 ], [ 24.128505619999856, 34.808905329767484 ], [ 24.044605619999857, 34.850005329767484 ], [ 24.074605619999858, 34.868605329767476 ], [ 20.819105619999874, 80.719105329767487 ] ] ] ]

我想不通的是如何将其从“等于”更改为“包含”类型的过滤器。

例如，如果我有一个 LEVEL1_COD 值的列表，例如 1、2、5，并且我想过滤这些值以便我可以看到每组坐标，那么您将如何 go 这样做？ 我想获得 map 上列出的每个区域的区域。

我确定需要调整的行是：

返回 (el.properties.LEVEL1_COD == "1");

但是在尝试了各种各样的事情之后，我无法让它返回超过一套。 您是否需要遍历每个项目才能执行此操作？ 还是有更聪明的方法？ 速度有点重要，因为我将使用的 json 文件非常大。

谢谢保罗

Answer 1

如果您希望根据提供的输入（多个值，即一个数组）从数据中获取多个匹配元素，则可以使用Array.some 。

下面我模拟了几个例子，希望这是你要找的

 let data = {type:'FeatureCollection',features:[{type:'Feature',properties:{LEVEL1_COD:1,LEVEL1_NAM:'EUROPE',},geometry:{type:'MultiPolygon',coordinates:[[[[24.128105619999872,34.858005329767494],[24.128505619999856,34.808905329767484],[24.044605619999857,34.850005329767484],[24.074605619999858,34.868605329767476],[20.819105619999874,80.719105329767487],],],],},},{type:'Feature',properties:{LEVEL1_COD:2,LEVEL1_NAM:'AFRICA',},geometry:{type:'MultiPolygon',coordinates:[[[[32.954405619999847,-26.058594670232509],[32.895205619999871,-26.040794670232515],[32.980505619999889,-25.972794670232517],[32.982705619999848,-25.98359467023252],[32.954405619999847,-26.058594670232509],],],],},},{type:'Feature',properties:{LEVEL1_COD:3,LEVEL1_NAM:'AUSTRALASIA',},geometry:{type:'MultiPolygon',coordinates:[[[[169.185405619999841,-52.576994670232516],[169.028205619999852,-52.559194670232515],[169.000705619999877,-52.507194670232515],[169.205205619999873,-52.441394670232512],],],],},},{type:'Feature',properties:{LEVEL1_COD:4,LEVEL1_NAM:'ASIA-TROPICAL',},geometry:{type:'MultiPolygon',coordinates:[[[[96.914105619999845,-12.198094670232521],[96.902405619999882,-12.199994670232513],[96.914705619999864,-12.151994670232511],[96.924405619999874,-12.182794670232511],[96.914105619999845,-12.198094670232521],],],],},},{type:'Feature',properties:{LEVEL1_COD:5,LEVEL1_NAM:'SOUTHERN AMERICA',},geometry:{type:'MultiPolygon',coordinates:[[[[-67.212794380000133,-55.893594670232517],[-67.246994380000132,-55.894994670232514],[-67.41389438000013,-55.832194670232518],[-67.246994380000132,-55.828094670232517]]]]}}]}; const getFilteredData = (data, input) => data.features.filter(feature => { return input.some(i => i === feature.properties.LEVEL1_COD); }); let input = [1]; let filterdData = getFilteredData(data, input); console.log(filterdData); input = [1, 2, 5]; filterdData = getFilteredData(data, input); console.log(filterdData); input = [1, 7]; filterdData = getFilteredData(data, input); console.log(filterdData);

 .as-console-wrapper { max-height: 100%;important; }

Answer 2

似乎您正在填充您的地图框。 你可以使用包的过滤器

this.map.setFilter('YOUR_LAYER', ['==', 'LEVEL1_COD', 'YOUR_VALUE']);