Как сгруппировать все различные запросы L.geoJSON в одну группу L.control layerGroup? Я могу заставить его работать, если элемент управления показывает каждый запрошенный L.geoJSON, но когда я пытаюсь сгруппировать их, он терпит неудачу, и при переключении он ничего не отображает. Когда я добавляю pointGroup = L.layerGroup ... и CustomLayer.addOverlay ... в pointCoordinates.push (geoJsonLayer), он отображает слои, но каждый из них можно переключать.
jQuery.ajax({
type: "GET",
dataType: "json",
url: "https://api.weather.gov/alerts?active=1&event=Red%20Flag%20Warning",
error: function (err) { console.info(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.info(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.
Убедитесь, что вы понимаете Как мне вернуть ответ от асинхронного вызова?
В вашем случае, когда вы назначаете своему pointGroup
группу слоев из вашего массива pointCoordinates
, последний по-прежнему пуст, т.е. ни один из ваших запросов AJAX не успел завершить и что-либо вставить в него.
По умолчанию JavaScript не является реактивным, поэтому, когда ваши запросы AJAX в конечном итоге завершаются, они что-то помещают в pointCoordinates
, но это не обновляет pointGroup
.
Однако очень простым решением было бы заранее создать pointGroup
во внешней области как группу слоев и добавить группы слоев GeoJSON, которые вы создаете в обратном вызове запросов AJAX, непосредственно в этот 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.info(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.info(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: '© <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/[email protected]/dist/leaflet.css" integrity = "sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ= = " crossorigin = "" />
<script src = "https://unpkg.com/[email protected]/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>
Это идеально и работает именно так, как должно. Спасибо за подробности.