Uniapp实现微信小程序跑步运动轨迹、历史轨迹和轨迹回放等功能 |
您所在的位置：网站首页 › keep如何记录跑步公里数 › Uniapp实现微信小程序跑步运动轨迹、历史轨迹和轨迹回放等功能 |
|
一、先看效果
【跑跑步】微信小程序 二、实现功能【跑跑步】是一款基于Uniapp开发的微信小程序，主要实现了跑步轨迹记录、历史轨迹、轨迹纠偏、轨迹回放和轨迹排名等功能。室内跑步记录正在开发，还没有发布，主要利用手机加速度传感器实现计步功能。更多干货请关注公众号：小蝇工作室 1、轨迹记录轨迹记录主要用到微信小程序的startLocationUpdateBackground和onLocationChange两个API接口，该接口实现了前后台GPS定位，连续采集用户的跑步定位信息，然后通过map组件把轨迹绘制出来。 //前后台定位接口 wx.startLocationUpdateBackground(callback) { var that = this; success(res) { //开始监听GPS数据 that.onLocationChange(); }, fail(res) { //授权失败后引导用户打开定位信息 ... } }) //监听GPS数据的变化 onLocationChange() { var that = this; var points = []; var paths = []; wx.onLocationChange(function(res) { res.time = Date.now(); points.push(res); that.latitude = res.latitude; that.longitude = res.longitude; if (that.scale = 3) { that.scale = 18; } paths = filterGPSPoints(points); paths = douglasPeucker(paths, 3); that.playRunAudio(); uni.setStorage({ key: 'gps', data: JSON.stringify(paths), success: function(e) { //console.log(e); }, fail: function(e) { console.log(e) } }); }); } //绘制跑步轨迹 addLine(points) { var that = this; //计算距离 function calculationDistance(ps) { var LC = 0; ps.forEach(function(f, index) { let lng1 = f.longitude; let lat1 = f.latitude; let lng2 = f.longitude; let lat2 = f.latitude; if (ps[index + 1]) { lng2 = ps[index + 1].longitude;; lat2 = ps[index + 1].latitude; } let radLat1 = lat1 * Math.PI / 180.0; let radLat2 = lat2 * Math.PI / 180.0; let a = radLat1 - radLat2; let b = (lng1 * Math.PI / 180.0) - (lng2 * Math.PI / 180.0); let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); LC = LC + s * 6370996.81 }) that.LC = (LC / 1000).toFixed(3); that.SD = (LC * 3.6 / (that.time)).toFixed(2); }; calculationDistance(points); const taskLine = { //路线 points: points, //经纬度数组 color: '#00ff00', //线的颜色 width: 5, //线的宽度 borderWidth: 1, //线的厚度 dottedLine: false, //是否虚线 arrowLine: true //带箭头的线 开发者工具暂不支持该属性 } this.polyline[0] = taskLine; }其中：filterGPSPoints方法用于过滤GPS飘逸点数据，douglasPeucker方法用于抽稀GPS数据，addLine方法绘制跑步轨迹。 2、轨迹回放轨迹回放功能的实现主要通过moveAlong方法实现，设置的参数包括marker点的ID，轨迹线路和动画长度。本文实现了在轨迹回放时候切换三维场景，然后自动旋转等特效。 moveAlong() { var that = this; var duration = 10000; var durationMove = 50; var markerId = 10; var js = TimeTotimestamp(that.JS); var sd = that.SD; var lc = that.LC; that.startNum = 2; that.isShowMyRunRecord = false; that.isShowMyWeRun = false; if (this.MapContext) { this.MapContext.moveAlong({ markerId: markerId, autoRotate: false, path: this.polyline[0].points, duration: duration, //假设动画执行5秒 success(res) { // ios是开始动画就会执行，安卓手机是在动画结束后执行success that.removeAlong(); that.startName = "开始"; that.startNum = 0; that.isShowMyRunRecord = true; that.isShowMyWeRun = true; that.isShowShare = true; } }); var i = 0; var tt = 10; that.startName = tt; that.endS = setInterval(function() { tt--; that.startName = tt; }, 1000); var durationZH = duration / durationMove; that.rotateDH = setInterval(function() { i++; if (i < 40) { that.skew = i; } that.rotate = (270 / durationZH) * i; that.startName = tt; that.LC = ((js / durationZH) * i * (sd / 3600)).toFixed(3); that.JS = TimeToHFS((js / durationZH) * i); }, durationMove); } } 3、核心算法filterGPSPoints算法过滤GPS飘逸点数据： // 定义阈值 const speedThreshold = 40; // 速度阈值，单位为m/s const accelerationThreshold = 4; // 加速度阈值，单位为m/s^2 // 过滤GPS飘逸点的函数 function filterGPSPoints(points) { // 如果点的数量小于等于2，直接返回原始点集合 if (points.length 2)) { return null; } coordinate.forEach((item, index) => { item.key = index; }); let result = compressLine(coordinate, [], 0, coordinate.length - 1, dMax); result.push(coordinate[0]); result.push(coordinate[coordinate.length - 1]); let resultLatLng = result.sort((a, b) => { if (a.key < b.key) { return -1; } else if (a.key > b.key) return 1; return 0; }); resultLatLng.forEach((item) => { item.key = undefined; }); return resultLatLng; } module.exports = douglasPeucker; |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |