[GIS] Ol3, dynamic CQL for WFS layer (GeoJSON) from Geoserver

cql-filtergeojsongeoserveropenlayerswfs

My map in Openlayers (Ol3) contains a WFS layer with GeoJSON format from Geoserver. My intention is to use CQL filters that can be applied by the user through comboboxes next to the map. The CQL filter works initially but I cannot get the layer to reload with the modified CQL once the url of the vector source changes. Perhaps this method (modifying the url of the vector source) is not even the correct way of doing it. The idea is almost the same as this tutorial on Geoserver: http://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html#cql-tutorial

After pressing the "Apply"-button in the tutorial, the layer adjusts to the new parameters. The tutorial however uses WMS and the method updateParams() to update the parameters which doesn't work for WFS. My question is: What is the proper method to update parameters on a WFS layer?

Some code:

var municipality = 'Lund';

var vectorSource = new ol.source.Vector({

url:"http://localhost:8081/geoserver/reporter/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=reporter:gtest&CQL_FILTER=name="+"'"+municipality+"'"+"&maxFeatures=50&outputFormat=application%2Fjson",

format: new ol.format.GeoJSON(),

 });

function reload() {
municipality=document.getElementById("municipalityselector").value;
}

<body>...

<select id="municipalityselector" onchange=reload()>
<option value='Hej'>Default</option>
<option value='Lund'>Lund</option>
<option value='Hej'>Hej</option>
</select>

Best Answer

Since this has not been answered. Here is my own solution which is very simple and works well.

The "update" function clears the vector source. The "loader" function, which has been added to the vector source, will then automatically update the features using the url.

var vectorSource = new ol.source.Vector({
    loader: function (extent, resolution, projection) {

    var url = "http://localhost:8081/geoserver/reporter/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=reporter:gtest&CQL_FILTER="+municipalityselector.value+"&maxFeatures=50&outputFormat=application%2Fjson";
    $.ajax(url).then(function (response) {
        var features = geojsonFormat.readFeatures(response, {
            featureProjection: projection
        });
        vectorSource.addFeatures(features);
    });     
    }
});

function update() {
  vectorSource.clear(true);
};

<body>...

<select id="municipalityselector" onchange=update()>
<option value="name='Lund'">Lund</option>
<option value="name='Hej'">Hej</option>
<option value="name='Stockholm'">Stockholm</option>
</select>
Related Question