MapBox/Leaflet L.geoJSON 分组叠加

Question

如何将所有不同的 L.geoJSON 查询分组到一个 L.control 图层组中？如果控件显示每个查询的 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);
    }
})

地图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?

在你的例子中，当你从你的 pointCoordinates 数组中分配你的 pointGroup 层组时，后者仍然是空的，即你的 AJAX 请求的 none有时间完成并将任何内容推入其中。

默认情况下 JavaScript 不是响应式的，因此当您的 AJAX 请求最终完成时，它们会向 pointCoordinates 推送一些内容，但不会更新 pointGroup。

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

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

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>

MapBox/Leaflet L.geoJSON 分组叠加

MapBox/Leaflet L.geoJSON Grouped Overlay

jquery

geojson

leaflet

mapbox