Openlayers实现点闪烁扩散效果
更新时间:2020年9月24日 16:38 点击:2852
本文实例为大家分享了Openlayers实现点闪烁扩散效果的具体代码,供大家参考,具体内容如下
点闪烁样式:
DOM的样式实现
/**橙色点扩散闪烁样式*/ .point_animation{ background: #ff9900; width: 6px; height: 6px; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation span{ position: absolute; width: 4px; height: 4px; animation: point_animation 1.5s infinite; box-shadow: 0px 0px 1px #ff9900; margin: 0px; border-radius: 50%; } .point_animation span{ animation-delay: 0.8s; } @keyframes point_animation{ 10% { transform: scale(1); } 100% { transform: scale(8); } } /**红色点扩散闪烁样式*/ .css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(255, 0, 0, 0.9); transform: scale(0); animation: mypoint 3s; animation-iteration-count: infinite; } @keyframes mypoint{ to{ transform: scale(1.5); background: rgba(0, 0, 0, 0); } }
在地图上添加点—采用overlay添加DOM元素
需要用到Openlayers中的overlay元素,官方对于如何使用overlay做出了相关API说明
///创建overlay,element传入的是存在于web中的DOM元素 var popup = new ol.Overlay({ element: document.getElementById('popup') }); popup.setPosition(coordinate);//设置overlay的位置 map.addOverlay(popup);//讲overlay添加到地图上
具体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点扩散</title> <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> <style> .point_animation{ background: #ff9900; width: 6px; height: 6px; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation span{ position: absolute; width: 4px; height: 4px; animation: point_animation 1.5s infinite; box-shadow: 0px 0px 1px #ff9900; margin: 0px; border-radius: 50%; } .point_animation span{ animation-delay: 0.8s; } @keyframes point_animation{ 10% { transform: scale(1); } 100% { transform: scale(8); } } .css_animation{ height:50px; width:50px; border-radius: 25px; background: rgba(255, 0, 0, 0.9); transform: scale(0); animation: mypoint 3s; animation-iteration-count: infinite; } @keyframes mypoint{ to{ transform: scale(1.5); background: rgba(0, 0, 0, 0); } } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var baseLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", }), }); var map = new ol.Map({ layers: [baseLayer], view: new ol.View({ center: [104.5602,32.4070], projection: 'EPSG:4326', zoom: 4, extent: [-180, -90, 180, 90] }), target: "container", interactions:ol.interaction.defaults({ doubleClickZoom: false }), controls:ol.control.defaults({ zoom:false, attribution: false, }), }); setFlashPoint() function setFlashPoint(){ //第一种样式 var element = document.createElement("div"); element.className = "point_animation"; var p = document.createElement("p"); var span = document.createElement("span"); element.appendChild(p); element.appendChild(span); var point_overlay = new ol.Overlay({ element: element, positioning: 'center-center', }); map.addOverlay(point_overlay); point_overlay.setPosition([120,30]); //第二种样式 var ele = document.createElement("div"); ele.className = "css_animation"; var point_overlay2 = new ol.Overlay({ element: ele, positioning: 'center-center', }); map.addOverlay(point_overlay2); point_overlay2.setPosition([110,30]); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要为大家详细介绍了Openlayers实现点闪烁扩散效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
- 这篇文章主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-25
- 这篇文章主要为大家详细介绍了openlayers 3实现车辆轨迹回放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-25
- 本系列文章介绍一个简单的实时定位示例,基于VUE + OPENLAYERS实现实时定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-09-01
- 这篇文章主要为大家详细介绍了iOS自定义雷达扫描扩散动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-11
- 下面小编就为大家带来一篇浅谈C# winForm 窗体闪烁的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要为大家详细介绍了原生js实现星星闪烁效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-06
- 这篇文章主要为大家详细介绍了Unity3D实现物体闪烁效果,类似霓虹灯、跑马灯、LED灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了Openlayers实现扩散的动态点,水纹效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-18
- 这篇文章主要为大家详细介绍了vue使用openlayers实现移动点动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
- 这篇文章主要为大家详细介绍了Unity利用材质自发光实现物体闪烁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
C# Windows API应用之基于FlashWindowEx实现窗口闪烁的方法
这篇文章主要介绍了C# Windows API应用之基于FlashWindowEx实现窗口闪烁的方法,结合实例形式分析了Windows API函数FlashWindowEx的功能、定义及实现窗口闪烁的相关技巧,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下...2016-04-06
vue集成openlayers加载geojson并实现点击弹窗教程
这篇文章主要为大家详细介绍了vue集成openlayers加载geojson并实现点击弹窗教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-25- 这篇文章主要为大家详细介绍了Openlayers学习之地图比例尺控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-28
- 这篇文章主要为大家详细介绍了WPF实现文字粒子闪烁动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-03
- 这篇文章主要为大家详细介绍了OpenLayers实现图层切换控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-25
- 这篇文章主要介绍了vuejs在解析时出现闪烁的原因及防止闪烁的方法,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-10-03
- 本篇文章是对WTL中使用双缓冲避免闪烁的解决方法进行了详细的分析介绍,需要的朋友参考下...2020-04-25
- PS的扩散效果可以产生类似毛玻璃质感的效果,使画面有些毛毛的感觉。接下来通过本文给大家分享OpenCV-PS扩散毛玻璃效果的实现代码,一起看看吧...2021-09-02