uniapp结合Canvas+renderjs根据经纬度绘制轨迹(二)

uniapp结合Canvas+renderjs根据经纬度绘制轨迹

文章目录

    • uniapp结合Canvas+renderjs根据经纬度绘制轨迹
      • 效果图
      • template
      • renderjs
      • js
      • 数据结构


  • 根据官方建议要想在 app-vue 流畅使用 Canvas 动画,需要使用 renderjs 技术,把操作canvas的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。
  • 这里呢结合 renderjs 技术实现绘制轨迹图形。

你可能需要先了解renderjs如何数据通讯:renderjs 与 app-vue之间数据交互

html中使用canvas根据经纬度绘制轨迹


效果图

在这里插入图片描述


template

  • coordsAll 监听数据变化,只要 coordsAll 数据改变,就是触发 initData 方法。
 <template><view class="map-track-wrap"><!-- xxx --><view class="track-list" :prop="coordsAll" :change:prop="canvas.initData"><!-- xxx --><view class="d-flex canvas-box"><canvas class="canvas" :class="`canvas${index}`"></canvas></view></view></view>
</template>

renderjs

<script module="canvas" lang="renderjs">export default {methods: {initData() {for (let i = 0; i < this.coordsAll.length; i++) {// 绘制图形this.draw(this.coordsAll[i], i);}},draw(locationList, idx) {let canvasHeight = 72,canvasWidth = 72,canvasEle = document.querySelectorAll(`.canvas${idx}>canvas`)[0],ctx = canvasEle.getContext('2d'),amuXArr = [],amuYArr = []for (let i = 0; i < locationList.length; i++) {amuXArr.push(locationList[i].lat);amuYArr.push(locationList[i].lng);}amuYArr = amuYArr.map((item) => {return item * -1;});let xMax = Math.max(...amuXArr);let xMin = Math.min(...amuXArr);let yMax = Math.max(...amuYArr);let yMin = Math.min(...amuYArr);let xScale = canvasWidth / (xMax - xMin);let yScale = canvasHeight / (yMax - yMin);let scale = xScale < yScale ? xScale : yScale;let xoffset = (canvasWidth - (xMax - xMin) * scale) / 2;let yoffset = (canvasHeight - (yMax - yMin) * scale) / 2;ctx.save(); // 保存状态ctx.translate(0, canvasHeight);ctx.rotate(-Math.PI / 2);ctx.beginPath();// 根据偏移量移动点位并画图ctx.moveTo((amuXArr[0] - xMin) * scale + xoffset,(yMax - amuYArr[0]) * scale + yoffset);for (let i = 1; i < amuXArr.length; i++) {ctx.lineTo((amuXArr[i] - xMin) * scale + xoffset,(yMax - amuYArr[i]) * scale + yoffset);}ctx.strokeStyle = '#1FE298';ctx.stroke();ctx.restore(); // 恢复状态}}}
</script>

js

  • renderjs中不支持uni.request,所以请求后台获取数据操作在script中进行,然后监听参数变化,将参数传递过来进行渲染。
searchList() {      	// 处理数据let list = this.dataList;if (list.length > 0) {for(let i = 0; i < list.length; i++) {let tmpLocation = list[i].locations;// 页面监听 coordsAll,把数据传递renderjs,会触发 initData 方法this.coordsAll.push(JSON.parse(tmpLocation));}}
}

数据结构

  • 测试数据,具体根据个人所需处理数据
[{locations: [{"lng": 113.980502,"lat": 22.54161},{"lng": 113.972839,"lat": 22.533976},{"lng": 113.98925,"lat": 22.524669},{"lng": 113.990034,"lat": 22.537097},{"lng": 114.00916,"lat": 22.534477}]},{locations: [{"lng": 113.924271,"lat": 22.537654},{"lng": 113.9367,"lat": 22.532806},{"lng": 113.928494,"lat": 22.518594},{"lng": 113.942673,"lat": 22.524502},{"lng": 113.944302,"lat": 22.538601}]},{locations: [{"lng": 113.98049,"lat": 22.54301},{"lng": 114.06374,"lat": 22.51134},{"lng": 114.06259,"lat": 22.50951},{"lng": 114.06178,"lat": 22.51031},{"lng": 113.96047,"lat": 22.54611}]}
]

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

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

相关文章

Python爬虫框架之Selenium库入门:用Python实现网页自动化测试详解

概要 是否还在为网页测试而烦恼&#xff1f;是否还在为重复的点击、等待而劳累&#xff1f;试试强大的Selenium&#xff01;让你的网页自动化测试变得轻松有趣&#xff01; 一、Selenium库到底是什么&#xff1f; Selenium 是一个强大的自动化测试工具&#xff0c;它可以让你直…

华为 连接OSPF和RIP网络---OSPF和RIP网络相互引入

路由引入简介 不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路由的引入来实现。 获得路由信息一般有3种途径&#xff1a;直连网段、静态配置和路由协议。可以将通过这3种途径获得的路由信息引入到路由协议中&#xff0c;例如&#xff0c;把直连网段引入…

Matlab图像处理-图像缩放

基本概念 图像缩放是指将给定的图像在x轴方向按比例缩放a倍&#xff0c;在y轴方向按比例缩放b倍&#xff0c;从而获得一幅新的图像。 如果ab&#xff0c;即在x轴方向和y轴方向缩放的比率相同&#xff0c;则称这样的比例缩放为图像的全比例缩放。 如果a≠b&#xff0c;图像比…

Nacos安装

一、下载Nacos1.4.1二、单机版本安装 2.1 将下载的nacos安装包传输到服务器2.2 解压文件2.3 进入bin目录下 单机版本启动2.4 关闭nacos2.5 访问Nacos地址 IP&#xff1a;8848/nacos三、集群版本的安装 3.1 复制nacos安装包&#xff0c;修改为nacos8849&#xff0c;nacos8850&am…

C# | DBSCAN聚类算法实现 —— 对直角坐标系中临近点的点进行聚类

C# | DBSCAN聚类算法实现 聚类算法是一种常见的数据分析技术&#xff0c;用于将相似的数据对象归类到同一组或簇中。其中&#xff0c;DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;是一种基于密度的聚类算法&#xff0c;能够有效…

Spark有两种常见的提交方式:client 模式和 cluster 模式对机器 CPU 的影响

Spark有两种常见的提交方式&#xff1a;client 模式和 cluster 模式。这两种方式对机器 CPU 的影响略有不同 &#xff0c;请参考以下说明 Client 模式&#xff1a; 在 Client 模式下&#xff0c;Spark Driver 运行在提交任务的客户端节点上&#xff08;即运行 spark-submit 命…

云服务器利用Docker搭建sqli-labs靶场环境

一、安装宝塔面板 使用xshell、electerm、SecureCRT等远程终端连接登陆上云服务器&#xff0c;在Linux宝塔面板使用脚本安装 安装后&#xff0c;如下图&#xff1a;按照提示&#xff0c;在云服务器防火墙/安全组放行Linux宝塔面板的端口 在浏览器打开上述网址&#xff0c;登…

【SpringSecurity】七、SpringSecurity集成thymeleaf

文章目录 1、thymeleaf2、依赖部分3、定义Controller4、创建静态页面5、WebSecurityConfigurerAdapter6、权限相关7、当用户没有某权限时&#xff0c;页面不展示该按钮 1、thymeleaf 查了下读音&#xff0c;leaf/li:f/&#xff0c;叶子&#xff0c;前面的单词发音和时间time一…

【算法训练-数组 三】数组中的第K个最大元素(TOPK问题|寻找第K大)

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【寻找第K大】&#xff0c;使用【数组】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…

九、适配器模式

一、什么是适配器模式 适配器模式&#xff08;Adapter&#xff09;的定义如下&#xff1a;将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式&#xff08;Adapter&#xff09;包含以下主要角色&…

WebGPT VS WebGPU

推荐&#xff1a;使用 NSDT编辑器 快速搭建3D应用场景 随着WebGPU的引入&#xff0c;Web开发发生了有趣的转变&#xff0c;WebGPU是一种新的API&#xff0c;允许Web应用程序直接访问设备的图形处理单元&#xff08;GPU&#xff09;。这种发展意义重大&#xff0c;因为 GPU 擅长…

【MySQL】用户管理

之前我们一直都使用root身份来对mysql进行操作&#xff0c;但这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理 目录 一、用户 1.1 用户信息 1.2 添加用户 1.3 删除用户 1.4 修改用户密码 二、用户权限 2.1 赋予授权 2.2 回收权限 一、用户 1.1 用户信息…

【Axure高保真原型】中继器网格图片拖动摆放

今天和大家分享中继器网格图片拖动摆放的原型模板&#xff0c;我们可以通过鼠标拖动来移动图片&#xff0c;拖动过程其他图标会根据图片拖动自动排列&#xff0c;松开鼠标是图片停放在指定位置&#xff0c;其他图标自动排列。那这个模板是用中继器制作的&#xff0c;所以使用也…

[机器学习]分类算法系列①:初识概念

目录 1、概念 2、数据集介绍与划分 2.1、数据集的划分 2.2、sklearn数据集介绍 2.2.1、API 2.2.2、分类和回归数据集 分类数据集 回归数据集 返回类型 3、sklearn转换器和估计器 3.1、转换器 三种方法的区别 3.2、估计器 3.2.1、简介 3.2.2、API 3.3、工作流程 …

【软考】系统集成项目管理工程师(一)信息化基础知识【6分】

一、信息与信息系统 1、信息技术 为解决信息的采集、加工、存储、传输、处理、计算、转换、表现等问题而不断繁荣发展 核心-传输技术&#xff08;通常指通信、网络等&#xff09; 2、信息的质量属性 特点&#xff1a;客观性、普遍性 属性描述精确性对事物状态描述的精准程度…

图书馆项目Java阅览室管理系统jsp源代码MySQL

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 图书馆项目 系统有1权限&#xff1a;管理员 用所技术…

Centos7 安装 docker

1、前提条件 目前&#xff0c;CentOS 仅发行版本中的内核支持 Docker。Docker 运行在CentOS7 (64)上&#xff0c; 要求系统为64位、Linux系统内核版本为 3.8以上 查看自己系统的内核 cat /etc/redhat-release 或 uname -r 2、卸载旧版本 旧版本的 Docker 的名称为docker或doc…

【注册岩土】Python土力学与基础工程计算.PDF-摩尔-库伦强度理论

8.3 Python求解 Python求解代码如下&#xff1a; 1.import math 2. 3.sigma1 300 # 最大主应力&#xff0c;单位 kPa 4.sigma3 100 # 最小主应力&#xff0c;单位 kPa 5.alpha 30 # m-n面与最小主应力方向夹角&#xff0c;单位度 6. 7.rad_alph…

Matlab图像处理-图像旋转

基本概念 图像的旋转变换属于图像的位置变换&#xff0c;通常是以图像的中心为原点&#xff0c;将图像上的所有像素都旋转一个相同的角度。旋转后&#xff0c;图像的大小一般会改变。图像的旋转变换是指以图像的中心为原点&#xff0c;将图像上的所有像素都旋转同一个角度的变…

ubuntu系统安装tensorRT-8.6.1版本(2023-8月最新版)

目录 前言pip安装可能出现的报错&#xff1a; tar.gz安装 前言 看了无数教程和b站视频&#xff0c;啊啊啊啊啊啊啊啊啊啊啊tensorRT要我狗命啊。我要写全网tensorRT最全的博客!!! 总体来说成功安装方式有两种&#xff0c;pip安装和tar.gz安装&#xff08;其实官网安装方式居多…