Selection with OL 3.5.0 doesn't work correctly

Question

I try a selection of object with OpenLayers 3.5.0 but she doesn't work correctly.

I make a code like this when I click on the map :

var map;
var selection;

function init ()
{

    /* SCU */
    proj4.defs("EPSG:4875","+proj=lcc +lat_1=44.25 +lat_2=48.75 +lat_0=43 +lon_0=3 +x_0=1700000 +y_0=2400000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
    proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs");
    proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs");

    /* Functions */
    function transform(extent) 
    {
        return ol.proj.transformExtent(extent, 'EPSG:4875', 'EPSG:3857');
    }

    /* Controls */
    var map_controles =
        [
        new ol.control.MousePosition({projection: 'EPSG:4875',coordinateFormat: ol.coordinate.createStringXY(2)}),
        new ol.control.Attribution(),
        new ol.control.Zoom(),
        new ol.control.ZoomToExtent({extent: transform([3541201,2271450, 1420157,2230936])})
        ];

    /* layers */
    /* baselayer */
    var osm                 = new ol.layer.Tile({source: new ol.source.OSM ()});

    /* vector layer */              
    var vactor_layer    = new ol.layer.Vector({
                                    source: new ol.source.Vector({
                                        url: 'data/geojson/myvector.geojson',
                                        format: new ol.format.GeoJSON({defaultDataProjection :'EPSG:4875', projection: 'EPSG:3857'})
                                    }),
                                    name: 'Mask',
                                    style: new ol.style.Style   
                                    ({
                                        fill:   new ol.style.Fill   ({color: 'rgba(255, 255, 255, 0.6)'}),
                                    })});

    /* map parameters */
    map = 
        new ol.Map  ({
            layers: [mapquest,vactor_layer],
            target: document.getElementById('map'),
            controls: map_controles,
            view: new ol.View({zoom: 11.20,minZoom: 11.20,maxZoom: 17, center: transform([3541001,2251475,1403890,2251475]),extent: transform([3541201,2271450, 1420157,2230936])})
                    });
    // Popups 
    // Map interaction

    var popup = new ol.Overlay.Popup;
    popup.setOffset([0, -55]);
    map.addOverlay(popup);

    map.on('click', function(evt) {

        // Layer
        var recup_layer = map.forEachLayerAtPixel(
            evt.pixel,
            function(ft, layer){return ft;}
        );

        // Properties
        var recup_prop = map.forEachFeatureAtPixel(
            evt.pixel,
            function(ft, layer){return ft;}
        );

        // SELECTION //

        // Style 1 - The overlay of selection
        var overlay_selection = new ol.FeatureOverlay ({
            map: map,
            name: 'Sélection',
            style: new ol.style.Style 
                ({
                image: new ol.style.Circle
                    ({radius: 7,stroke: new ol.style.Stroke ({color: 'rgb(0, 255, 255)',width: 2})
                })
            })
        });

        // Gestion of the overlay with a global variable : selection
        if (recup_prop != selection) {
            if (typeof(selection) !== 'undefined') 
            {
                overlay_selection.removeFeature(selection);
            }
            if (typeof(recup_prop) !== 'undefined') 
            {
                overlay_selection.addFeature(recup_prop);
            }
        selection = recup_prop;
        };

        if (recup_layer && recup_layer.get('name') == 'Mask') {

            var geometry = recup_prop.getGeometry();
            var coord = geometry.getCoordinates();

            var content = ("<div id='tad_close_popup' )'></div><div id='tad_text_popup'><p>Arr&ecirc;t "+  recup_prop.get('num') + "</p><p>"+  recup_prop.get('name') + "</p></div>");

            popup.show(coord, content);

        }

    }); 
}

So, when I click on an object, Style 1 appear on this object, but if I click on a second object, both objects become like style 1 and removeFeature doesn't work.

I tried too, the method :

overlay_selection.getFeatures(selection).clear();

but the result is the same.

Answer 1

Thx for the plunker it's easier to debug :) .

First of all, your problem is that you create a FeatureOverlay each time you click on the map, so when you click on the two features you create 2 different FeatureOverlay with the style1.

What you want is to declare your FeatureOverlay outside the callback of click event:

// Style 1 - The overlay of selection
var overlay_selection = new ol.FeatureOverlay ({
    map: map,
    name: 'Sélection',
    style: new ol.style.Style 
        ({
            fill: new ol.style.Fill({color: 'rgba(0,255,255,0.9)'})
        })
    // })
});

// Selection

map.on('click', function(evt) {
......

Second, it seems what you try to do is natively and nicely done by the Select interaction, see:

example: http://openlayers.org/en/master/examples/select-features.html

api: http://openlayers.org/en/master/apidoc/ol.interaction.Select.html