OpenLayers实战，OpenLayers实现气象台风飓风运动轨迹运动动画，可调台风旋转速度和运动速度，静态图片旋转动画

已于 2023-08-09 15:07:28 修改
阅读量810 收藏 3
点赞数 2
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 vue.js javascript OpenLayers 台风运动轨迹 台风旋转动画 png静态图片旋转
于 2023-08-09 14:54:24 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132188090
版权
OpenLayers6一本通 同时被 3 个专栏收录 该专栏为热销专栏榜 第30名
132 篇文章 13 订阅 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
53 篇文章 35 订阅 ¥69.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers创建气象台风动画，包括调整台风旋转速度和运动速度。通过计算角度和运动进度，实现静态PNG图片的旋转和运动效果。文章提供了详细的功能实现和代码示例，并展示了测试效果。
摘要由CSDN通过智能技术生成

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

前言

本章使用OpenLayers实现气象中常用的台风或者飓风运动轨迹动画，支持调整台风图标旋转速度和运动速度。
不同的台风可以设置不同的运动速度和旋转速度，也可以通过变量控制图片不旋转。

本章图片使用静态png图片，并非gif动态图。
本章未使用任何第三方库，只依赖OpenLayers。

openlayers

二、依赖和使用

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

                

                
                
        

        

        

    




        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
190：vue+openlayers 调整卫星运动的播放速度，展示运动轨迹

				
			

			

				

					大剑师兰特的GIS世界
				

				

					12-30
					
					1179
					
				

			

		

		

			
				
第190个本示例的目的是介绍演示如何在vue+openlayers项目中利用两行根数计算卫星在某一时刻的位置点，利用时间循环，定位出不同的位置，呈现动画的效果。文中利用slider的改变来确定当前时间为开始时间，slider的值为加速倍数，每个setTimeout为10毫秒，更新一次位置，由于倍数的关系，时间差成倍增长，新的时间点成倍的扩大。

			
		

	



                

              
                



	

		

			

				
					
Vue+Openlayers自定义轨迹动画

				
			

			

				

					01-18
				

			

		

		

			
				
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下


 
 
 OpenlayersTrack
 
 
 
 <div class=bar :s

			
		

	



                


  
              

                


	

		

			

				
					
vue3 + openlayers---流动线条（含动画效果）

					
最新发布

				
			

			

				

					QDxin_xyz的博客
				

				

					05-17
					
					353
					
				

			

		

		

			
				
【代码】vue3 + openlayers---流动线条（含动画效果）

			
		

	





	

		

			

				
					
Openlayers实例详解

				
			

			

				

					08-09
				

			

		

		

			
				
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。

			
		

	



		

			
		



	

		

			

				
					
vue+openlayers 实现台风效果 ***

				
			

			

				

					weixin_46262744的博客
				

				

					04-29
					
					2950
					
				

			

		

		

			
				
