[英]openlayers3 same style for selected features (only one changed property)?
我有一个带有样式定义的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值就可以了。
现在我找到了一个可行的解决方案:
您可以在样式函数中添加其他参数(例如,突出显示[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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.