Question

我无法弄清楚使用传单对外部数据进行分组。我有一个带有我的标记的CSV，并在我的地图上放置了杂食的标记。

如何对标记进行分组？

例如：我有4个标记，它们在csv中指定了“类型”。假设这种类型被称为“freibad”。我怎么能用“freibad”类型对所有标记进行分组，并将它们放在一个名为“freibad”的图层组中，以便能够使用图层控件过滤它们？

//MARKERCLUSTER
    //VARS II
    var freibad=[];
    function eachLayer(marker) {
        var ltg = marker.toGeoJSON();
        if(ltg.properties.type != ""){
                marker.setIcon(L.icon({iconUrl:'/icons/'+ltg.properties.type+'.png'}));
        }
        if(ltg.properties.img != ""){
            marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
            ltg.properties.description + '<br> <img src="/icons/' + ltg.properties.img +'">')
        } else {
            marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
            ltg.properties.description)
        }
    }

    var points = omnivore.csv('/csv/POI.csv', {delimiter:'|'})
    .on('ready', function() {
        var markers = L.markerClusterGroup({
            showCoverageOnHover: false,
            maxClusterRadius: 50
        });
        markers.addLayer(points);
        map.addLayer(markers);
        points.eachLayer(eachLayer);
    });  

//LAYERGROUPS
    var ebenengruppen = {
        "<strong>Wanderrouten</strong>": {
            "Wanderroute 1": wroute1,
            "Wanderroute 2": wroute2,
            "Wanderroute 3": wroute3,
            "Freibad": freibad
        }
    };

//TILEMAPS
    var basemaps = {
        "Standard": standardTiles
    }
    var layerControlMobile = L.control.groupedLayers(basemaps, ebenengruppen, {collapsed:true}),
        layerControl       = L.control.groupedLayers(basemaps, ebenengruppen);
    if(mobileDevices){
        map.addControl(layerControlMobile);
    }else{
        map.addControl(layerControl);
    }

Answer 1

我刚想出如何解决我的问题。

这就是我所做的：我为我需要的每个条目创建了图层组，并在CSV文件中创建了一个与图层组同名的行。通过if语句检查，图层将添加到他们所属的组中。但是，如果只有少数几个小组，这不是我认为最好的解决方案，只是值得的。

//MARKERCLUSTER
//LAYERGROUPS
        var freibad=new L.LayerGroup();
        var badestelle=new L.LayerGroup();
        var kanueinstieg=new L.LayerGroup();
        var kanuvermietung=new L.LayerGroup();
        var kanuvermietung=new L.LayerGroup();
        var reparatur=new L.LayerGroup();
        var radverleih=new L.LayerGroup();
//MARKERS
        function eachLayer(marker) {
            var ltg = marker.toGeoJSON();
            //LAYERGROUPING
            if( ltg.properties.type == "freibad"){
            freibad.addLayer(marker);
            }
            if( ltg.properties.type == "badestelle"){
            badestelle.addLayer(marker);
            }
            if( ltg.properties.type == "kanueinstieg"){
            kanueinstieg.addLayer(marker);
            }
            if( ltg.properties.type == "kanuvermietung"){
            kanuvermietung.addLayer(marker);
            }
            if( ltg.properties.type == "reparatur"){
            reparatur.addLayer(marker);
            }
            if( ltg.properties.type == "radverleih"){
            radverleih.addLayer(marker);
            }
            // END LAYERGROUPING
            if(ltg.properties.type != ""){
                    marker.setIcon(L.icon({iconUrl:'/icons/'+ltg.properties.type+'.svg'}));
            }
            if(ltg.properties.img != ""){
                marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
                ltg.properties.description + '<br> <img src="/icons/' + ltg.properties.img +'">')
            } else {
                marker.bindPopup('<strong>' + ltg.properties.name + '</strong>' + '<br>' +
                ltg.properties.description)
                }
        }

Leaflet Omnivore分别来自CSV的标记

1 个答案: