Leaflet show or hide layers WFS cql_filter

Question

I use the library Leaflet-WFST. So I have both WMS and WFS layers. With WMS, everything is simple there is cql_filter. I am writing a code where cql_filter is applied when clicking on the checkbox, here is the code:

$("#s23").click(function () { if ($("#s23").is(":checked")) { if ( layer.wmsParams.cql_filter != "" && layer.wmsParams.cql_filter.includes("layer_id=23") == false ) { layer.setParams({ cql_filter: layer.wmsParams.cql_filter + " OR layer_id=23", }); } else layer.setParams({ cql_filter: "layer_id=23" }); layer.setOpacity(1); } else if (layer.wmsParams.cql_filter.includes(" OR layer_id=23") == true) { l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=23", ""); layer.setParams({ cql_filter: l_edit }); } else if (layer.wmsParams.cql_filter.includes("layer_id=23 OR ") == true) { l_edit = layer.wmsParams.cql_filter.replace("layer_id=23 OR ", ""); layer.setParams({ cql_filter: l_edit }); } else layer.setParams({ cql_filter: "" }); console.log(layer.wmsParams.cql_filter); }); $("#s29").click(function () { if ($("#s29").is(":checked")) { console.log(layer); if ( layer.wmsParams.cql_filter != "" && layer.wmsParams.cql_filter.includes("layer_id=29") == false ) layer.setParams({ cql_filter: layer.wmsParams.cql_filter + " OR layer_id=29", }); else layer.setParams({ cql_filter: "layer_id=29" }); layer.setOpacity(1); console.log(layer.wmsParams.cql_filter); } else if (layer.wmsParams.cql_filter.includes(" OR layer_id=29") == true) { l_edit = layer.wmsParams.cql_filter.replace(" OR layer_id=29", ""); layer.setParams({ cql_filter: l_edit }); } else if (layer.wmsParams.cql_filter.includes("layer_id=29 OR ") == true) { l_edit = layer.wmsParams.cql_filter.replace("layer_id=29 OR ", ""); layer.setParams({ cql_filter: l_edit }); } else layer.setParams({ cql_filter: "" }); console.log(layer.wmsParams.cql_filter); });

Here, if cql_filter is added when the checkbox is clicked, if it is empty, then cql_filter: 'layer_id=23' is triggered, and if there is something in cql_filter, then cql_filter: layer.wmsParams.cql_filter + ' OR layer_id=23' also if the checkbox was cleared, then this layer_id is removed from cql_filter.

I can use this code:

var layer_23 = new L.Filter.EQ("layer_id", 23); //var OR = new L.Filter.Or(layer.options.filter, layer_23); layer.options.filter = layer_23; layer.loadFeatures(layer_23);

To add a new filter, but I don't know how I can remove or edit it.

The question is, how can the same thing be done?

Store individual filter statements in an array, as let arr = ['layer_id=10', 'layer_id=20'], and leverage Array.prototype.join as in arr.join(' OR '). Add/remove elements from that array as needed, then join() it just before passing it as the CQL filter. — IvanSanchez
– IvanSanchez, Commented Jan 26, 2022 at 14:20
Which WFST Leaflet plugin are you using? This plugin github.com/Flexberry/Leaflet-WFST does not specify filters the way desrcibed above. — TomazicM
– TomazicM, Commented Jan 26, 2022 at 17:07
@IvanSanchez Why did you edit out code where filter was specified in the form L.Filter.EQ('layer_id', 23)? That's the form used by plugin github.com/Flexberry/Leaflet-WFST. — TomazicM
– TomazicM, Commented Jan 26, 2022 at 17:12
I have a working WMS, I have problems with WFS, I wrote the WMS code as an example to do the same as WFS, I can't filter WFS correctly — user199671
– user199671, Commented Jan 27, 2022 at 4:13

TomazicM · Accepted Answer · 2022-01-27 08:54:36Z

If you want to apply new filter to WFS layer created with Leaflet-WFST plugin, you have to use layers .loadFeatures(filter) method, where parameter filter is the new filter. Since plugin WFS layer is extension of Leaflet L.layerGroup layer, previous features must first be cleared with .clearLayer() method.

So if you initially have WFS layer with filter1 like this:

var filter1 = new L.Filter.EQ('landuse', 'reservoir'); var wfs = new L.WFS({ url: 'https://ahocevar.com/geoserver/wfs?service=WF', typeNS: 'osm', typeName: 'water_areas', crs: L.CRS.EPSG4326, geometryField: 'the_geom', filter: filter1, style: { color: 'blue', weight: 2 } }).addTo(map);

then you apply new filter filter2 like this:

var filter2 = L.Filter.Or(filter1, new L.Filter.EQ('waterway', 'riverbank')); wfs.clearLayers(); wfs.loadFeatures(filter2);

Stack Exchange Network

Leaflet show or hide layers WFS cql_filter

1 Answer 1

Hot Network Questions

Leaflet show or hide layers WFS cql_filter

1 Answer 1

Related

Hot Network Questions