1

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>
5

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.