l oop через буклет l.featuregroup или l.geo json, чтобы показать / скрыть слой

Question

Сводка приложения ...

У меня есть ползунок, связанный с индексом от 0 до 11. 0 - это слой 0, а 11 - это слой 11. Только один слой должен быть видимым. Если ползунок находится в точке 0, то будет виден только индексный слой 0. когда я перемещаю ползунок в точку 1, точка 0 будет «скрываться», а точка 1 будет «показывать». Я думаю, что моя проблема заключается в недостаточном понимании geo json или группы объектов и того, как они хранят слои, а затем «показывают» или скрывают эти слои.

Код приложения

       wintGroupLayer = new L.FeatureGroup().addTo(getMap());

       var init = function () {
            //get file names
            $.ajax(
                {
                    url: "@Url.Action("GetWinterData", "Home")",
                    type: "GET",
                    dataType: "json"
                }).done(function (winterFileList) {

                    $.each(winterFileList, function (i, item) {
                        $.ajax(
                            {
                                url: item,
                                type: "GET",
                                dataType: "json"
                            }).done(function (data) {

                                wintGroupLayer.addLayer(createGeoJsonLayer(
                                {
                                    data: data,
                                    style: function (feature) {
                                        return {
                                            color: feature.properties.strokeColor,
                                        }
                                    },
                                    pane: "winterPane",
                                    //filter: function (feature) {
                                    //    (
                                    //        feature.properties.Identifier === wintFilter.advisory ||
                                    //        feature.properties.Identifier === wintFilter.warn ||
                                    //        feature.properties.Identifier === wintFilter.watch
                                    //    )
                                    //},
                                    onEachFeature: function (feature, layer) {
                                        //Make sure to add the id field to the layer*************************************
                                        //needed to show/hide the layers
                                        layer.id = feature.properties.Identifier;
                                        //create a layerName for ease of filtering
                                        feature.properties.layerName = i;
                                        layer.bindPopup(popUp(feature), { 'className': 'customMapInfobox' });
                                    },
                                    interactive: true

                                }));

                                //if (!isAnyActive()) {
                                //    wintGroupLayer.removeFrom(getMap());
                                //}
                            }).fail(function (err) { console.log('getopcoFileErr: ', err); })
                    })
                }).fail(function (err) { console.log('createOpCoErr: ', err); })
        };

function createGeoJsonLayer(model) {
var baseModel = {
    data: {},
    baseStyle: function (feature) {
        return {
            color: feature.properties.strokeColor,
            fillOpacity: feature.properties.fillOpacity
        }
    },
    newStyles: function (feature) { return {} },
    //filter: function (feature) { },
    onEachFeature: function (feature, layer) { },
    pointToLayer: function (feature, latlon) { },
    interactive: true
}

Object.assign(baseModel, model);
var layer = L.geoJson(baseModel.data, {
    style: function (feature) {
        return Object.assign(baseModel.baseStyle(feature), baseModel.newStyles(feature));
    },
    pane: baseModel.pane,
    //filter: baseModel.filter,
    onEachFeature: baseModel.onEachFeature,
    pointToLayer: baseModel.pointToLayer,
    interactive: baseModel.interactive
});

return layer;
}

winterFileList - это список из 12 URL-адресов, которые указывают на 12 отдельных геоджонов (см. Пример ниже). Приложение будет go через каждый URL, извлекать данные из файла и создавать слой geo json для этого файла.

wintGroupLayer - это L.FeatureGroup

feature.properties.layerName = я; Это добавит новое свойство к каждой функции, которое будет равно 0, 1, 2 ..., так как функция .each проходит через файлы. Надеюсь, это то, что я могу использовать для захвата каждого слоя.

каждый проходной l oop создаст новый слой

Пример гео Json

{
  "name": "winterWarnings_0",
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [
          **removed for brevity**
        ],
        "type": "Polygon"
      },
      "properties": {
        "StartDateTime": "3/20/2020 4:15:00 AM",
        "EndDateTime": "3/20/2020 2:00:00 PM",
        "strokeColor": "#ffffff",
        "strokeThickness": 2,
        "InfoboxTitle": "Winter Weather Warning",
        "Fips": "220040",
        "State": "MI",
        "Center": "MQT",
        "City": "Baraga",
        "Identifier": "WRN"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [ ...

У меня нет примера кода того, что я пробовал, поскольку я пробовал около дюжины различных способов получить доступ к этим слоям и «показать» или «скрыть» их. Заранее спасибо.