OpenLayers 3：在 zoom/pan 之后不为未选择的功能调用样式函数

Question

我已经为我的问题准备了一个fiddle：Fiddle

点击蓝色圆圈select它->它变成红色
点击另一个蓝色圆圈->原来的变成蓝色(deselected)，新的变成红色(selected)

到目前为止一切顺利。现在，如果您改为执行以下操作：

点击蓝色圆圈 -> 它变成红色
缩小并返回 -> 它保持红色
点击另一个蓝色圆圈

-> 两个圆圈都是红色的，而不是第一个 select！

我只有一个 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'
            })
        })
    })];
}

为什么我的 "deselected"- 缩放或平移后样式不对？据我在调试 styleFunction 时所见，selection 是正确的（仅包含 1 个项目），只是 deselected 项目的样式不正确。

我使用 styleFunction 因为无论是否 select ，我都会根据附加到要素的对象设置文本和半径。所以我计算了一个特征的样式，我对 selected 和 deselected 特征使用相同的 styleFunction。

编辑：解决方案

我更新了 Fiddle。显然，您必须将所有 deselected 功能的样式设置为 "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];

并在 select 侦听器上设置 selected 样式：

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);
        });
    }
});

这是因为您对 ol.layer.Vector 和 ol.select.Interaction 使用相同的 styleFunction。

因此，当您缩放 in/out 时，矢量图层会从您的 styleFunction 中读取样式。

OpenLayers 3：在 zoom/pan 之后不为未选择的功能调用样式函数

OpenLayers 3: stylefunction is not called for unselected features after zoom/pan

javascript

openlayers-3

编辑：解决方案