單張CSV單張Omnivore組標記

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) 
       } 
     }