1.5.3.2.18.3 动画要素图

基于 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);
});

查看完整示例代码