Vue和OpenLayers地图上实现Echarts模拟飞机循环飞行

最新推荐文章于 2024-06-07 23:45:00 发布
最新推荐文章于 2024-06-07 23:45:00 发布
阅读量450 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js echarts 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/132648844
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何结合Vue.js、OpenLayers和Echarts在WebGIS应用中实现地图上的飞机循环飞行效果。通过创建Vue项目，配置地图组件，添加飞机图层，设置Echarts图表，以及实现飞行动画，详细阐述了实现这一功能的步骤和技术要点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue和OpenLayers地图上实现Echarts模拟飞机循环飞行

近年来，WebGIS（Web地理信息系统）技术的发展使得在网页上展示和操作地理空间数据变得更加容易。Vue.js作为一种流行的JavaScript框架，提供了便捷的开发方式，而OpenLayers是一个功能强大的开源地图库，可以实现各种地图应用需求。本文将介绍如何使用Vue和OpenLayers结合Echarts来实现地图上模拟飞机循环飞行效果。

一、准备工作
首先，我们需要创建一个Vue项目，并安装必要的依赖。打开命令行，执行以下命令：

vue create vue-openlayers-flight
cd vue-openlayers-flight
npm install ol echarts

以上命令将创建一个名为vue-openlayers-flight的Vue项目，并安装OpenLayers和Echarts依赖。

二、配置地图组件
在src/components目录下创建一个名为Map.vue的组件文件，并添加以下内容：


                

                
                
        

    

  


        

            

                

                

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

        


    



                



	

		

			

				
					
openlayers 飞线动画 沿线运动 飞线 迁徙图

				
			

			

				

					qq_36287830的博客
				

				

					02-27
					
					2229
					
				

			

		

		

			
				
openlayers 飞线 迁徙图 沿线运动 动画 行政区划

			
		

	



                

            
              



	

		

			

				
					
158：vue+openlayers 地图上Echarts模拟飞机循环飞行

				
			

			

				

					大剑师兰特的GIS世界
				

				

					10-23
					
					1303
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中添使用Echarts的模拟飞机飞行，借助于一个插件ol-echarts可以加载Echarts相关的配置，关键点是要将坐标点给设置上去，详情请参考源代码。点击查看本专栏内容目录列表。

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers6入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置

				
			

			

				

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

				

					08-09
					
					1173
					
				

			

		

		

			
				
本章实现OpenLayers视图飞行动画，根据经纬度和动画持续时长，飞行到指定地图位置。《Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位》

			
		

	





	

		

			

				
					
Openlayer飞行视图flyTo,viewTo

				
			

			

				

					
				

				

					09-10
					
					1954
					
				

			

		

		

			
				
一、view.animate()


    this.map.getView().animate({
      center: [104.08033177398742, 31.128669413488353],
      zoom: 17,
      duration: 1000,
    });

