基于openlayers4实现点的扩散效果

2019-11-19 14:29:40

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>   <div id="map" style="width: 100%;height: 100%"></div>   <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_div = document.createElement('div');     point_div.className = 'css_animation';     point_overlay = new ol.Overlay({       element:point_div,       positioning:'center-center'     });     map.addOverlay(point_overlay);      point_overlay.setPosition([12950000, 4860000]);   </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue组件编写之todolist组件实例详解

下一篇：vue-cli启动本地服务局域网不能访问的原因分析