javascript - Openlayers 3: how to select a feature programmatically using ol.interaction.Select?

Question

I'm using OpenLayers v3.6 (this is important, because most of solutions that I found and would potentialy work are for OpenLayers 2).

I have a table and when I select a row in that table, I would like to highlight/select a corresponding feature on the OpenLayers map. All features are simple polygons (ol.geom.Polygon) in the same vector layer (ol.layer.Vector).

I set up select interaction like this:

// there is a lot of other code here
...
addSelectListener: function() {
    this.SelectInteraction = new ol.interaction.Select({
        condition: ol.events.condition.singleClick,
        layers: function (layer) {
            // defines layer from which features are selectable
            return layer.get('id') == 'polygons_layer';
        },
        style: this.Style.Selected
    });

    // Map = ol.Map
    Map.addInteraction(this.SelectInteraction);
    this.SelectInteraction.on('select', this.selectPolygon, this);
}

...

selectPolygon: function(event) {
    var selectSrc = this.getSelectInfo(event);

    // some code that relies on selectSrc data
}

...

getSelectInfo: function (event) {
    var selectSrc = {
        deselected: null,
        selected: null,
        type: null                
    };

    if (event.selected.length == 0 && event.deselected.length == 1) {
        // click outside of polygon with previously selected
        selectSrc.type = 'deselect';
        selectSrc.deselected = {
            feature: event.deselected[0],
            id: event.deselected[0].getId()
        };

    } else if (event.deselected.length == 0 && event.selected.length == 1) {
        // click on polygon without previously selected
        selectSrc.type = 'select';
        selectSrc.selected = {
            feature: event.selected[0],
            id: event.selected[0].getId()
        }

    } else if (event.deselected.length == 0 && event.selected.length == 1) {
        // click on polygon with previously selected
        selectSrc.type = 'switch';
        selectSrc.deselected = {
            feature: event.deselected[0],
            id: event.deselected[0].getId()
        };
        selectSrc.selected = {
            feature: event.selected[0],
            id: event.selected[0].getId()
        }
    } else {
        selectSrc.type = 'out';
    }

    return selectSrc;
}

This functions well when I want to select polygon by clicking on it on the map. But what I want is to achieve the same, not by clicking on map but rather click on some element outside the map (table row in my example, but it could be anything really).

I would like to use select interaction because of event that is emitted and because of the styling it applies to selected features. However, if by any chance I can just manipulate the selected features in select interaction without having the same event it would be ok.

I'm aware of this question & answer - Openlayers 3: Select a feature programmatically - but the problem is that I cannot ask in comments for clarification (for example, what exactly is mySelectControl), because I don't have any reputation :)

Answer 1

The way to do is in the linked question. So, push a ol.Feature into the selected collection:

var select = new ol.interaction.Select({
    //some options
});
map.addInteraction(select);

var selected_collection = select.getFeatures();
selected_collection.push(featurePoint);

If you want to trigger the select event:

select.dispatchEvent('select');

// OR

select.dispatchEvent({
  type: 'select',
  selected: [featurePoly],
  deselected: []
});

See demo!