二、view.fit(geometry,options)


    flyToCurrentViewByGeometry(geometry) {
      this.map.getView().fi

			
		

	



		

			
		



	

		

			

				
					
数据可视化ECharts:中国地图模拟飞行模块

				
			

			

				

					薛定谔的猫
				

				

					11-05
					
					1054
					
				

			

		

		

			
				
原先是用ECharts自带的社区做的，但是现在在新版已经没有了，然后我又找到了一个相似的。- 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入。- 修改地图省份背景  #142957  areaColor 里面做修改。- 第一需要下载china.js提供中国地图的js文件。- 地图放大通过  zoom   设置为1.2即可。- 使用社区提供的配置即可。

			
		

	





	

		

			

				
					
Openlayers6.5 实现轨迹回放

				
			

			

				

					weixin_43864599的博客
				

				

					01-16
					
					1341
					
				

			

		

		

			
				
官网列子
import Feature from 'ol/Feature'
import LineString from 'ol/geom/LineString'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import { Style, Circle as CircleStyle, Icon, Stroke, Fill } from 'ol/style'
import Point

			
		

	





	

		

			

				
					
使用Vue和OpenLayers在地图上模拟飞机循环飞行

				
			

			

				

					TechNovaX的博客
				

				

					09-15
					
					392
					
				

			

		

		

			
				
在这篇文章中，我们将使用Vue和OpenLayers库来创建一个实时模拟飞机在地图上循环飞行的效果。本文中，我们使用Vue和OpenLayers库创建了一个实时模拟飞机循环飞行的效果。我们创建了一个简单的OpenLayers地图，以OSM图层作为底图，并将地图中心设置为经纬度[0, 0]，缩放级别为2。现在，我们可以运行Vue项目以查看飞机在地图上循环飞行的效果。数组包含飞机的经纬度坐标点，用于模拟飞机的循环飞行路径。在这一步中，我们将使用定时器来模拟飞机的循环飞行。在上面的代码中，我们使用Vue的。

			
		

	





	

		

			

				
					
openlayers全面教程290+【目录】

					
热门推荐

				
			

			

				

					大剑师兰特的GIS世界
				

				

					09-05
					
					2万+
					
				

			

		

		

			
				
vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中，解释相应的API知识点。

			
		

	





	

		

			

				
					
vue+echarts实现中国地图和航线飞行效果

				
			

			

				

					2301_78767322的博客
				

				

					03-26
					
					1569
					
				

			

		

		

			
				
vue+echarts实现中国地图和航线飞行效果

			
		

	





	

		

			

				
					
129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值

				
			

			

				

					大剑师兰特的GIS世界
				

				

					09-07
					
					1381
					
				

			

		

		

			
				
openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。

			
		

	





	

		

			

				
					
Vue Echarts飞机航线图

				
			

			

				

					qq_42683219的博客
				

				

					05-27
					
					1万+
					
				

			

		

		

			
				
声明本案例来着官方案例航线图
效果图

步骤

①：文件导入
②：基本配置
③：图标配置
④：生成结果

①：文件导入
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/china.js"></script>
    <script src="../../js/vue.js"></script>

②：基本配置
let kinghi

			
		

	





	

		

			

				
					
5、openlayers6加载飞行轨迹

				
			

			

				

					qq_41939902的博客
				

				

					10-09
					
					1116
					
				

			

		

		

			
				
<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import { Vector as Vecto

			
		

	





	

		

			

				
					
openlayers之轨迹回放（附加暂停、继续播放功能）

				
			

			

				

					我灰灰凭啥输
				

				

					04-08
					
					6012
					
				

			

		

		

			
				
效果图

老规矩，直接上代码，已经把该备注的都备注好了（可直接复制查看）
	<div id="map"></div>
	<label for="speed">
	    speed:&nbsp;
	    <input id="speed" type="range" min="10" max="999" step="10" value="60">
	</label>
	<button id="start-animation">S

			
		

	





	

		

			

				
					
openlayer画线显示移动轨迹

				
			

			

				

					孤独旋转的博客
				

				

					02-01
					
					2624
					
				

			

		

		

			
				
画线：使用包`ol/interaction/Draw`
显示移动轨迹：通过定时器不停的移动元素feature，在拐角的地方转动图片的角度（只要设置的时间够短，就不会卡顿），位移的距离和转动的角度根据点与点之间的像素来计算（不推荐用他们的经纬度计算，因为地球是圆的，画的线是直的）。

			
		

	





	

		

			

				
					
openlayers 路径动画 运动轨迹

				
			

			

				

					weixin_39520640的博客
				

				

					09-01
					
					3230
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
vue 关于飞行地图展示的功能

				
			

			

				

					weixin_46582034的博客
				

				

					08-28
					
					1510
					
				

			

		

		

			
				
vue  关于飞行地图的展示前言一、飞行地图 是什么？二、使用步骤1.引入库2.页面展示代码3.相关js总结

前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考
一、飞行地图 是什么？
类似于物流信息的那种，可以将物品的物流信息 进行更直观的展示。

二、使用步骤
1.引入库
代码如下（示例）：
import echarts from 'e

			
		

	





	

		

			

				
					
openlayer二维地图动态飞行定位视角

				
			

			

				

					lingyi_01的博客
				

				

					08-04
					
					881
					
				

			

		

		

			
				
var view = map.getView();

// 设置地图中心的坐标
view.animate({
//中心位置
    center : ol.proj.transform([ lon, lat ], 'EPSG:4326','EPSG:3857')
}, {
//缩放
    zoom : 12
}, {
//飞行样式   linear匀速飞行
    easing : 'linear'
})




			
		

	





	

		

			

				
					
四十二、openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果

					
最新发布

				
			

			

				

					aaa_div的博客
				

				

					06-07
					
					925
					
				

			

		

		

			
				
绘制线的思路是取坐标数组的第0个到第n个，每毫秒绘制不同的线。绘制点的思路则是直接取第n个点，每毫秒绘制不同的点，并且在n大于等于坐标数组之后又让n重新等于0，以此来实现循环的动画。因为图标需要随着航线的方向飞行，需要根据航线调整角度，因此在加载数据源的时候需要计算一下角度，绑在每个feature上。在航线绘制完成之后，添加一个飞机动画开始执行的标识flight，给feature设置一个初始的index值。上篇在地图上绘制了动态的飞机航线，于是我想着，能不能加个飞机的图标跟着航线飞行。

			
		

	





	

		

			

				
					
openlayers 实现轨迹播放、框选、mark交互等功能

				
			

			

				

					shengandshu的博客
				

				

					05-06
					
					2569
					
				

			

		

		

			
				
基于项目需求二次封装了openlayers。

插件地址：https://github.com/ShengAndShu/ol-map。可以下载到本地查看代码实现和demo。


git clonehttps://github.com/ShengAndShu/shengandshu.github.io.git

cd ol-map

npm install

npm run dev


轨迹播放
...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值