OpenLayers 3 (3.3.0) Выберите функцию по одному

Question

Используя 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);

Все это прекрасно работает, но не отменяет выбор ранее выбранной функции, поэтому, если я нажму вокруг всех функций, получу стиль выбора

Единственный способ, которым я могу это исправить, - это установить переменную "ранее выбранный" и сбросить ее стиль в событии "в", хотя это кажется немного неуклюжим, не должно быть способа обнаружить, когда объект имеет был "не выбран" и сбросил его стиль?

Answer 1

Может показаться, что решением является обновление до версии 3.4 (она не работает в 3.3), а затем вы получаете доступ к свойствам selected и deselected. Поэтому я реорганизовал свой код события в

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

Правильно или неправильно?