Question

我正在试图弄清楚如何在Leaflet中创建一起交互的过滤器，这意味着过滤器的行为取决于哪些其他过滤器被激活。

我用一个例子解释自己。我想在地图上显示餐馆，并添加依赖于几个餐馆属性的过滤器作为类型/价格/等级/ ....最后，我想要实现的是当用户点击过滤器“汉堡类型”时，当用户激活“汉堡类型”过滤器和“低于10美元”时，所有汉堡餐厅都会显示在地图上。价格“过滤器，然后显示10美元以下的所有汉堡餐厅，当用户删除”汉堡类型“过滤器并保持”低于10美元的价格“过滤器，那么所有价格低于10美元的餐馆必须显示

这是我正在使用的listRestaurants.json数据的简短列表：

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

因此，当激活“汉堡型”过滤器时，必须在地图上显示两个汉堡餐厅“231 East Street”和“HAND”; 当激活“汉堡类型”和“低于10美元的价格”过滤器时，只需在地图上显示汉堡餐厅“231 East Street”; 当只有“低于10美元的价格”过滤器被激活时，汉堡餐厅“231 East Street”和意大利餐厅“La Piazzetta”必须显示在地图上。

我已经阅读了关于图层控件http://leafletjs.com/examples/layers-control.html的宣传单教程，所以我知道如何根据一个属性创建过滤器，例如餐馆的类型。这是我的代码：

<!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: '&copy; <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>

但是我不知道如何创建新的过滤器，例如“Price”过滤器，它们会与我已经拥有的“Type”过滤器进行交互。

希望我的问题很明确。举例非常感谢。 THX

Answer 1

你检查过这个puglin吗？ https://github.com/perliedman/leaflet-underneath

演示： http://dev.cartocite.fr/CultureNantes/

或

https://github.com/utahemre/Leaflet.GeoJSONAutocomplete

演示： https://utahemre.github.io/geojsontest.html

在Leaflet中一起交互的过滤器

1 个答案: