OpenLayers 3(3.3.0)一次选择一个功能

时间:2015-09-30 14:02:11

标签: openlayers openlayers-3 angular-openlayers

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

这一切都很好,但它没有“取消选择”之前选择的功能,所以如果我点击所有功能,请选择样式

我能解决这个问题的唯一方法是,设置'previousSelectedFeature'变量,并在'on'事件中重置其样式,但它似乎有点笨拙,不应该有办法检测何时某项功能已被“取消选中”并重置其风格?

1 个答案:

答案 0 :(得分:0)

似乎解决方案可能是更新到版本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;
                       })
                    })
                });
            });

是对还是错?