tx7.gif
目前有需求，当选中设备时，需要设备闪烁表示已经被选中。在官方和百度的教程中都大部分是feature通过setStyle来设置，然后通过setInterval来设置动画闪烁。但是目前项目是矢量图层，所有的样式都是定义在图层上的如：
geoLayer = new ol.layer.Vector({
source: _vectorSource,
style: equStyleFunction
});
通过StyleFunction来统一设置的。而且这样方便设备和图层一起放大缩小。
这里发现：
- 当feature每次触发
propertychange事件，图层样式都会去重新刷新一遍。 - 那么可以通过设置自定义属性来改变图元的样式。
思路：
- 给选中的
feature设置一个flush的自定义属性。
2.通过postcompose事件，查看选中的feature，为feature改变flush。
3.调用feature的propertychange事件，传递图元被改变，重新绘制样式。
var SELECTTIMEOUT = null;
function activeSelect(){
if(SELECTTIMEOUT) {
clearTimeout(SELECTTIMEOUT);
}
//SELECTEDFEATURES 为选中的feature
var features = SELECTEDFEATURES.getArray();
if(features.length != 0) {
var types = [];
var typeFeatures = [];
for(var i = 0; i < features.length; i++){
var feature = features[i];
var val = feature.get('flush');
var type = feature.get('TYPE');
if(!types.contains(type)) {
typeFeatures.push(feature);
types.push(type);
}
feature.setProperties({"flush": !val}, true);
}
SELECTTIMEOUT = setTimeout(function(){
for(var i = 0; i < typeFeatures.length; i++){
var feature = typeFeatures[i];
feature.dispatchEvent('propertychange');
}
},1000);
}
}
map.on('postcompose', activeSelect);
在styleFunction中根据flush设置不同的图片，达到闪烁效果。
//闪烁
if(typeof(fProp.flush) != "undefined"){
img = fProp.flush ? _img : img;
}
