传单-使用选择值过滤GeoJSONs数据

时间:2018-07-11 14:10:36

标签: select leaflet geojson

我有一个带有2个GeoJSON的总线网络:一个用于站点(点),另一个用于它们之间的线。

我有3个选择:第一个选择公交线路并过滤其他两个用于起点站和终点站的站。

我想做的是动态过滤第一个选择的公交线路和最后两个选择的公交车站。

类似这样的事情: 用户在第一个选择上选择L1>“地图”仅显示第1行(geojson,点和线),并隐藏其他显示的线。 用户在选择2上选择桩号x,在选择3上选择桩号y>“地图”仅显示这些桩号及其之间的桩号(geojson,点和线)。

工作站GeoJSON(不完整):

var station ={
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "nom": "JAMAA EL FNA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.991506070410076, 31.624380871588261 ] } },
{ "type": "Feature", "properties": { "id": 1, "nom": "KOUTOUBIA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.993921192850516, 31.62551706188404 ] } },
{ "type": "Feature", "properties": { "id": 2, "nom": "HOTE DE VILLE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.997800602958748, 31.627492814514493 ] } },
{ "type": "Feature", "properties": { "id": 3, "nom": "R.P BERDII", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.003733858117105, 31.630010280990067 ] } },
{ "type": "Feature", "properties": { "id": 4, "nom": "GRAND POSTE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.009040991276375, 31.633004916540266 ] } },
{ "type": "Feature", "properties": { "id": 5, "nom": "CAREE EDEN", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.011327830139466, 31.634311225216251 ] } },....

行GeoJSON(不完整):

var lignemarrakech = {
"type": "FeatureCollection",
"name": "ligne",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.991506070410076, 31.624380871588261 ], [ -7.99177772113954, 31.62455510452893 ], [ -7.992132146977649, 31.624680377597475 ], [ -7.992359514496435, 31.624737319845583 ], [ -7.992653754814866, 31.624862592668791 ], [ -7.993295733691442, 31.625147303003317 ], [ -7.993583286729908, 31.625306740410121 ], [ -7.993921192850516, 31.62551706188404 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.993929771507931, 31.625520494421043 ], [ -7.993921192850516, 31.62551706188404 ], [ -7.994251765813826, 31.625734485234361 ], [ -7.994613027718003, 31.625968537122866 ], [ -7.994699416434219, 31.626022034614714 ], [ -7.995311990967388, 31.626396516196305 ], [ -7.995618278233972, 31.626550320694935 ], [ -7.995971686618494, 31.626730873477591 ], [ -7.99655284707304, 31.627018419778416 ], [ -7.997188982165176, 31.627279216817595 ], [ -7.997597365187289, 31.627433019856959 ], [ -7.997800602958748, 31.627492814514493 ] ] } },
{ "type": "Feature", "properties": { "id": 2, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.997800602958748, 31.627492814514493 ], [ -7.998131404523898, 31.627586822642048 ], [ -7.998704711458787, 31.62774731223368 ], [ -7.999246604315053, 31.627847618087841 ], [ -7.999898446446502, 31.627981359058502 ], [ -8.000487460420704, 31.628188657183067 ], [ -8.001194277189745, 31.628529695028082 ], [ -8.001987482675004, 31.628984410209988 ], [ -8.00258435016886, 31.629345505977 ], [ -8.002796395199573, 31.629499305600273 ], [ -8.002835662797853, 31.629606296492579 ], [ -8.002859223356822, 31.629659791892589 ], [ -8.002906344474757, 31.629686539581062 ], [ -8.002984879671317, 31.629726661099347 ], [ -8.00307912190719, 31.629733348017368 ], [ -8.003181217662718, 31.629726661099347 ], [ -8.003401116213087, 31.629820277908031 ], [ -8.003733858117105, 31.630010280990067 ] ] } },...

这是我第一次选择时可以做的:

                $('#selectLine').on('change', function() {
                  console.log("chosen_line= " + this.value);
                  chosen_line = this.value;
                  filterLines();

                    if (chosen_line= 'L1'){
                    L.geoJSON(lignemarrakech, {
                    filter: function(feature, layer) {
                    return feature.properties.ligne='L1';
                    }
                    }).addTo(mymap);
                    }
                    else{
                      }
                });

除了它没有被概括之外,它并没有按预期工作(选择L1时仅显示L1),它只是将所有行再次显示在顶部。

1 个答案:

答案 0 :(得分:0)

if (chosen_line= 'L1')

应该是

if (chosen_line == 'L1')