OpenLayers-3-source.clear（）的正确用法是什么

Question

I have a ol 3.10.1 map where the goal is to redraw the features of a layer dynamically. On the road to get there, I'm using the source.clear() function. The strange thing is that the source.clear() actually clear the features from the layer at the current zoom level, but while zooming in or out the features are still there. Am I using the source.clear() function the correct way? Please find bellow the code snippet which I'm using for testing purposes.

        var image = new ol.style.Circle({
          radius: 5,
          fill: null,
          stroke: new ol.style.Stroke({color: 'red', width: 1})
        });

        var styles = {
          'Point': [new ol.style.Style({
            image: image
          })]};

        var styleFunction = function(feature, resolution) {
          return styles[feature.getGeometry().getType()];

        };  

        var CITYClusterSource = new ol.source.Cluster({
                source: new ol.source.Vector({
               url: 'world_cities.json',
                format: new ol.format.GeoJSON(),
                projection: 'EPSG:3857'
            }),
        })
        var CITYClusterLayer = new ol.layer.Vector({
            source: CITYClusterSource,
            style: styleFunction

        });

        setTimeout(function () { CITYClusterSource.clear(); }, 5000);

        var map = new ol.Map({
            target: 'map',
            renderer: 'canvas',
              layers: [
                new ol.layer.Tile({
                  source: new ol.source.OSM(),
                }),
                CITYClusterLayer
            ],
            view: new ol.View({
                center: ol.proj.transform([15.0, 45.0], 'EPSG:4326', 'EPSG:3857'),
                zoom:3
            })
        });

I'm using the setTimout() function to have the features visible for some seconds, before they are supposed to be cleared.

Please advice.

Answer 1

UPDATE : http://jsfiddle.net/jonataswalker/ayewaz87/

I forgot, OL will load your features again and again, for each resolution. So if you want to remove once and for all, use a custom loader, see fiddle.

Your source is asynchronously loaded, so set a timeout when it's ready:

CITYClusterSource.once('change', function(evt){
    if (CITYClusterSource.getState() === 'ready') {
        // now the source is fully loaded
        setTimeout(function () { CITYClusterSource.clear(); }, 5000);
    }
});

Note the once method, you can use on instead of it.