Leaflet：在GeoJSON層中使用動態過濾器

我已經得到了這個非常接近，但我努力瞭解如何將多個用戶提交的表單複選框值傳遞給Leaflet geoJSON過濾器函數，並只顯示這些點。Leaflet：在GeoJSON層中使用動態過濾器

我有什麼那麼遠，

$('#map-filters').on("submit", function(e){ 
    e.preventDefault(); 
    map.spin(true,spinOpts); 
    submittedValues = $(this).serializeArray(); 
    var filteredLocations = L.markerClusterGroup({ chunkedLoading: true }), 
     filteredLocationsAjax = new L.GeoJSON.AJAX(Routes.filtered_locations_path({format: 'json'}), { 
      style: style, 
      pointToLayer: pointToLayer, 
      onEachFeature: onEachFeature, 
      filter: function(feature, layer) { 
      if(submittedValues.length <= 1) { 
       return feature.properties[submittedValues[0].value]; 
      } else { 
       How do I return multiple values? 
      } 
      } 
     }); 
    filteredLocationsAjax.on('data:loaded', function() { 
     map.removeLayer(allLocations); 
     filteredLocations.addLayer(filteredLocationsAjax); 
     map.addLayer(filteredLocations); 
     map.spin(false); 
    }); 
    });

而且我以GeoJSON的例子...

{ 
    type: "Feature", 
    geometry: { 
    type: "Point", 
    coordinates: [ 
    "-76.286955", 
    "45.335969" 
    ] 
}, 
    properties: { 
    id: 2, 
    name: "Mississippi River", 
    body_of_water: null, 
    url: "http://0.0.0.0:5000/locations/2", 
    observations_count: 1, 
    ph: true, 
    water_temperature: true, 
    oxygen: true, 
    phosphates_threshold: true, 
    clarity: true, 
    nitrites: true, 
    nitrates: true, 
    issues_count: 3, 
    water_quality: true, 
    algae: true 
    } 
}

如果用戶只提交了一個能正常工作複選框，地圖過濾器正是我想要的。但是，我將如何傳遞多個值呢？

我見過的人建議使用...

return (feature.properties[value] && feature.properties[value])

但我將如何傳遞多個值到這樣一個return語句，因爲用戶可以選擇1個或20複選框。

來源

2016-08-17 olliekav

跨發佈作爲http://gis.stackexchange.com/questions/207327/leaflet-use-dynamic-filters-in-geojson-layer – PolyGeo

如果我理解正確，您應該循環遍歷所有submittedValues數組項並執行測試。

E.g.你可以使用submittedValues.every()來測試每個檢查框的值是true對於給定的feature：

filter: function (feature, layer) { 
    return submittedValues.every(function (element) { 
    return feature.properties[element.value]; 
    }); 
}

當然，你可以做一個經典的for循環如出一轍：

filter: function (feature, layer) { 
    for (var i = 0; i < submittedValues.length; i += 1) { 
    if (!feature.properties[submittedValues[i].value]) { 
     return false; 
    } 
    } 
    return true; 
}

來源

2016-08-17 15:41:31 ghybs

我想我已經看了很久，忽略了這條路線。謝謝！ :) – olliekav

適合每個人...感謝您的反饋！ :-) – ghybs

Leaflet：在GeoJSON層中使用動態過濾器

回答

相關問題