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进行动态修改

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/860213.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

功能测试【测试用例模板、Bug模板、手机App测试★】

功能测试 Day01 web项目环境与测试流程、业务流程测试一、【了解】web项目环境说明1.1 环境的定义&#xff1a;项目运行所需要的所有的软件和硬件组合1.2 环境(服务器)的组成&#xff1a;操作系统数据库web应用程序项目代码1.3 面试题&#xff1a;你们公司有几套环境&#xff1…

淘宝用户行为分析大数据可视化

文章目录 1. 项目概述2. 技术栈3. 目录结构4. 数据处理流程5. 前端部分5.1 HTML (index.html)5.2 CSS (layer.css)5.3 JavaScript (chart.js) 6. 后端部分7. 数据可视化7.1 ECharts 图表 8. 主要功能模块9. 代码解析10. 数据接口11. 项目功能描述12. 代码功能实现12.1 HTML (in…

Kubernetes 中 ElasticSearch 中的 MinIO 审核日志

无论您是在本地还是在云中&#xff0c;您都希望确保以同构的方式设置工具和流程。无论在何处访问基础结构&#xff0c;您都希望确保用于与各种基础结构进行交互的工具与其他区域相似。 考虑到这一点&#xff0c;在部署您自己的 MinIO 对象存储基础架构时&#xff0c;深入了解您…

无需 AU 专业工具,简单有效的人声分离操作图文教程来了

音乐制作与音频编辑已成为众多创意工作者不可或缺的一部分。无论是制作混音、进行音乐分析&#xff0c;还是为视频内容寻找完美的配音&#xff0c;人声分离技术都扮演着至关重要的角色。 传统上&#xff0c;这样的任务可能需要专业的音频编辑软件如 Adobe Audition&#xff08…

【算法面试】在排序数组中查找元素的第一个和最后一个位置:详细题解

目录 题目描述 示例 示例 1&#xff1a; 示例 2&#xff1a; 示例 3&#xff1a; 问题分析 详细步骤 解决方法 方法 1&#xff1a;标准二分查找&#xff08;分开查找第一个和最后一个&#xff09; 方法 2&#xff1a;优化版二分查找&#xff08;合并查找逻辑&#xf…

热电发电机越来越受到研发关注

热电发电机 (TEG) 利用热量&#xff08;或更准确地说&#xff0c;温差&#xff09;和众所周知的塞贝克效应来发电。它们的应用范围从收集可用热能&#xff0c;尤其是在工业和其他情况下“浪费”的热能&#xff0c;到在放射性同位素热发电机 (RTG) 中使用航天器的放射性电源作为…

【docker】2. 编排容器技术发展史(了解)

该篇文章介绍的主要是编排以及容器技术的发展史(了解即可)&#xff0c;如果想单纯学习docker命令操作可直接略过&#xff01;&#xff01;&#xff01; 容器技术发展史 Jail 时代 容器不是一个新概念或者新技术&#xff0c;很早就有了&#xff0c;只是近几年遇到了云计算&am…

mac单机游戏推荐:帝国时代2 for Mac中文安装包

帝国时代2是一款经典的即时战略游戏&#xff0c;由微软游戏工作室开发。玩家可以选择从欧洲、亚洲或美洲的不同文明开始游戏&#xff0c;建立自己的帝国并与其他文明进行战争、贸易和外交。游戏中包含了丰富的历史背景和真实的历史事件&#xff0c;玩家需要策略性地管理资源、招…

【机器学习】ChatTTS:开源文本转语音(text-to-speech)大模型天花板

目录 一、引言 二、TTS&#xff08;text-to-speech&#xff09;模型原理 2.1 VITS 模型架构 2.2 VITS 模型训练 2.3 VITS 模型推理 三、ChatTTS 模型实战 3.1 ChatTTS 简介 3.2 ChatTTS 亮点 3.3 ChatTTS 数据集 3.4 ChatTTS 部署 3.4.1 创建conda环境 3.4.2 拉取源…

Java项目毕业设计:基于springboot+vue的幼儿园管理系统

数据库:MYSQL5.7 **应用服务:Tomcat7/Tomcat8 使用框架springbootvue** 项目介绍 管理员&#xff1b;首页、个人中心、用户管理、教师管理、幼儿信息管理、班级信息管理、工作日志管理、会议记录管理、待办事项管理、职工考核管理、请假信息管理、缴费信息管理、幼儿请假管理…

【漏洞复现】极限OA video_file.php 任意文件读取漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

开源最强AI一键抠图一键去背景模型RMBG-1.4

目录 前言训练数据图像分布&#xff1a;定性评估 应用场景安装用法 前言 RMBG v1.4 是BRIA AI最先进的背景去除模型&#xff0c;旨在有效地将各种类别和图像类型的前景与背景分开。该模型已在精心选择的数据集上进行训练&#xff0c;其中包括&#xff1a;一般库存图片、电子商…

疲劳驾驶智能识别摄像机

疲劳驾驶智能识别摄像机在道路安全管理中扮演着越来越重要的角色。这些先进的设备不仅仅是简单的监控工具&#xff0c;它们通过先进的技术和算法&#xff0c;有效地识别和预防司机疲劳驾驶&#xff0c;从而大大减少了交通事故的风险。 首先&#xff0c;这些智能识别摄像机采用高…

2024年希望杯数学竞赛各年级100道练习题及答案

链接里面有无答案版本链接&#xff1a;https://pan.baidu.com/s/1nTIVJrTEWUzb0LJNo4mI_Q 提取码&#xff1a;0548 –来自百度网盘超级会员V7的分享 一年级 二年级 三年级 四年级 五年级 六年级 七年级 八年级

【博士每天一篇文献-算法】Fearnet Brain-inspired model for incremental learning

阅读时间&#xff1a;2023-12-16 1 介绍 年份&#xff1a;2017 作者&#xff1a;Ronald Kemker&#xff0c;美国太空部队&#xff1b;Christopher Kanan&#xff0c;罗切斯特大学 期刊&#xff1a; arXiv preprint 引用量&#xff1a;520 Kemker R, Kanan C. Fearnet: Brain-…

基于Java中的SSM框架实现萌宠优购系统项目【项目源码】计算机毕业设计

基于Java中的SSM框架实现萌宠优购系统演示 研究背景 现在人们在生活中、工作中压力与日俱增&#xff0c;而宠物也在人们的生活扮演者越来越重要的角色。然而&#xff0c;对于一些宠物爱好者来说&#xff0c;宠物早已经是他们生活中不可或缺的一部分。因为宠物能与人有心灵的沟…

计算机进入安全模式

最近老是蓝屏------显示是REGISTRY_ERROR&#xff08;注册表错误&#xff09; 重启之后选择进入安全模式 我重启之后&#xff0c;按F8进不了安全模式。通过另一种方式进入&#xff0c;按住Shift键再按重启 重启之后出现以下界面 选择疑难解答&#xff0c;再选择高级选项 在高…

20240623日志:大模型压缩-sliceGPT

context 1. 剪枝方案图释2. 正交矩阵Q 1. 剪枝方案图释 Fig. 1.1 剪枝方案 图中的阴影是表示丢弃掉这部分数据。通过引入正交矩阵 Q Q Q使 Q ⊤ Q Q Q ⊤ I \mathrm{Q}^\top\mathrm{Q}\mathrm{Q}\mathrm{Q}^\top\mathrm{I} Q⊤QQQ⊤I&#xff0c;来大量缩减 X X X的列数和 W …

androidx.preference框架介绍

一,概要 Preference作为setting核心框架,笔者对此框架做一个简单的解析,androidx.preference本质是对设置领域提供了一层View封装,以android view本身的策略模式进行二次开发,将常用的一些设置样式封装到不同的Preference中,以达到快速开发设置相关功能。并且,此风格与…

将 MinIO 与 Keycloak OIDC 集成

Keycloak是一种单点登录解决方案。使用Keycloak&#xff0c;用户使用Keycloak而不是MinIO进行身份验证。如果没有Keycloak&#xff0c;您将不得不为每个用户创建一个单独的身份 - 从长远来看&#xff0c;这将很麻烦。您需要一个集中身份解决方案来管理 MinIO 的身份验证和授权。…