基于openlayers4实现点的扩散效果
程序员文章站
2024-01-16 21:15:28
本文实例为大家分享了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> <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: php实现希尔排序算法的方法分析
推荐阅读
-
基于openlayers4实现点的扩散效果
-
基于jquery实现的鼠标拖拽元素复制并写入效果_jquery
-
基于PHP实现假装商品限时抢购繁忙的效果
-
基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery
-
基于PHP实现假装商品限时抢购繁忙的效果,商品限时抢购
-
基于CSS3的animation属性实现微信拍一拍动画效果
-
基于jQuery的为attr添加id title等效果的实现代码_jquery
-
基于jQuery实现的菜单切换效果_jquery
-
js实现点小图看大图效果的思路及示例代码_javascript技巧
-
Android基于API的Tabs3实现仿优酷tabhost效果实例