Openlayers制作闪烁图元

tx7.gif

目前有需求，当选中设备时，需要设备闪烁表示已经被选中。在官方和百度的教程中都大部分是feature通过setStyle来设置，然后通过setInterval来设置动画闪烁。但是目前项目是矢量图层，所有的样式都是定义在图层上的如：

geoLayer = new ol.layer.Vector({
  source: _vectorSource,
  style: equStyleFunction
 });

通过StyleFunction来统一设置的。而且这样方便设备和图层一起放大缩小。
这里发现：

1. 当feature每次触发propertychange事件，图层样式都会去重新刷新一遍。
2. 那么可以通过设置自定义属性来改变图元的样式。

思路：

1. 给选中的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;
}