Openlayers 3 - WFS not updating on map pan

Question

I was using a CQL Filter to return my points based on a certain type. I then added a BBOX to the filter to limit the results only to the current extent of the map. This was all working correctly. The only issue is if I pan the map it does not reload the WFS call. So if I zoom into a point the wfs filters correctly, if I then pan to an area where I know there is a point there will be nothing there unless I change the zoom level. This will update the WFS.

In my ServerVector loader parameter I call a function updateWFSURL(extent). I use this to build the WFS url based on the filter criteria to be passed to the CQL_FILTER. I currently have no loading strategy, I tried using createTile and bbox but neither gave me the proper result.

Here is the code I am using to add the BBOX to my CQL_FILTER. More filters are added after and this filter is appended to the WFS url.

var coord1 = ol.proj.transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
var coord2 = ol.proj.transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');
var filter = "&CQL_FILTER=BBOX(GEOM, " + coord1 + ", " + coord2 + ", 'EPSG:4326')";

The workaround I found was to capture the map moveend event and call the updateWFSURL(extent) from there. This will update properly on a pan but causes the updateWFSURL to be called twice on zoom since it gets fired from the WFS loader and moveend event.

The solution I am looking for is to either have my WFS update properly on the pan or how to determine the difference between a pan/zoom so I can not call the function in moveend if it was a zoom.

Added more code below. Removed the geoserver url and layer name I am using and stripped out some of CQL Filter that was just filtering on an ID. This wfs is not updating the map on pan without my work around.

//this function gets called on page load
function loadPointAssets() {
    // Source retrieving WFS data in GeoJSON format using JSONP technique
    pointAssetVector = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {
           //this gets called whenever the map zooms
           updateWFSURL(extent);
        },
        projection: 'EPSG:3857'
    });

    //cluster markers adds the markers to the map from the pointAssetVector
    clusterMarkers();
}        

function updateWFSURL(extent) {
    //transform the extent to coordinates can be passed in as lat/long
    var coord1 = ol.proj.transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
    var coord2 = ol.proj.transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');

    var filter = "&CQL_FILTER=BBOX(GEOM, " + coord1 + ", " + coord2 + ", 'EPSG:4326')";

    $.ajax({
        //create the url with the filter
        url:  'http://myGeoserverURL/wfs?' +
                'service=WFS&request=GetFeature&' +
                'version=1.1.0&typename=LayerName&outputFormat=text/javascript&' +
                'format_options=callback:loadFeatures&' +
                'srsname=EPSG:4326' + filter,
        dataType: 'jsonp'
    });
    pointAssetVector.clear(true);
}

// Executed when data is loaded by the $.ajax method.
var loadFeatures = function (response) {
    //clear the features before adding them to the source again
    pointAssetVector.clear();
    pointAssetVector.addFeatures(pointAssetVector.readFeatures(response));
};

Answer 1

You cannot use CQL filter and BBOX together in the same WFS request. If you have a CQL property filter then you need to add the BBOX filter as a CQL filter.

For example, this BBOX filter:

bbox: extent.join(',') + ',EPSG:3857'

Is equivalent to this CQL filter:

cql_filter: "BBOX(geometry," + extent.join(',') + ")"