点的扩散效果原理与点在线上的运动类似,先根据传入的坐标先创建一个layer,然后绑定一个addfeature的事件(flush函数),在这个事件里面随着时间的推移不断的对这个layer的style进行设置从而动态的做出扩散的效果出来
function pointLight(pointC){
map.removeLayer(vector2);
pointCoord = pointC;
var source = new ol.source.Vector({
wrapX: false
});
var vector = new ol.layer.Vector({
source: source,
});
vector2 = vector;
map.addLayer(vector2);
var geom = new ol.geom.Point(ol.proj.transform(pointCoord,
'EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(geom);
source.on('addfeature', function(e) {
flash(e.feature);
});
source.addFeature(feature);
}
//扩散的加载
function flash(feat){
var feature = feat;
var start = new Date().getTime();
var listenerKey;
function animate(event){
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);
map.removeLayer(vector2);
pointLight(pointCoord);
return;
}
// tell OL3 to continue postcompose animation
map.render();
}
//地图渲染事件
listenerKey = map.on('postcompose', animate);
}