geoJSON feature stack problem in OL3

Question

I'm using code from geom's answer at Is there an easy way to use Postgis GeoJSON in Openlayers 3 to load PostGIS layers into my OL3 map application.

Each time I pan/zoom far enough to trigger a different map extend, a new PHP call is fired and new data is catched. That's working as intended due to ol.loadingstrategy.bbox

The problem is: Each time I do that, panning performance keeps on dropping drastically. I guess, that's because multiple features are stacked upon each other. This can also be seen as layer's opacity seems to be increased each time I pan/zoom. I'm using latest OpenLayers version 4.2.

ol3Vector = function(options) {

var options = {
    title: options.title,
    visible: false,
    geotable: options.geotable,  // table name in PostGis-database
    fields: options.fields,      // field-names
    where: options.where,        // where-string passed to PostGis
    source: new ol.source.Vector({
        projection: "EPSG:4326",
        attributions: [new ol.Attribution({
            html: options.attribution
        })],
        strategy: ol.loadingstrategy.bbox,   //load only data off the visible map
        loader: function(extent, resolution, projection) {
            var extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get('EPSG:4326').getCode());
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "../map/php/get_geojson.php?" +     // define path to the get_geojson.php script
                    "geotable=" + options.geotable +
                    "&fields=" + options.fields +
                    "&where=" + options.where +
                    "&bbox=" + extent.join(","),
                context: this
            }).done(function(data) {
                var format = new ol.format.GeoJSON();
                this.addFeatures(format.readFeatures(data, {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857"
                }));

            });

        }
    }),
    minResolution: options.minResolution,
    maxResolution: options.maxResolution,
    content: options.content,
    symbology: options.symbology,
    showLabels: options.showLabels,
    label: options.label,

}

ol.layer.Vector.call(this, options);

};

ol.inherits(ol3Vector, ol.layer.Vector);

Furthermore:

var landkreise = new ol3Vector({
    title: "Landkreise in Niedersachsen",   // name of the layer to show up in the layerswitcher
    geotable: "tbl_landkreise_geb_f",
    fields: "KRS,sumarea",
    where: "KRS IS NOT NULL",    // You can use all the PostgreSQL or PostGis features here
    minResolution: 0.01,
    maxResolution: 50000,
    content: " ",
    showLabels: false,    // show labels on map
    label: "KRS"    // field used for labeling
});
baselayersArray=[OSM, landkreise];
baselayers.setLayers(new ol.Collection(baselayersArray));
landkreise.setVisible(true);

Answer 1

Nvm I got it. I changed

}).done(function(data) {
            var format = new ol.format.GeoJSON();
            this.addFeatures(format.readFeatures(data, {
                dataProjection: "EPSG:4326",
                featureProjection: "EPSG:3857"
            }));

to

}).done(function(data) {
                var format = new ol.format.GeoJSON();
                this.clear();
                this.addFeatures(format.readFeatures(data, {
                    dataProjection: "EPSG:4326",
                    featureProjection: "EPSG:3857"
                }));