jquery - MapBox/Leaflet L.geoJSON 分组叠加

Question

如何将所有不同的 L.geoJSON 查询分组到单个 L.control layerGroup 下？如果控件显示每个查询的 L.geoJSON，我就可以让它工作，但是当我尝试对它们进行分组时，它会失败，并且当您切换时，它不会显示任何内容。当我在 pointCoordinates.push(geoJsonLayer) 下添加 pointGroup = L.layerGroup... 和 CustomLayer.addOverlay... 时，它会显示图层，但每个图层都是可切换的。

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) {
        var pointCoordinates = [];
        var pointGroup;
        jQuery(data.features).each(function(index, el) {

            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) {
                        var geoJsonLayer = L.geoJson(results, {
                            style: function (feature) {
                                return {color: '#ed1a39', weight: '1'};
                            }
                        });
                        pointCoordinates.push(geoJsonLayer);
                    }
                })
            }
        });
        pointGroup = L.layerGroup(pointCoordinates).addTo(map);
        CustomLayer.addOverlay(pointGroup, "Red Flag Warning(s)");
        jQuery("#red-flag-events").html(data.features.length);
    }
})

map JavaScript:

jQuery(document).ready(function($) {
    var point = [];
    var pointGroup;
    L.mapbox.accessToken = 'pk.eyJ1IjoidGhlcHJlcGFyZWRsaWZlIiwiYSI6ImNqZzh3ZWptOTI3ZWozM2xvcjY1YzFtNHUifQ.UchKM7tZByT6mZTxqMlaSQ';
    map = L.mapbox.map('map', 'mapbox.light')
        .setView([40, -100], 4)
        .addControl(L.mapbox.geocoderControl('mapbox.places', {
                keepOpen: false
    }));
    var overlays = {

    };
    CustomLayer = L.control.layers(null, overlays, { collapsed: false }).addTo(map);
    fnWildlandFires();
});

不幸的是，当我将它们分组到 pointGroup 下并尝试将其作为 L.layerGroup 传递时，没有传递任何数据。

Answer 1

确保您了解 How do I return the response from an asynchronous call?

在您的情况下，当您从 pointCooperatives 数组中为 pointGroup 分配一个图层组时，后者仍然为空，即您的 AJAX 请求都没有时间完成并将任何东西插入其中。

默认情况下，JavaScript 不是响应式的，因此当您的 AJAX 请求最终完成时，它们确实会将某些内容推送到 pointCooperatives 中，但这不会更新 pointGroup。

然而，一个非常简单的解决方案是预先在外部范围中构建您的 pointGroup 作为图层组，并将您在 AJAX 请求回调中构建的 GeoJSON 图层组直接添加到该 pointGroup，而不是使用中间的普通数组。

当您将它们添加到图层组时，Leaflet 也会相应地更新 map 。

var map = L.map('map').setView([38, -100], 3);

//var point = [];
var pointGroup = L.layerGroup().addTo(map); // Build the Layer Group in outer scope and beforehand.
var overlays = {
  "Red Flag Warning(s)": pointGroup
};

CustomLayer = L.control.layers(null, overlays, {
  collapsed: false
}).addTo(map);

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) {
    //var pointCoordinates = [];
    //var pointGroup;
    jQuery(data.features).each(function(index, el) {

      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) {
            var geoJsonLayer = L.geoJson(results, {
              style: function(feature) {
                return {
                  color: '#ed1a39',
                  weight: '1'
                };
              }
            }).addTo(pointGroup); // Add directly to the Layer Group.
            //pointCoordinates.push(geoJsonLayer);
          }
        })
      }
    });
    //pointGroup = L.layerGroup(pointCoordinates).addTo(map);
    //CustomLayer.addOverlay(pointGroup, "Red Flag Warning(s)");
  }
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet-src.js" integrity="sha512-GosS1/T5Q7ZMS2cvsPm9klzqijS+dUz8zgSLnyP1iMRu6q360mvgZ4d1DmMRP2TDEEyCT6C16aB7Vj1yhGT1LA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id="map"></div>