javascript Openlayers 3：如何使用 ol.interaction.Select 以编程方式选择功能？

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

提问by DekiChan

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

我正在使用OpenLayers v3.6（这很重要，因为我发现的大多数解决方案都适用于 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).

我有一个表格，当我在该表格中选择一行时，我想在 OpenLayers 地图上突出显示/选择相应的功能。所有功能是简单的多边形（ol.geom.Polygon在相同的载体层（）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.

我想使用 select 交互，因为它发出的事件以及它应用于所选功能的样式。但是，如果有任何机会我可以在选择交互中操作选定的功能而没有相同的事件，那就没问题了。

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 :)

我知道这个问题和答案 - Openlayers 3：以编程方式选择一个功能- 但问题是我不能在评论中要求澄清（例如，究竟什么是mySelectControl），因为我没有任何声誉:)

回答by Jonatas Walker

The way to do is in the linkedquestion. So, push a ol.Featureinto the selected collection:

方法是在链接的问题中。因此，将 a 推ol.Feature入选定的集合：

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 selectevent:

如果要触发select事件：

select.dispatchEvent('select');

// OR

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

See demo!

看演示！