上代码之间，可以直接浏览器运行
<!DOCTYPE html> <html> <head> <title>Icon Symbolizer</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="external nofollow" type="text/css"> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> #map { position: relative; } #popup { cursor: pointer; } </style> </head> <body> <div id="map" class="map"></div> <script> //定义底图 var baseLayer = new ol.layer.Vector({ renderMode: ‘image‘, style: new ol.style.Style({ fill: new ol.style.Fill({ color: ‘rgba(220,20,60)‘ }), stroke: new ol.style.Stroke({ color: ‘rgba(220,20,60)‘, 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: ‘rgba(220,20,60)‘ }), radius: 6 }) }) }) 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(220,20,60‘ + opacity + ‘)‘, width: 4 - 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(); } </script> </body> </html>
//功能图如下
原文：https://www.cnblogs.com/wuzhaoyu/p/14792519.html