Openlayers实战，Openlayers实现呼吸光圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小

原创 已于 2023-08-02 17:41:27 修改 · 1.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#javascript #vue.js #前端 #OpenLayers #光晕扩散动画特效 #闪烁动画 #呼吸圈动画

于 2023-06-01 22:19:04 首次发布
本文介绍如何在OpenLayers中创建呼吸光圈特效，包括光晕扩散动画，可调节扩散速度和圆圈大小。文章详细阐述了实现该效果的步骤，从监听图层渲染事件到计算透明度和光晕大小，并提供了代码实现和测试效果演示。

专栏目录：
OpenLayers实战进阶专栏目录

前言

gis主要用来展示数据，所以动态效果是最重要的，本章实现呼吸光圈一样的点位圆形闪烁动画效果，可以用于选中或者警示等特别提醒的效果，比较醒目。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖

                

                
                
        

         

    



  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
ol地块闪烁，渐变，呼吸灯效果实现

				
			

			

				

					lz5211314121的博客
				

				

					08-24
					
					984
					
				

			

		

		

			
				
在openlayers实现很多矢量渲染时，可能会有用户提出多边形高亮，多边形闪烁等动态显眼的地图图形渲染方式，因此本文来提供给大家一些思路。

			
		

	



                

            
              



	

		

			

				
					
218：vue+openlayers 加载geotiff文件，显示图形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-12
					
					2531
					
				

			

		

		

			
				
第218个本示例的目的是介绍演示如何在vue+openlayers中加载geotiff文件，显示图形，具体的加载方式参考源代码。这里的tif文件有25MB多，加载出来的时间会有点小长。

			
		

	



              


  
              

                


	

		

			

				
					
openlayers很多特效demo

				
			

			

				

					07-01
				

			

		

		

			
				
openlayers很多特效demo
openlayers很多特效demo
openlayers很多特效demo

			
		

	





	

		

			

				
					
 Leaflet高级动画效果：飞行动画、过渡效果实现原理

					
最新发布

				
			

			

				

					gitblog_00337的博客
				

				

					11-15
					
					702
					
				

			

		

		

			
				
Leaflet作为领先的JavaScript地图库，其流畅的动画效果为用户提供了卓越的交互体验。本文将深入解析Leaflet的飞行动画、过渡效果等高级动画功能的实现原理，帮助开发者更好地理解和运用这些功能。

## 🚀 Leaflet动画系统核心架构

Leaflet的动画系统建立在几个核心组件之上，主要包括PosAnimation类和地图视图控制机制。PosAnimation是Leaflet内

			
		

	



		

			
		



	

		

			

				
					
OpenLayers动画效果显示路线

				
			

			

				

					03-16
				

			

		

		

			
				
NULL
博文链接：https://xiaying-hefei.iteye.com/blog/430531

			
		

	





	

		

			

				
					
Openlayers特殊效果

				
			

			

				

					m0_46543935的博客
				

				

					07-19
					
					403
					
				

			

		

		

			
				
Openlayers特殊效果

			
		

	





	

		

			

				
					
openlayers3线段添加闪烁_Openlayers实现点闪烁扩散效果

				
			

			

				

					weixin_34743057的博客
				

				

					12-23
					
					812
					
				

			

		

		

			
				
