【问题标题】:Openlayers 3: how to select a feature programmatically using ol.interaction.Select?Openlayers 3:如何使用 ol.interaction.Select 以编程方式选择功能?
【发布时间】:2015-07-09 13:57:00
【问题描述】:

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

我有一张表,当我在该表中选择一行时,我想在 OpenLayers 地图上突出显示/选择相应的功能。所有特征都是同一矢量图层(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;
}

当我想通过在地图上单击来选择多边形时,这很有效。但我想要实现同样的效果,不是通过点击地图,而是点击地图外的某个元素(在我的示例中为表格行,但实际上可以是任何东西)。

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

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

【问题讨论】:

    标签: javascript gis openlayers-3


    【解决方案1】:

    方法是在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!

    【讨论】:

    • 谢谢。我尝试了类似的方法,但问题是没有应用正确的样式(这是正确的),我没有注意到。
    • 这不会触发交互中的“选择”事件。任何想法如何强制它触发?显然dispatchEvent 从 3.8 开始成为私有函数
    • @PhirozeNoble see fiddle.
    • @DekiChan 你是如何解决你的风格不适用问题的?我有同样的问题,但我无法解决这个问题。
    • @Andrei 我很乐意为您提供帮助,但我不再拥有此代码,而且我真的不记得到底出了什么问题。现在我会知道,下次我需要发布解决方案,以便清楚哪里出了问题以及如何解决。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多