OpenLayers 3：缩放/平移后未为未选择的功能调用样式功能

Question

我为我的问题准备了一个小提琴： 小提琴

1. 单击一个蓝色圆圈以将其选中->它变为红色
2. 单击另一个蓝色圆圈->原来的变成蓝色（取消选中），而新的变成红色（选中）

到现在为止还挺好。 现在，如果您改为执行以下操作：

1. 单击一个蓝色圆圈->它变为红色
2. 缩小并返回->保持红色
3. 点击另一个蓝色圆圈

-> 两个圆圈均为红色，而不是取消选择第一个！

我所拥有的只是一个selectInteraction和一个styleFunction这样的功能（我做了更多的事情，例如文本和样式缓存，但效果是一样的）：

function styleFunction(feature, resolution) {
    var selected = selectInteraction.getFeatures().getArray().indexOf(feature) >= 0;

    return [
    new ol.style.Style({
        image: new ol.style.Circle({
            radius: 30,
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: selected ? [255, 0, 0, 1] : [0, 0, 255, 1]
            })
        }),
        text: new ol.style.Text({
            text: 'Test',
            fill: new ol.style.Fill({
                color: 'black'
            })
        })
    })];
}

缩放或平移后为什么我的“取消选择”样式错误？ 据我在调试styleFunction时看到的，选择正确（仅包含1个项目），只是取消选择的项目没有正确设置样式。

我使用styleFunction是因为无论是否选择，我都会根据附加到要素的对象来设置文本和半径。 因此，我计算特征的样式， styleFunction选定和styleFunction选定的特征使用相同的styleFunction 。

---

编辑：解决方案

我更新了小提琴 。 显然，您必须将所有取消选择的特征的样式设置为“ null”（请参阅​​Jonatas Walker的答案）：

selectInteraction.on('select', function (evt) {
    if (evt) {
        $.each(evt.deselected, function (idx, feature) {
            feature.setStyle(null);
        });
    }
});

Answer 1

更新-http : //jsfiddle.net/jonataswalker/4vu669Lq/

内部styleFunction

var fill_color = (this instanceof ol.Feature) ?
    [0, 0, 255, 1] : [255, 255, 255, 1];

并在选择侦听器上设置所选样式：

selectInteraction.on('select', function(evt){
    var selected = evt.selected;
    var deselected = evt.deselected;
    if (selected.length) {
        selected.forEach(function(feature){
            feature.setStyle(styleFunction);
        });
    }
    if (deselected.length) {
        deselected.forEach(function(feature){
            feature.setStyle(null);
        });
    }
});

---

这是因为你使用的是相同的styleFunction两个ol.layer.Vector和ol.select.Interaction 。

因此，放大/缩小时，矢量层将从styleFunction读取样式。