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

已于 2024-05-12 13:12:04 修改
阅读量1k 收藏 26
点赞数 26
分类专栏： # openlayers综合教程300+ 文章标签： echarts openlayers示例 openlayers 大剑师
于 2022-10-23 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/127451807
版权
openlayers综合教程300+ 专栏收录该内容
285 篇文章 210 订阅 ¥259.90 ¥399.90
订阅专栏
本文由GIS领域的高级前端工程师分享，展示了如何在Vue+OpenLayers地图上利用Echarts实现飞机循环飞行的效果。通过ol-echarts插件结合Echarts配置，详细介绍了实现步骤和源代码，提供基础设置链接和相关文章参考。
摘要由CSDN通过智能技术生成

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 158个示例

文章目录

一、示例效果图

在这里插入图片描述

二、示例简介

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

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
专栏目录
订阅专栏
157：vue+openlayers 地图上添加Echarts饼图
大剑师兰特的GIS世界
10-22 530
本示例的目的是介绍演示如何在vue+openlayers中添加Echarts的饼图，借助于一个插件ol-echarts可以加载Echarts相关的配置，关键点是要将坐标点给设置上去，详情请参考源代码。点击查看本专栏内容目录列表。
273：vue+openlayers 显示流动轨迹并计算航向
大剑师兰特的GIS世界
07-04 1137
本示例介绍如何在vue+openlayer中显示流动轨迹并计算航向。这里要注意角度和弧度的转换，并且以正北为主方向，做不同的转变。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果**
vue+openlayers简单示例
10-19
一个Vue与Openlayers结合的应用示例，以组件的方式在Vue中使用openlayers地图，以及可以进行简单的地图配置
四十二、openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果
aaa_div的博客
06-07 436
绘制线的思路是取坐标数组的第0个到第n个，每毫秒绘制不同的线。绘制点的思路则是直接取第n个点，每毫秒绘制不同的点，并且在n大于等于坐标数组之后又让n重新等于0，以此来实现循环的动画。因为图标需要随着航线的方向飞行，需要根据航线调整角度，因此在加载数据源的时候需要计算一下角度，绑在每个feature上。在航线绘制完成之后，添加一个飞机动画开始执行的标识flight，给feature设置一个初始的index值。上篇在地图上绘制了动态的飞机航线，于是我想着，能不能加个飞机的图标跟着航线飞行。
Echarts飞线图demo
最新发布
amber_1210的博客
07-22 277
公司大屏项目需要完成一个含有飞线图功能的地图，经过查询资料借鉴，写了一个区的demo。1、准备数据,因为我是画的区县地图，所以得自己去找数据。3、确定飞线图的中心点位。4、确定飞线图的样式。
Echart在Openlayers的应用
weixin_30851867的博客
07-21 301
概述echart，一个由百度前端发起的canvas国产类库（官网：http://echarts.baidu.com/index.html）。echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游等功能，不论是从使用便捷程度、美观程度等方面都是不错的选择，在本文讲述如何在Openlayers中结合echart实...
Echarts 模拟飞机飞行动态图
weixin_42414313的博客
02-01 2646
引进 echart.min.js 存储经纬度坐标至 对象 googleMap var googleMap = { // 由键/值对组成：位置名称/经纬度坐标 上海: [121.4648, 31.2891], 东莞: [113.8953, 22.901], 东营: [118.7073, 37.5513], 中山: [113.4229, 22.478], ...... } 3.定义起点终点（数量，名称）至对象 - XAData var XAData
5、openlayers6加载飞行轨迹
qq_41939902的博客
10-09 976
<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
vue中利用Echarts实现飞线（飞机）地图样式
qq_44727672的博客
08-25 2930
vue中利用Echarts实现飞线地图样式
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
echarts 飞机模式迁徙图
08-24
完整的echarts飞机模式的迁徙图，下载下来直接可以运行，可以省去您很多研究的时间。
095：vue+openlayers 地图上添加网格线 （示例代码）
大剑师兰特的GIS世界
08-27 1107
本示例的目的是介绍如何在openlayers中使添加使用网格线，实现区划块的效果。
006: vue+openlayers加载baidu地图的示例
大剑师兰特的GIS世界
08-08 1229
本示例的目的是介绍演示如何在vue+openlayers中添加百度地图。
当前最新版本Echart结合Openlayers 航班动态效果
欢乐的小树的博客
07-06 5152
openlayers_echart 最新版的OpenLayers与最新的ECharts相结合，实现了将ECharts中的地图换成OpenLayers的地图。 ES6使用方法： 下载项目目录中js文件：openlayers_echart/src/openlayers.echart.js 在自己的js文件中添加： import ADLayer from 'openlayers.ec...
openlayer的飞行动画
梧桐芊羽的博客
03-19 817
openlayer飞行动画demo
Openlayer飞行视图flyTo,viewTo
09-10 1643
一、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实现飞机飞往各地
u011013840的博客
05-04 447
【代码】echarts实现飞机飞往各地。
echarts 绘制 地图飞机路线
热门推荐
dongcehao的博客
07-05 2万+
1 converData (data) { 2 let res = [] 3 for (let i = 0; i &lt; data.length; i ++) { 4 let dataItem = data[i] 5 // 获取 来去 地址的 经纬度 6 let fromCoord = this.geoCoord[d...
openlayers 使用echarts
qq_38000851的博客
11-28 1693
echarts 中提供了很多的图标和特效，这正好弥补了不会写图表的我，加上地图上功能的需要，所以采用了ol3Echarts作为扩展 git地址：https://github.com/sakitam-fdd/ol3Echarts 该扩展插件已经能满足大多数的要求了，具体的代码和实现可以参考git中的项目。但是该项目在对6.4版本好像存在一些bug 经过测试和使用，的确存在该问题 暂时找到的解决办法是，下载ol-echarts的js文件，找到代码中的mockEvent中的 event.originalEven
049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
06-06
Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码： ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。 接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下： ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。 最后，我们需要在模板中添加一个 div 元素，用于显示城市名片： ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值