javascript - L.geoJSON - 如何使用更多 L.geoJSON 坐标处理多个引用文件？

Question

我已经能够让其中的一部分工作，但是当 properties.affectedZones 有多个条目时，我的 jQuery 失败了。我已经使用 .each 努力显示受到红旗警告的受影响区域，但是当有两个代码解释它有 url1、url2 时，它会失败。我如何分解它以便查询每个特定的受影响区域？

jQuery:

    jQuery.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.weather.gov/alerts?active=1&event=Red%20Flag%20Warning",
    error: function (err) { console.log(err)},
    success: function (data, status, xhr) {
        jQuery(data.features).each(function(index, i) {
            var url = i.properties.affectedZones;
            jQuery.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                error: function (err) { console.log(err)},
                success: function (results, status, xhr) {
                    L.geoJson(results).addTo(map);
                }
            })
        });
        jQuery("#red-flag-events").html(data.features.length);
    }
})

weather.gov JSON:

        "id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3032485-2711522",
        "type": "Feature",
        "geometry": null,
        "properties": {
            "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3032485-2711522",
            "@type": "wx:Alert",
            "id": "NWS-IDP-PROD-3032485-2711522",
            "areaDesc": "Ventura County Mountains / Los Padres National Forest; Los Angeles County Mountains / Angeles National Forest",
            "geocode": {
                "UGC": [
                    "CAZ253",
                    "CAZ254"
                ],
                "SAME": [
                    "006083",
                    "006037",
                    "006111",
                    "006029",
                    "006071"
                ]
            },
            "affectedZones": [
                "https://api.weather.gov/zones/fire/CAZ253",
                "https://api.weather.gov/zones/fire/CAZ254"
            ],
            "references": [
                {
                    "@id": "https://api.weather.gov/alerts/NWS-IDP-PROD-3031483-2711069",
                    "identifier": "NWS-IDP-PROD-3031483-2711069",
                    "sender": "w-nws.webmaster@noaa.gov",
                    "sent": "2018-08-06T10:18:00-07:00"
                }
            ],

上面的代码在只有 1 个 affectedZone 的地方有效，但在有多个时失败。以下是我收到的错误:

jquery.js?ver=1.12.4:1 Uncaught Error: Syntax error, unrecognized expression: {
    "path": "/zones/fire/CAZ253,https:/api.weather.gov/zones/fire/CAZ254",
    "correlationId": "285b0005-1820-41d1-a4a9-473146142f5f",
    "title": "Not Found",
    "type": "https://api.weather.gov/problems/NotFound",
    "status": 404,
    "detail": "'/zones/fire/CAZ253,https:/api.weather.gov/zones/fire/CAZ254' is not a valid resource path",
    "instance": "https://api.weather.gov/requests/285b0005-1820-41d1-a4a9-473146142f5f"
}
    at Function.fa.error (jquery.js?ver=1.12.4:1)
    at fa.tokenize (jquery.js?ver=1.12.4:1)
    at fa.select (jquery.js?ver=1.12.4:1)
    at Function.fa (jquery.js?ver=1.12.4:1)
    at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
    at n.fn.init.find (jquery.js?ver=1.12.4:1)
    at n.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
    at a.fn.init.n.fn.init (jquery.js?ver=1.12.4:1)
    at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
    at n (jquery.js?ver=1.12.4:1)

关于如何拆分这两个网址有什么想法吗？

Answer 1

因为 affectedZones 是一个数组，所以使用 for 循环，如下所示:

jQuery.ajax({
    type     : "GET",
    dataType : "json",
    url      : "https://api.weather.gov/alerts",
    data     : {
        active : 1,
        event  : "Red Flag Warning"
    },
    error: function (err) {
        console.log(err)
    },
    success: function (data, status, xhr) {
        jQuery(data.features).each(function(index, el) {

            // An array of affected zones, e.g.
            // [0] https://api.weather.gov/zones/fire/CAZ253
            // [1] https://api.weather.gov/zones/fire/CAZ254
            // [2] ...
            var zones = el.properties.affectedZones;

            // Iterate through each zone
            for (var i = 0; i < zones.length; i++) {
                jQuery.ajax({
                    type: "GET",
                    dataType: "json",
                    url: zones[i],
                    error: function (err) { console.log(err)},
                    success: function (results, status, xhr) {
                        L.geoJson(results).addTo(map);
                    }
                })
            }
        })

        jQuery("#red-flag-events").html(data.features.length);
    }
})