OpenLayers 3 (3.3.0) 一次选择一项功能答案

【问题标题】：OpenLayers 3 (3.3.0) Select Feature one at a timeOpenLayers 3 (3.3.0) 一次选择一项功能
【发布时间】：2015-09-30 14:02:10
【问题描述】：

使用openlayer 3.3.0，我们有一张地图分为县，每个县都是一个'特征'，我想选择一个特征并改变它的边框颜色，当我选择另一个特征时，我希望之前选择的特征恢复到其原始样式和应用所选样式的新功能。

所以我用它来添加交互。

var select = new ol.interaction.Select({ 
            condition: ol.events.condition.click,
        });
select.on('select', function(evt){
    var features = evt.target.getFeatures();
    features.forEach(function(feature){
        feature.setStyle(new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#007aa9',
                    width: 1.5;
                }))
    }
})
map.addInteraction(select);

这一切都很好，但它不会“取消选择”以前选择的功能，所以如果我点击所有功能，就会得到选择样式

我似乎可以解决这个问题的唯一方法是，设置一个“previouslySelectedFeature”变量，并在“on”事件中重置它的样式，但这似乎有点笨拙，不应该有一种方法来检测何时某个功能已被“取消选择”并重置其样式？

【问题讨论】：

标签： openlayers openlayers-3 angular-openlayers

【解决方案1】：

似乎解决方案可能是更新到版本 3.4（它在 3.3 中不起作用），然后您可以访问“选择”和“取消选择”属性。所以我将我的事件代码重构为

            select.on('select', function(evt){
                var selectedFeatures = evt.selected;
                selectedFeatures.forEach(function(feature){
                    feature.setStyle(new ol.style.Style({
                        stroke: new ol.style.Stroke({
                        color: '#007aa9',
                        width: 1.5;
                       }));
                });
                var deselectedFeatures = evt.deselected;
                deselectedFeatures.forEach(function(feature){
                    feature.setStyle(new ol.style.Style({
                        stroke: new ol.style.Stroke({
                        color: '#000000',
                        width: 0.4;
                       })
                    })
                });
            });

对还是错？

【讨论】：