实现台风效果
 <img id="tfImg" src="../../public/editor-0.8s-47px.gif" />
    <!-- 台风hover信息 -->
    <div id="tfHoverInfo">
      <!-- {{tf2HoverInfo}} -->
      <div>强度:{{ tf2HoverInfo.vti }}</div>
      <div>东经：{{ tf2H.

			
		

	





	

		

			

				
					
openlayers6踩坑系列（六）历史轨迹和实时跟踪的绘制

				
			

			

				

					qq_39404437的博客
				

				

					03-03
					
					6619
					
				

			

		

		

			
				
最近都没发博客，因为一直在写关于小车历史轨迹这部分的逻辑，目前已经可以了，分别实现了历史双轨迹，历史单轨迹，实时轨迹

先说说我的小车轨迹，主要分为小车 和 轨迹 两部分，小车由Marker类实例化（Marker类是我开发的地图中的类，至于这个类，在我博客中可以看到，我的地图文档）上面是链接，Marker类继承于openlayers的Feature类。轨迹由我的Polyline实例化，继承于openlayers的LineString类。



轨迹线类具体讲解在上面我的链接里的第12个类



历史双轨迹：

			
		

	





	

		

			

				
					
Vue+Openlayer实现轨迹路线

					
热门推荐

				
			

			

				

					
				

				

					08-27
					
					1万+
					
				

			

		

		

			
				
<template>
  <div>
    <div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
  </div>
</template>

<script>
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
im...

			
		

	





	

		

			

				
					
OpenLayers入门，OpenLayers实现多个轨迹运动动画效果，也可以实现二维地图迁徙图效果

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					04-11
					
					2540
					
				

			

		

		

			
				
上一章中，我们已经实现了单个轨迹运动动画效果。如果可以创建多个轨迹运动动画，那我们就可以使用OpenLayers实现类似echarts相同的迁徙图飞行效果。

			
		

	





	

		

			

				
					
vue使用openlayers实现移动点动画

				
			

			

				

					10-14
				

			

		

		

			
				
在Vue项目中，结合OpenLayers库实现移动点动画是一个常见的需求，这有助于为地图应用添加动态效果，例如模拟物体在地图上的移动轨迹。本示例主要讲解如何在Vue组件中设置和控制移动点动画。  首先，确保已经正确安装...

			
		

	





	

		

			

				
					
Openlayers3实现车辆轨迹回放功能

				
			

			

				

					10-14
				

			

		

		

			
				
在OpenLayers 3中实现车辆轨迹回放功能是一项常见的需求，尤其在GIS（地理信息系统）应用中。OpenLayers是一个强大的JavaScript库，它允许开发者在Web上创建交互式的地图。在这个功能中，我们将讨论如何利用...

			
		

	





	

		

			

				
					
基于Web GIS的人员运动轨迹回放技术-论文

				
			

			

				

					07-07
				

			

		

		

			
				
为解决传统的图形展示系统需同时维护2个版本的图纸、使用第三方工具导致数据关联异常、三维系统建模和维护成本高等问题,基于开源的GIS服务器GeoServer、客户端OpenLayers等工具,设计了1套将CAD快速发布成Web GIS服务...

			
		

	





	

		

			

				
					
openlayers绘制台风圈

				
			

			

				

					popstarqq的博客
				

				

					06-27
					
					1391
					
				

			

		

		

			
				
太风圈并不是圆的，因为太风圈的大小,或者说4个方向风力大小,和地形,周围气压梯度力等等有关.为了更好直观的展示出效果，所以每个方向可能不相同

1 效果 见http://xiaobaigis.com/GiSarticles/GiSArticle?ID=79

2 绘制原理

利用openlayers加载wkt的数据方法 ol.format.readFeature绘制；知道圆心坐标，然后通过半径和圆弧间隔度数，计算出所有圆上的点，依次连接即可；这里分了四个象限，如果每个象限的半径一样，那么就是圆形；全部代码.

			
		

	





	

		

			

				
					
vue利用openlayers实现动态轨迹

				
			

			

				

					sinat_40572875的博客
				

				

					11-13
					
					3215
					
				

			

		

		

			
				
事件触发一个函数，这个事件本来是地图渲染结束事件，但是它的回调函数中，小车的坐标位置一直在变，那就会不停地触发地图渲染，当然最终也会触发。gis初学者可能对openlayers（后面简称ol）不熟悉，这里暂时不介绍ol了，直接上代码，先体验下感觉。这段代码有点难理解，最好自己尝试体验下，比较难理解部分我都加上了注释。线路有了，车也有了，现在就到了激动人心的开车时刻了，接下来才是本文最核心的代码！这个上面的代码已经包括了，我这里列出来是为了让你更清晰，就是。同样的，这里的代码在上面也写过了，就是。

			
		

	





	

		

			

				
					
openlayers 入门教程（十二）：定位与轨迹

				
			

			

				

					大剑师兰特的GIS世界
				

				

					04-11
					
					2348
					
				

			

		

		

			
				
在OpenLayers中实现定位和轨迹的功能通常涉及到地图上的点标记（Marker）动态更新位置以及记录和显示轨迹路径。

			
		

	





	

		

			

				
					
OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					04-11
					
					2051
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers实现动画效果和运动轨迹动画。

			
		

	





	

		

			

				
					
openlayers：实现自定义轨迹动画（附完整源码）

				
			

			

				

					希望我的博客，能帮上你解决学习中工作中所遇到的问题
				

				

					02-06
					
					346
					
				

			

		

		

			
				
openlayers：实现自定义轨迹动画（附完整源码）

			
		

	





	

		

			

				
					
openlayers7实现导航轨迹效果

				
			

			

				

					gery1990的专栏
				

				

					01-09
					
					1289
					
				

			

		

		

			
				
基于openlayers7实现类似高德导航的路径分析效果

			
		

	





	

		

			

				
					
OpenLayers6实战，OpenLayers实现多个轨迹运动动画，各个轨迹使用不同的运动速度，运动方向根据轨迹运动方向自动转向

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					08-05
					
					744
					
				

			

		

		

			
				
本章在上一章基础上《OpenLayers实战，OpenLayers实现多个车辆运动轨迹动画和迁徙图效果，车头自动转向，方向根据轨迹方向自动转向，无需定时器》，新增各个轨迹使用不同的运动速度，允许每条轨迹都可以自定义运动速度，快慢任意调整。

			
		

	





	

		

			

				
					
vue openlayers实现台风轨迹

				
			

			

				

					08-23
				

			

		

		

			
				
Vue是一种流行的JavaScript框架，用于构建用户界面。OpenLayers是一个开源的JavaScript库，用于在web浏览器中显示交互式地图。结合Vue和OpenLayers，我们可以实现台风轨迹的可视化。

首先，我们需要获取台风的相关数据。可以从台风数据的API或其他数据源中获取实时或历史台风数据。数据通常包含台风的经纬度坐标和其他相关信息，如风力、风速等。

在Vue组件中，我们可以使用OpenLayers来显示地图。首先，在Vue组件中引入OpenLayers库，并在Vue的生命周期钩子中初始化地图。可以使用OpenLayers的地图视图类（MapView）来设置地图的中心坐标和缩放级别。

接下来，我们需要将台风的轨迹数据添加到地图上。可以使用OpenLayers的矢量图层（Vector Layer）来添加台风轨迹。将每个台风点的经纬度坐标转换为OpenLayers的几何对象，并将其添加到矢量图层中。

为了使台风轨迹更具交互性，可以在每个台风点上添加弹出窗口，显示该点的详细信息。可以使用OpenLayers的弹出窗口类（Overlay）和交互类（Interaction）来实现这一功能。

最后，根据需求，可以添加其他地图元素，如底图切换、比例尺、图例等，以增强用户体验。

总之，使用Vue和OpenLayers，我们可以方便地将台风轨迹可视化，并提供交互功能。这种方式可以帮助用户更直观地了解台风的路径和特征，从而提高对台风的认知和应对能力。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值