本文实例为大家分享了Openlayers实现点闪烁扩散效果的具体代码，供大家参考，具体内容如下点闪烁样式：DOM的样式实现/**橙色点扩散闪烁样式*/.point_animation{background: #ff9900;width: 6px;height: 6px;border: 2px #ff9900 solid;border-radius: 50%;position: absolute;}...

			
		

	





	

		

			

				
					
OpenLayers实战，OpenLayers实现定时闪烁动画效果，定时闪烁光晕特效

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					06-01
					
					1626
					
				

			

		

		

			
				
在上一章中Openlayers实现类似呼吸灯的闪烁圆圈特效，光晕扩散动画特效，可调光晕扩散速度，可调光晕圆圈大小我们实现了类似呼吸灯一样的连续不断的光晕闪烁动画效果，本章在这个基础上实现定时闪烁，到时间后自动停止动画。

			
		

	





	

		

			

				
					
openlayers marker光晕扩散（光环扩散）（postrender事件和render方法）

				
			

			

				

					无心使然云中漫步
				

				

					06-25
					
					1636
					
				

			

		

		

			
				
本篇介绍一下使用openlayersmarker光晕扩散（光环扩散）（postrender事件和render方法）

			
		

	





	

		

			

				
					
Openlayers实现点闪烁扩散效果

				
			

			

				

					10-14
				

			

		

		

			
				
在OpenLayers中实现点的闪烁扩散效果是一种增强地图可视化的方式，可以使用户更加关注特定的地理位置。这个效果通过CSS动画和Overlay对象实现。以下是对实现这一效果的详细解释：  首先，我们要了解OpenLayers中的...

			
		

	





	

		

			

				
					
Openlayers实现扩散的动态点（水纹效果）

				
			

			

				

					10-14
				

			

		

		

			
				
总结来说，OpenLayers 实现扩散的动态点（水纹效果）涉及到以下几个关键步骤： 1. 引入OpenLayers库和其他依赖。 2. 创建地图实例和底图。 3. 创建矢量图层和矢量源。 4. 添加点特征到矢量源。 5. 使用`...

			
		

	





	

		

			

				
					
Openlayers扩散的动态点（水纹效果）

				
			

			

				

					qq_40482342的博客
				

				

					10-11
					
					2871
					
				

			

		

		

			
				
在openlayers中制作危险源标识可以需要动态扩散的点（有很多种方法 可以加入jpg动图，也可以写css动画） 这里提供一种思路用openlayer自带的方法写 并给予详细的方法注释供初学者学习 （所有jar包都是在线的代码可以复制过去直接用）
<!DOCTYPE html>
<html>
  <head>
    <title>Icon Sym...

			
		

	





	

		

			

				
					
Echart在Openlayers的应用-航班的炫光特效

				
			

			

				

					weixin_30423977的博客
				

				

					08-02
					
					973
					
				

			

		

		

			
				
概述在前两篇文章中讲到了echart在openlayers2中的应用，地图统计图与热力图的实现，在本文中介绍openlayers中结合echart实现航班的炫光特效展示。效果实现代码：1、EchartLayerOpenLayers.Layer.EchartLayer = OpenLayers.Class(OpenLayers.Layer,
    {
        isBaseLayer :...

			
		

	





	

		

			

				
					
OpenLayers3入门篇-点的扩散效果

				
			

			

				

					Adventure_xph的博客
				

				

					07-27
					
					5004
					
				

			

		

		

			
				
点的扩散效果原理与点在线上的运动类似，先根据传入的坐标先创建一个layer,然后绑定一个addfeature的事件（flush函数），在这个事件里面随着时间的推移不断的对这个layer的style进行设置从而动态的做出扩散的效果出来
function pointLight(pointC){
		map.removeLayer(vector2);
		pointCoord = pointC;
		

			
		

	





	

		

			

				
					
vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）

				
			

			

				

					无心使然云中漫步
				

				

					06-25
					
					695
					
				

			

		

		

			
				
本篇介绍一下使用 vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）

			
		

	





	

		

			

				
					
openlayers（二）添加炫酷的3D效果并加上滤镜

				
			

			

				

					的博客
				

				

					03-08
					
					4485
					
				

			

		

		

			
				
openlayers3D效果（伪3D效果）

			
		

	





	

		

			

				
					
OpenLayer4实现卷帘效果

				
			

			

				

					HPUGIS的博客
				

				

					08-08
					
					2849
					
				

			

		

		

			
				
一、用途：卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块，这个时候就用到卷帘效果，我们可以把这个卷帘做成一个label可以来回拖动，这样既可以达到控制效果，也很美观。

先来张效果图：



二、全部源码


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;地图卷帘效果&lt;/tit...

			
		

	





	

		

			

				
					
Openlayers点闪烁扩散效果

				
			

			

				

					guowenf的博客
				

				

					05-04
					
					2259
					
				

			

		

		

			
				
Openlayers点闪烁扩散效果
点闪烁样式：

DOM的样式实现
/**橙色点扩散闪烁样式*/
.point_animation{
	background: #ff9900;
	width: 6px;
	height: 6px;
	border: 2px #ff9900 solid;
	border-radius: 50%;
	position: absolute;
}
.point_anim...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值