openlayers3 тот же стиль для выбранных объектов (только одно измененное свойство)?

У меня есть слой ol3 с определением стиля. Я хотел бы использовать тот же стиль для взаимодействия выбора:

style = function(feature, resolution) {

    var iconFont = 'FontAwesome';
    var iconFontText = '\uf1f8'; // fa-trash
    var iconSize = 24;
    var col = 'black';

    var styles = [];

    var styleIcon = new ol.style.Style({
        text: new ol.style.Text({
            font: 'Normal ' + iconSize + 'px ' + iconFont,
            text: iconFontText,
            fill: new ol.style.Fill({color: col})
        })
    });
    styles.push(styleIcon);

    }

    return styles;
};

    new ol.layer.Vector({
            source: that.source,
            style: style
        });

    new ol.interaction.Select({
                features: that.selectedFeatures,
                style: style
            })

Я хочу изменить только одно свойство (iconSize) стиля, чтобы выделить выбранные функции. Это как-то возможно? Я не хочу определять два отдельных стиля, но было бы неплохо, если бы можно было программным образом скопировать стиль и заменить значение iconsize.

2 ответа

Решение

Теперь я нашел рабочее решение:

Вы можете добавить дополнительный аргумент (например, highlight [bool]) для функции стиля:

style = function(feature, resolution, highlight) {
...
}

и вместо

new ol.interaction.Select({
                features: that.selectedFeatures,
                style: style
            })

ты можешь использовать

new ol.interaction.Select({
                features: that.selectedFeatures,
                style: function(feature,resolution){
                     return style(feature,resolution,true);
                }
            })

Возможное решение: сообщите вашей функции, что ol.interaction.Select активен:

var style = function(ft, res, selecting){
  return [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: selecting ? 4 : 2
      })
    })
  ];
};

var selecting = false;
selectInteraction.on('select', function(evt) {
    selecting = evt.selected.length > 0;
});

http://jsfiddle.net/jonataswalker/eepyne75/

Другие вопросы по тегам