草庐IT

javascript - Openlayers 3 : how to select a feature programmatically using ol. 交互。选择?

coder 2024-07-23 原文

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

我有一个表格,当我在该表格中选择一行时,我想突出显示/选择 OpenLayers map 上的相应要素。所有要素都是位于同一矢量图层 (ol.layer.Vector) 中的简单多边形 (ol.geom.Polygon)。

我像这样设置选择交互:

// 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;
}

当我想通过在 map 上单击多边形来选择多边形时,这个功能很好。但我想要实现的是相同的,不是通过点击 map 而是点击 map 外的一些元素(在我的例子中是表格行,但它实际上可以是任何东西)。

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

我知道这个问答 - Openlayers 3: Select a feature programmatically - 但问题是我不能在评论中要求澄清(例如,mySelectControl 到底是什么),因为我没有任何声誉:)

最佳答案

方法是在linked题。因此,将 ol.Feature 推送到选定的集合中:

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: []
});

See demo!

关于javascript - Openlayers 3 : how to select a feature programmatically using ol. 交互。选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31319705/

有关javascript - Openlayers 3 : how to select a feature programmatically using ol. 交互。选择?的更多相关文章

随机推荐