动画要素图
基于 OpenLayers 的动态闪烁点的动画示例。
//添加随机的要素
function addRandomFeature() {
var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
var feature = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
source.addFeature(feature);
}
//实现动画效果
function flash(feature) {
var start = new Date().getTime();
var listenerKey;
function animate(event) {
//动画的持续时间
var duration = 3000;
var vectorContext = event.vectorContext;
var frameState = event.frameState;
var flashGeom = feature.getGeometry().clone();
var elapsed = frameState.time - start;
var elapsedRatio = elapsed / duration;
//半径大小
var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
//透明度
var opacity = ol.easing.easeOut(1 - elapsedRatio);
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
snapToPixel: false,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 0.25 + opacity
})
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(flashGeom);
if (elapsed > duration) {
ol.Observable.unByKey(listenerKey);
return;
}
map.render();
}
listenerKey = map.on('postcompose', animate);
}
//将动画绑定到添加要素的事件中
var source = new ol.source.Vector({
wrapX: false
});
source.on('addfeature', function (e) {
flash(e.feature);
});
var vector = new ol.layer.Vector({
source: source
});
map.addLayer(vector);
//通过定时器不断添加动画要素到地图
window.setInterval(addRandomFeature, 1000);
});