如何在 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']);