openlayers-3 - 无法为矢量图层中单击的要素设置样式

Question

因此，在我的 Openlayers 3 中，我设置了一个默认样式，即在图层第一次加载时呈现功能

function styleFunction(feature, resolution) {
    var color = feature.get('color');
    var name = feature.get('name');

    var fill = new ol.style.Fill({
        color: color
    });

    var stroke = new ol.style.Stroke({
        color: "black",
        lineCap: "butt",
        lineJoin: "bevel",
        width:1         
    });

    var text= new ol.style.Text({
        font: '20px Verdana',
        text: name,
        fill: new ol.style.Fill({
            color: [64, 64, 64, 0.5]
        })
    })

    var cStyle = new ol.style.Style({
        fill: fill,
        stroke: stroke,
        text: text
    });

    return [cStyle];
}

单击某个功能时，我希望该功能更改其样式，其余部分保留上面的默认样式。

这是我的尝试

 //add simple click interaction to the map
 var select = new ol.interaction.Select();
 map.addInteraction(select);

//for every clicked feature
 select.on('select', function(e) {
       var name = e.selected[0].get('name');

       //set the clicked style
        var fillClick= new ol.style.Fill({
            color: "black"
         });

        var strokeClick = new ol.style.Stroke({
            color: "white",
            lineCap: "butt",
            lineJoin: "bevel",
            width:3         
        });

        var textClick= new ol.style.Text({
                font: '10px Verdana',
                text: name,
                fill: new ol.style.Fill({
                    color: [64, 64, 64, 1]
                })
            })

        var styleClick = new ol.style.Style({
            stroke: strokeClick,
            fill : fillClick,
            text : textClick
        });



    //set all to default
    for (i in e.selected){
        e.selected[i].setStyle(styleFunction);  
    }

    //reset the first selected to the clicked style
    e.selected[0].setStyle(styleClick);

我在控制台上没有收到任何错误，但这行不通。当我单击另一个时，单击的功能不会返回到默认样式。所有点击的功能都保留 styleClick .

那么，我该如何解决这个问题，还有没有更简单的方法来做到这一点？我认为这种功能有很多代码

谢谢

编辑

我换了

    for (i in e.selected){
        e.selected[i].setStyle(styleFunction);  
    }

和

    var allfe = sourceVector.getFeatures(); 

    for (i in allfe){
        allfe[i].setStyle(styleFunction);   
    }   

所以现在所有的特性都将获得 styleFunction 中定义的样式。功能。

这不起作用。我收到 Uncaught TypeError: feature.get is not a function引用函数的第一行，var color = feature.get('color');这个。

我不能只设置样式，我需要它是一个函数，以便我将来可以检查几何类型。

所以我的两个问题，

我不知道如何调试和修复这个错误

如果我有 500 个特征，每次点击都重绘它们，会减慢渲染速度。有其他解决方案吗？

谢谢

Answer 1

图层和特征样式功能不同

使用 OpenLayers 3 样式函数时，必须注意 ol.FeatureStyleFunction 之间的区别和一个 ol.style.StyleFunction .它们非常相似，因为它们都应该返回一个 ol.Style 的数组。 s 基于特征和分辨率。然而，他们不会以同样的方式获得这些信息。

为功能提供样式功能时，使用它是 setStyle方法，函数应该是 ol.FeatureStyleFunction .安 ol.FeatureStyleFunction用 this 调用引用该功能，并使用 resolution作为唯一的论据。

给图层提供样式函数时，应该是ol.style.StyleFunction .它们被调用时带有两个参数，feature和 resolution .

这是你的错误的原因。您正在使用 ol.style.StyleFunction作为特征样式。稍后，当您的样式函数被调用时，第一个参数是分辨率而不是您期望的功能。

方案一:setStyle(null)

此解决方案已在@jonatas-walker 的 answer 中提出。 .它的工作原理是在您选择的功能上设置样式并从未选择的功能中删除样式(而不是将您的样式功能设置为未选择的功能)。

OpenLayers 将使用特征的样式(如果有的话)，否则使用图层的样式。因此，将未选择的要素的样式重新设置为 null 将使它们再次使用图层的样式功能。

解决方案2:使用style您选择的交互选项
ol.interaction.Select 接受一个样式选项(一个 ol.style.StyleFunction )，用于设置所选特征的样式。

优点:具有一个图层样式函数(普通 View )和一个用于选择交互的样式函数使代码比混合特征和图层样式更具可读性。此外，您不必跟踪事件或修改功能。

可以这样做:

var selectedStyleFunction = function(feature, resolution) {
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: "white",
            lineCap: "butt",
            lineJoin: "bevel",
            width:3         
        }),
        fill : new ol.style.Fill({
            color: "black"
        }),
        text : new ol.style.Text({
            font: '10px Verdana',
            text: feature.get('name'),
            fill: new ol.style.Fill({
                color: [64, 64, 64, 1]
            })
        })
    })];
};
var select = new ol.interaction.Select({
    style: selectedStyleFunction
});
map.addInteraction(select);