Openlayers bbox strategy

Question

I have bbox strategy for one source of data. Code looks like this:

bbox: function newBboxFeatureSource(url, typename) {
    return new ol.source.Vector({
        loader: function (extent) {
            let u = `${url}&TYPENAME=${typename}&bbox=${extent.join(",")}`;

            $.ajax(u).then((response) => {
                this.addFeatures(
                    geoJsonFormat.readFeatures(response)
                );
            });
        },
        strategy: ol.loadingstrategy.bbox
    });
},

I works fine but... When I pan/move the map then this loader is calling again and add another features which fit to new box. But there is a lot of duplicates then because some of new features are just the same as old. So I wanted first clear all features using this.clear() before add new features but when I add this command then loader is running all the time and I have "infinitive loop". Do you know why? How can I disable loading new features after calling this.clear()?

Answer 1

To summarize the discussion in the linked question and answer the initial question:

The features sent by the server need an attribute called id, which must be unique and the same for the feature on every request.

{type: "Feature", id: "some-wfs.1234", properties: { "ogc_fid": 2, ...

See this GitHub Issue for the original comment of ahocevar.

In GeoServer this can be achieved if you set an identifier in your layer. I guess there is something similar to set in MapServer.

Answer 2

For me this works:

       function reload() {
         var vectorSource = new ol.source.Vector({
           format: new ol.format.GeoJSON(),
           url: function(extent, resolution, projection) {
             return 'http://xxx/xxx?service=WFS&' +                                                             'version=1.1.0&request=GetFeature&typename=ant_mapy:v_wezel_rfid&' +
             'outputFormat=application/json&srsname=EPSG:3857&' +
             'bbox=' + extent.join(',') + ',EPSG:3857';
         },
strategy: function() {
                return [ [2553624.5, 6988200.5, 2602467.0, 7022520.0] ];
            }
     //ol.loadingstrategy.box
 });

I changed strategy: ol.loadingstrategy.box to static