Openlayers 3:如何使用ol.interaction.Select以编程方式选择功能? [英] Openlayers 3: how to select a feature programmatically using ol.interaction.Select?

问题描述

我正在使用 OpenLayers v3.6 (这一点很重要，因为我发现的大多数可行的解决方案都适用于OpenLayers 2).

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地图上的相应功能.所有要素都是同一矢量层( ol.layer.Vector )中的简单多边形( ol.geom.Polygon ).

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

我这样设置选择互动:

// 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.

我知道这个问题&答案- Openlayers 3:以编程方式选择功能-但问题是我无法在评论中要求澄清(例如， mySelectControl 到底是什么)，因为我没有任何声誉:)

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

推荐答案

方法是在链接问题中.因此，将ol.Feature推入所选集合:

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

如果要触发select事件:

select.dispatchEvent('select');

// OR

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

> 观看演示！

这篇关于Openlayers 3:如何使用ol.interaction.Select以编程方式选择功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！