リーフレットに相互作用するフィルタを作成する方法を理解しようとしています。つまり、フィルタの動作は、どの他のフィルタがアクティブになっているかによって決まります。リーフレットで相互作用するフィルタ
例を使って説明します。私は地図上にレストランを表示し、いくつかのレストランの属性をタイプ/価格/等級/ ...に依存するフィルターを追加したい。最後に、私が達成したいのは、ユーザーが "Burger type"フィルターをクリックした後、ユーザーが "Burger type"フィルターをアクティブにしたときにすべてのバーガーレストランがマップに表示され、 "10ドル未満10ドル未満のすべてのバーガーレストランが表示され、ユーザーが「バーガータイプ」フィルターを削除して「10ドル未満」フィルターを維持すると、10ドル未満のレストランがすべて表示される必要があります。
allRestaurants = [
{
"Type": "Burger",
"Name": "231 East Street",
"URL": "http://www.231-east.fr/",
"Grade": 4,
"Price": 7,
"lat": 48.8753906,
"lng": 2.323661500000071
},
{
"Type": "Burger",
"Name": "HAND",
"URL": "https://www.tripadvisor.fr/Restaurant_Review-g187147-d2514552-Reviews-H_A_N_D-Paris_Ile_de_France.html",
"Grade": 2,
"Price": 12,
"lat": 48.86592889999999,
"lng": 2.3363045999999486
},
{
"Type": "Italian",
"Name": "La Piazzetta",
"URL": "https://www.facebook.com/La-Piazzetta-892439337443373/",
"Grade": 7,
"Price": 8,
"lat": 48.8672245,
"lng": 2.3442474999999376
},、「バーガータイプ」フィルタが活性化されると、2つのハンバーガーレストラン」：
これは私が使用している私のlistRestaurants.jsonデータの短いリストです地図上に「231 East Street」と「HAND」が表示されている必要があります。 "バーガータイプ"と "10ドル以下の価格"のフィルタが有効になっている場合は、バーガーレストラン "231 East Street"のみ地図に表示する必要があります。 "below 10 $ price"フィルタのみが有効になっている場合は、ハンバーガーレストラン "231 East Street"とイタリアンレストラン "La Piazzetta"を地図に表示する必要があります。
私はレイヤーコントロールhttp://leafletjs.com/examples/layers-control.htmlのリーフレットチュートリアルを読んでいます。そのため、レストランのタイプなど、1つの属性に基づいてフィルタを作成する方法を知っています。ここに私のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>Restaurants filters</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 800px;"></div>
<script type='text/javascript' src='listRestaurants.json'></script>
<script>
// map
var map = L.map('map', {
center: [48.87, 2.33],
minZoom: 2,
zoom: 15
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
// Type groups creation
var burger = []
var italian = []
for (var i=0; i < allRestaurants.length; ++i)
{
if (allRestaurants[i].Type && allRestaurants[i].Type=="Burger") {
var a = new L.marker([allRestaurants[i].lat, allRestaurants[i].lng]);
burger.push(a)
}
if (allRestaurants[i].Type && allRestaurants[i].Type=="Italian") {
var a = L.marker([allRestaurants[i].lat, allRestaurants[i].lng]);
italian.push(a)
}
}
// Filters creation
var Burger = L.layerGroup(burger);
var Italian = L.layerGroup(italian);
var overlayMaps = {
"Burger": Burger,
"Italian": Italian
};
L.control.layers(null,overlayMaps).addTo(map);
</script>
</body>
</html>私は、そのような私が既に持っているてきた「タイプ」フィルタと対話する「価格」フィルタなどの新しいフィルタを作成する方法を見当もつかないが。
私の質問は明らかです。例は非常に高く評価されるだろう。 Thx