tx7.gif
目前有需求擎场，當(dāng)選中設(shè)備時羽德，需要設(shè)備閃爍表示已經(jīng)被選中。在官方和百度的教程中都大部分是feature通過setStyle來設(shè)置迅办，然后通過setInterval來設(shè)置動畫閃爍宅静。但是目前項(xiàng)目是矢量圖層，所有的樣式都是定義在圖層上的如：
geoLayer = new ol.layer.Vector({
source: _vectorSource,
style: equStyleFunction
});
通過StyleFunction來統(tǒng)一設(shè)置的站欺。而且這樣方便設(shè)備和圖層一起放大縮小姨夹。
這里發(fā)現(xiàn)：
- 當(dāng)feature每次觸發(fā)
propertychange事件，圖層樣式都會去重新刷新一遍矾策。 - 那么可以通過設(shè)置自定義屬性來改變圖元的樣式磷账。
思路：
- 給選中的
feature設(shè)置一個flush的自定義屬性。
2.通過postcompose事件贾虽，查看選中的feature逃糟，為feature改變flush。
3.調(diào)用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中根據(jù)flush設(shè)置不同的圖片地粪，達(dá)到閃爍效果取募。
//閃爍
if(typeof(fProp.flush) != "undefined"){
img = fProp.flush ? _img : img;
}
