vue3-openlayers 轨迹回放(历史轨迹)(ol-animation-path实现)
本篇介绍一下使用vue3-openlayers轨迹回放(历史轨迹)(ol-animation-path实现)
1 需求
- 轨迹回放(历史轨迹)
- 实时轨迹
2 分析
- 轨迹回放(历史轨迹),一般是一次性拿到所有坐标点,使用ol-animation-path可以直接实现
3 实现

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" /><ol-tile-layer><ol-source-tianditulayerType="img":projection="projection":tk="key":hidpi="true"ref="sourceRef"></ol-source-tianditu></ol-tile-layer><ol-tile-layer><ol-source-tianditu:isLabel="true"layerType="img":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer><ol-vector-layer><ol-source-vector><ol-feature ref="animationPath"><ol-geom-line-string :coordinates="data"></ol-geom-line-string><ol-style-flowlinecolor="rgba(228, 147, 87, 1)"color2="rgba(228, 64, 0, 1)":width="10":width2="10":arrow="1"/></ol-feature><ol-animation-pathref="pathRef"v-if="animationPath":path="animationPath?.feature":duration="4000":repeat="0":speed="0.005"><ol-feature><ol-geom-point :coordinates="data[0]"></ol-geom-point><ol-style :zIndex="10"><ol-style-icon :src="iconSrc" :width="30" :height="30" :rotation="angle"></ol-style-icon></ol-style></ol-feature></ol-animation-path></ol-source-vector></ol-vector-layer></ol-map>
</template><script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替换为天地图key';
const sourceRef = ref(null);
const animationPath = ref(null);
const pathRef = ref(null);
const data = ref([[110, 30],[110.2, 30],[110.4, 30.2],[110.8, 30.4],[111, 31],[111.3, 31],[111.6, 31],[111.9, 31],[112, 31],[112.3, 31],[112.5, 31],[112.8, 31],[113, 31],[114, 31],[115.3, 32],[115.5, 32],[115.8, 31.8],[116, 31.4],[116.2, 31.1],[116.5, 30.5],[115, 30.2],[114, 29.8],[113, 29.6],[112, 29.4],[111, 30.2],[110, 30.4],[109, 30.6],[108, 31]
]);
const angle = ref(0);
</script>
<style scoped lang="scss"></style>
speed不存在时会取duation的值(二者存一即可,都存在,speed优先)
4 总结
- 动画比使用定时器丝滑
- 拖拉机图标旋转角度不好根据path进行动态修改
相关文章:
vue3-openlayers 轨迹回放(历史轨迹)(ol-animation-path实现)
本篇介绍一下使用vue3-openlayers轨迹回放(历史轨迹)(ol-animation-path实现) 1 需求 轨迹回放(历史轨迹)实时轨迹 2 分析 轨迹回放(历史轨迹),一般是一次性拿到所有…...
计算机视觉全系列实战教程 (十二):图像分割(阈值分割threshold、分水岭算法watershed的使用步骤、洪水填充floodFill算法的使用)
1.图像分割概述 (1)What(什么是图像分割) 将图像划分为不同的子区域,使得同一子区域具有较高的相似性,不同的子区域具有明显的差异性 (2)Why(对图像进行分割有什么作用) 医学领域:将不同组织分割成不同区域帮助分析病情军事领域ÿ…...
Linux的免交互
交互:我们发出指令控制程序的运行,程序在接收到指令之后按照指令的效果做出对应的反应。 免交互:间接的通过第三方的方式把指令传送给程序,不用直接的下达指令。 1、here document免交互 ere document免交互:是命令…...
查看es p12证书文件过期方法
查看证书过期时间: openssl pkcs12 -in elastic-certificates.p12 -nokeys -out elastic-certificates.crt (需要输入证书生成时配置密码) openssl x509 -enddate -noout -in elastic-certificates.crt...
1.8 无符号大数加、减运算
作者 李卫明 单位 杭州电子科技大学 1.8 无符号大数加、减运算。程序设计中经常遇到无符号大数加、减运算问题,请在样例程序Ex1.4基础上实现无符号大数减运算。题目要求输入两个无符号大数,保证一个大数不小于第二个大数,输出它们的和、差。…...
Java常用类--包装类
包装类 一方面出于性能方面的考虑,java为数值使用基本类型,而不是对象。基本类型不是对象层次的组成部分,它们不继承Object。 另一方面有时需要创建表示基本类型的对象,例如集合类只处理对象。为了在类中存储基本类型,…...
SpringMvcの拦截器全局异常处理
一、拦截器 我们在网上发贴子的时候如果没有登录,点击发送按钮会提示未进行登录,跳转到登录页面。这样的功能是如何实现的。 1、 拦截器的作用 Spring MVC 的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理…...
JVM虚拟机的组成
一、为什么要学习 JVM ? 1. “ ⾯试造⽕箭,⼯作拧螺丝” , JVM 属于⾯试官特别喜欢提问的知识点; 2. 未来在⼯作场景中,也许你会遇到以下场景: 线上系统突然宕机,系统⽆法访问,甚⾄直…...
探索CSS clip-path: polygon():塑造元素的无限可能
在CSS的世界里,clip-path 属性赋予了开发者前所未有的能力,让他们能够以非传统的方式裁剪页面元素,创造出独特的视觉效果。其中,polygon() 函数尤其强大,它允许你使用多边形来定义裁剪区域的形状,从而实现各…...
【华为OD机试B卷】单词接龙(C++/Java/Python)
题目 题目描述 单词接龙的规则是: 可用于接龙的单词首字母必须要前一个单词的尾字母相同;当存在多个首字母相同的单词时,取长度最长的单词,如果长度也相等,则取字典序最小的单词;已经参与接龙的单词不能重复使用。现给定一组全部由小写字母组成单词数组,并指定其中的一个…...
项目实训-vue(十七)
项目实训-vue(十七) 文章目录 项目实训-vue(十七)1.概述2.问诊类型3.问诊时间统计4.看诊时间统计 1.概述 本篇博客将记录我在数据统计页面中的工作。因为项目并未实际运行,因此我们拟定了一些数据,并构建了…...
Android10 SystemUI系列 需求定制(二)隐藏状态栏通知图标,锁屏通知,可定制包名,渠道等
一、前言 SystemUI 所包含的界面和模块比较多,这一节主要分享一下状态栏通知图标和通知栏的定制需求:隐藏状态栏通知图标,锁屏通知,可定制包名,渠道等 来熟悉一下Systemui。 二、准备工作 按照惯例先找到核心类。这里提前说一下,这个需求的修改方法更多,笔者这里也只…...
Linux:RAID磁盘阵列
目录 一、RAID(磁盘阵列) 1.1、概念 1.2、RAID 0(条带化存储) 1.3、RAID 1(镜像存储) 1.4、RAID 5 1.5、RAID 6 1.6、RAID 10 (先做镜像,再做条带) 二、创建RAID 2.1、建立RAID 0 …...
MongoDB和AI 赋能行业应用:零售
欢迎阅读“MongoDB 和 AI 赋能行业应用”系列的第三篇。 本系列重点介绍 AI 应用于不同行业的关键用例,涵盖制造业和汽车行业、金融服务、零售、电信和媒体、保险以及医疗保健行业。 利用生成式 AI 技术(Gen AI),零售商可以创造…...
MQ~消息队列能力、AMQP协议、现有选择(Kafka、RabbitMQ、RocketMQ 、Pulsar)
消息队列 消息队列看作是一个存放消息的容器,当我们需要使用消息的时候,直接从容器中取出消息供自己使用即可。由于队列 Queue 是一种先进先出的数据结构,所以消费消息时也是按照顺序来消费的。 常⽤的消息队列主要这 五 种,分别…...
开源网安参与编制的《代码大模型安全风险防范能力要求及评估方法》正式发布
代码大模型在代码生成、代码翻译、代码补全、错误定位与修复、自动化测试等方面为研发人员带来了极大便利的同时,也带来了对安全风险防范能力的挑战。基于此,中国信通院依托中国人工智能产业发展联盟(AIIA),联合开源…...
【树状数组 队列】1505. 最多 K 次交换相邻数位后得到的最小整数
本文涉及知识点 树状数组 队列 LeetCode1505. 最多 K 次交换相邻数位后得到的最小整数 给你一个字符串 num 和一个整数 k 。其中,num 表示一个很大的整数,字符串中的每个字符依次对应整数上的各个 数位 。 你可以交换这个整数相邻数位的数字 最多 k 次…...
【附精彩文章合辑】当谈到程序的“通用性”与“过度设计”的困境时,我们可以通过一些具体的例子来更直观地阐述这些解决方案
当谈到程序的“通用性”与“过度设计”的困境时,我们可以通过一些具体的例子来更直观地阐述这些解决方案。以下是一些示例: 一、明确需求与目标 例子1:在线购物平台 需求分析:平台需要支持用户注册、登录、浏览商品、下单购买、…...
Word中删除空白页
① 文字后面出现的空白页 把鼠标放在空白页的位置,按住Ctrl Delete即可。 ② 表格后面的空白页 把鼠标放在空白页左侧,直到出现一个空白的箭头,点击一下选中空白页,然后再Ctrl D,打开字体选项卡,在效果中…...
30.Netty进阶-黏包半包解决方案-短链接
客户端发送一次完整的消息,然后就把与服务端的链接断开。服务端读到的结果就是-1。 服务器就知道 从链接建立到断开,发送的数据是一条完整的数据。 客户端代码 package com.xkj.nian;import io.netty.bootstrap.Bootstrap; import io.netty.buffer.ByteBuf; import io.net…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
