时间戳

首页 > 解决方案 > MapBox/Leaflet L.geoJSON 分组叠加

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

问题描述

如何将所有不同的 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);
    }
})

地图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 传递时，没有传递任何数据。

在此处输入图像描述

标签： jqueryleafletmapboxgeojson

解决方案

确保您了解如何从异步调用返回响应？

在您的情况下，当您pointGroup从数组中分配图层组时pointCoordinates，后者仍然是空的，即您的 AJAX 请求都没有时间完成并将任何内容推送到其中。

默认情况下，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>

推荐阅读