Control de capas para varias capas en un mismo objeto

Question

Estoy leyendo un objeto JSON grande que tiene varias capas dentro del mismo objeto. La estructura es así:

{
    "type": "FeatureCollection",
    "name": "AllProgrammedProjects",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "features": [{
            "type": "Feature",
            "properties": {
                "ID": 2,
                "ProjectID": "0012506X",
                "ProjectNam": "I-26 over SC 302",
                "ProjectDes": "I-26 over SC 302 Bridge Replacement and Interchange Upgrade",
                "BudgetCate": "Operational & Safety",
                "ProjectTyp": "Interchange Improvement",
                "ProjectAct": "Design\/Development",
                "LocationLi": "Lexington",
                "Route_Leng": 1.4,
                "ROW_Year": 2003,
                "CON_Year": 2020,
                "DateOfCurr": "Currently Undetermined",
                "SCDOT_Cont": "Jae Mattox",
                "SCDOT_Con1": "MattoxJH@scdot.org",
                "LocationTy": "Road",
                "RouteLRS": "32010002600E",
                "SegmentBeg": 112.5,
                "SegmentEnd": 113.5,
                "RouteDescr": "I-26",
                "MPO": "COATS",
                "Status1": null,
                "Contact_Nu": "(803) 737-1805",
                "COUNTY_NAM": "LEXINGTON",
                "COG": "CENTRAL MIDLA",
                "PriorityCo": "BR-INTNHS"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-85.534770830624609, 32.398104157650017],
                    [-85.534633972042457, 32.39791557487046],
                    [-85.534364899661909, 32.397537624044901],
                    [-85.534207535164825, 32.397302292846959],
                    [-85.534110830421426, 32.397130347856773],
                    [-85.534079221152481, 32.397070467667184],
                    [-85.533991311939118, 32.396903933123156],
                    [-85.53392699651333, 32.396769874052822],
                    [-85.533865093938445, 32.396632037137088],
                    [-85.533611878276488, 32.395955507469395],
                    [-85.533607289864804, 32.395943555374338],
                    [-85.53336872279246, 32.395322120767062],
                    [-85.533246923816222, 32.394986445677233],
                    [-85.533242719705569, 32.394975517690625],
                    [-85.533158934055976, 32.39475772823959],
                    [-85.533017038618539, 32.394388887688457],
                    [-85.532873115249615, 32.394004117977566]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "ID": 3,
                "ProjectID": "0012506X",
                "ProjectNam": "I-26 over SC 302",
                "ProjectDes": "I-26 over SC 302 Bridge Replacement and Interchange Upgrade",
                "BudgetCate": "Operational & Safety",
                "ProjectTyp": "Repaving",
                "ProjectAct": "Design\/Development",
                "LocationLi": "Lexington",
                "Route_Leng": 1.4,
                "ROW_Year": 2003,
                "CON_Year": 2020,
                "DateOfCurr": "Currently Undetermined",
                "SCDOT_Cont": "Jae Mattox",
                "SCDOT_Con1": "MattoxJH@scdot.org",
                "LocationTy": "Road",
                "RouteLRS": "32040030200E",
                "SegmentBeg": 21.6,
                "SegmentEnd": 22.0,
                "RouteDescr": "SC302",
                "MPO": "COATS",
                "Status1": null,
                "Contact_Nu": "(803) 737-1805",
                "COUNTY_NAM": "LEXINGTON",
                "COG": "CENTRAL MIDLA",
                "PriorityCo": "BR-INTNHS"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-85.534229625011235, 32.395303407760039],
                    [-85.534068203756362, 32.395471291395936],
                    [-85.533775827800142, 32.395775271450432],
                    [-85.533585266326938, 32.395971459323647],
                    [-85.53342543040921, 32.396136412477311],
                    [-85.532948771123046, 32.396628334137674],
                    [-85.532915884039099, 32.396662314688776]
                ]
            }
        }
    ]
}

Si quisiera crear un grupo de capas de folletos para cada uno de los ProjectTyp en el objeto, ¿cómo lo haría? Con este ejemplo, serían dos controles, uno para Interchange Improvement y uno para Repaving .

Answer 1

¿Es esto lo que busca? http://www.gistechsolutions.com/leaflet/DEMO/roads/plines.html

Su GeoJSON es de un archivo en la misma carpeta que el archivo HTML. Lo llamé roads.json, busca la variable url en la página, Si estás usando un servicio, pon la url real ahí en lugar del nombre del archivo.

A continuación he creado una capa1 y la he filtrado para "Repavimentación", y una capa2 para la otra.

A continuación, añadirlos en el control de capa.

Mira el ejemplo de trabajo de arriba, haz clic derecho en ver fuente para ver mi código.

var road1 = L.geoJson(null, {  
        color:'black',

        onEachFeature: function (feature, layer) {
            var popupContent = "<p><b>Project Name: </b>" +
            feature.properties.ProjectNam +
            "<br> Project Type: " + feature.properties.ProjectTyp + "</p>" ;

            layer.bindPopup(popupContent);

        },
        filter: function(feature, layer) {   
            return (feature.properties.ProjectTyp == "Repaving" );
        }

    });

    // Add GeoJSON to road layer
    $.getJSON(url, function(data) {
       road1.addData(data);
    });

    //Add road layer to map
    road1.addTo(map);