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讀取樣式。