OpenLayers 4 实现点动态扩散效果详解

//定义底图
var baseLayer = new ol.layer.Vector({
 renderMode: 'image',
 source: new ol.source.Vector({
  url:'/data/shengjie.geojson',
  format: new ol.format.GeoJSON()
 }),
 style: new ol.style.Style({
  fill: new ol.style.Fill({
   color: '#0A122A'
  }),
  stroke: new ol.style.Stroke({
   color: '#6E6E6E',
   width: 1
  })
 })
})

var view = new ol.View({
 center: [108.7,34.8],
 zoom: 4,
 projection: "EPSG:4326"
});

var map = new ol.Map({
 target: 'map',
 view: view,
 layers: [baseLayer]
})


//定义一个矢量图层，用于打点
var pointAnimationLayer = new ol.layer.Vector({
 source: new ol.source.Vector(),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: '#E6E6E6'
   }),
   radius: 4
  })
 })
})
map.addLayer(pointAnimationLayer);

//随机写的点坐标
var points=[]
points.push([112.4,33.5]);
points.push([103.8,23.7]);
points.push([89.7,41.6]);

//将点添加到图层
points.forEach(element => {
 var ft = new ol.Feature({
  geometry: new ol.geom.Point(element)
 });
 pointAnimationLayer.getSource().addFeature(ft);
});

//map渲染事件，回调动画
map.on('postcompose',animation);

//样式中的半径变量，通过不断刷新点样式的半径来实现点动态扩散
var radius = 1;

//动画
function animation(event){
 if(radius >= 20){
  radius = 0
 }
 var opacity = (20 - radius) * (1 / 20) ;//不透明度
 var pointStyle = new ol.style.Style({
  image: new ol.style.Circle({
   radius:radius,
   stroke: new ol.style.Stroke({
    color: 'rgba(255,255,0' + opacity + ')',
    width: 2 - radius / 10
   })
  })
 })

 var features = pointAnimationLayer.getSource().getFeatures();
 
 var vectorContext = event.vectorContext;
 vectorContext.setStyle(pointStyle);
 features.forEach(element => {
  var geom = element.getGeometry();
  vectorContext.drawGeometry(geom);
 });
 radius = radius + 0.3;
 
 //触发map的postcompose事件
 map.render();
}

map.on('postcompose',animation);

map.render();