OpenLayers3入门篇-点的扩散效果

点的扩散效果原理与点在线上的运动类似，先根据传入的坐标先创建一个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);
	    }