这篇文章主要为大家详细介绍了基于openlayers4实现点的扩散效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了openlayers4实现点的扩散效果，供大家参考，具体内容如下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="external nofollow" type="text/css"> <!-- the line below is only needed for old environments like internet explorer and android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestanimationframe,element.prototype.classlist,url"></script> <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> <style> .css_animation{ height:100px; width:100px; border-radius: 50%; background: rgba(255, 0, 0, 0.9); transform: scale(0); animation: myfirst 3s; animation-iteration-count: infinite; } @keyframes myfirst{ to{ transform: scale(2); background: rgba(0, 0, 0, 0); } } </style> </head> <body> <p id="map" style="width: 100%;height: 100%"></p> <script> var map = new ol.map({ layers:[new ol.layer.tile({ source:new ol.source.osm() })], target:'map', view:new ol.view({ center: [12950000, 4860000], zoom:7 }) }); var point_p = document.createelement('p'); point_p.classname = 'css_animation'; point_overlay = new ol.overlay({ element:point_p, positioning:'center-center' }); map.addoverlay(point_overlay); point_overlay.setposition([12950000, 4860000]); </script> </body> </html>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在js中如何改变单物体透明度
在js中如何实现通过拖拽改变物体大小
在vue中使用cli如何实现重构多页面脚手架
以上就是使用openlayers4如何实现点的扩散？的详细内容。