一、先看效果
【跑跑步】微信小程序
二、實現(xiàn)功能
? ? ? ? 【跑跑步】是一款基于Uniapp開發(fā)的微信小程序，主要實現(xiàn)了跑步軌跡記錄、歷史軌跡、軌跡糾偏、軌跡回放和軌跡排名等功能。室內(nèi)跑步記錄正在開發(fā)，還沒有發(fā)布，主要利用手機(jī)加速度傳感器實現(xiàn)計步功能。更多干貨請關(guān)注公眾號：小蠅工作室
1、軌跡記錄
????????軌跡記錄主要用到微信小程序的startLocationUpdateBackground和onLocationChange兩個API接口，該接口實現(xiàn)了前后臺GPS定位，連續(xù)采集用戶的跑步定位信息，然后通過map組件把軌跡繪制出來。
//前后臺定位接口
wx.startLocationUpdateBackground(callback) {
var that = this;
success(res) {
//開始監(jiān)聽GPS數(shù)據(jù)
that.onLocationChange();
},
fail(res) {
//授權(quán)失敗后引導(dǎo)用戶打開定位信息
...
}
})
//監(jiān)聽GPS數(shù)據(jù)的變化
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, //經(jīng)緯度數(shù)組
color: '#00ff00', //線的顏色
width: 5, //線的寬度
borderWidth: 1, //線的厚度
dottedLine: false, //是否虛線
arrowLine: true //帶箭頭的線 開發(fā)者工具暫不支持該屬性
}
this.polyline[0] = taskLine;
}其中：filterGPSPoints方法用于過濾GPS飄逸點數(shù)據(jù)，douglasPeucker方法用于抽稀GPS數(shù)據(jù)，addLine方法繪制跑步軌跡。
2、軌跡回放
軌跡回放功能的實現(xiàn)主要通過moveAlong方法實現(xiàn)，設(shè)置的參數(shù)包括marker點的ID，軌跡線路和動畫長度。本文實現(xiàn)了在軌跡回放時候切換三維場景，然后自動旋轉(zhuǎn)等特效。
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, //假設(shè)動畫執(zhí)行5秒
success(res) { // ios是開始動畫就會執(zhí)行，安卓手機(jī)是在動畫結(jié)束后執(zhí)行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飄逸點數(shù)據(jù)：文章來源：http://www.zghlxwxcb.cn/news/detail-709254.html
// 定義閾值
const speedThreshold = 40; // 速度閾值，單位為m/s
const accelerationThreshold = 4; // 加速度閾值，單位為m/s^2
// 過濾GPS飄逸點的函數(shù)
function filterGPSPoints(points) {
// 如果點的數(shù)量小于等于2，直接返回原始點集合
if (points.length <= 2) {
return points;
}
// 過濾后的點集合
const filteredPoints = [points[0]];
// 遍歷原始點集合
for (let i = 1; i < points.length - 1; i++) {
const prevPoint = points[i - 1];
const currentPoint = points[i];
const nextPoint = points[i + 1];
// 計算當(dāng)前點的速度和加速度
const speed = calculateSpeed(prevPoint, currentPoint);
const acceleration = calculateAcceleration(prevPoint, currentPoint, nextPoint);
// 如果速度和加速度都低于閾值，認(rèn)為是有效點，加入過濾后的點集合
if (speed <= speedThreshold && acceleration <= accelerationThreshold) {
filteredPoints.push(currentPoint);
}
}
// 加入最后一個點
filteredPoints.push(points[points.length - 1]);
return filteredPoints;
}
// 計算兩個點之間的速度
function calculateSpeed(prevPoint, currentPoint) {
const distance = calculateDistance(prevPoint, currentPoint);
const time = (currentPoint.time - prevPoint.time)/1000; // 假設(shè)timestamp是時間戳
return distance / time;
}
// 計算三個點之間的加速度
function calculateAcceleration(prevPoint, currentPoint, nextPoint) {
const speed1 = calculateSpeed(prevPoint, currentPoint);
const speed2 = calculateSpeed(currentPoint, nextPoint);
const time = (nextPoint.time - prevPoint.time)/1000; // 假設(shè)timestamp是時間戳
return (speed2 - speed1) / time;
}
// 計算兩個點之間的距離
function calculateDistance(point1, point2) {
const lat1 = point1.latitude;
const lon1 = point1.longitude;
const lat2 = point2.latitude;
const lon2 = point2.longitude;
const R = 6371; // 地球半徑，單位為km
const dLat = deg2rad(lat2 - lat1);
const dLon = deg2rad(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c * 1000; // 轉(zhuǎn)換為米
return distance;
}
// 將角度轉(zhuǎn)換為弧度
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
module.exports = filterGPSPoints;抽稀GPS數(shù)據(jù)：文章來源地址http://www.zghlxwxcb.cn/news/detail-709254.html
//計算距離
function calculationDistance(point1, point2) {
let lat1 = point1.latitude;
let lat2 = point2.latitude;
let lng1 = point1.longitude;
let lng2 = point2.longitude;
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)));
return s * 6370996.81;
};
//計算垂距
function distToSegment(start, end, center) {
//下面用海倫公式計算面積
let a = Math.abs(calculationDistance(start, end));
let b = Math.abs(calculationDistance(start, center));
let c = Math.abs(calculationDistance(end, center));
let p = (a + b + c) / 2.0;
let s = Math.sqrt(Math.abs(p * (p - a) * (p - b) * (p - c)));
return s * 2.0 / a;
};
//遞歸方式壓縮軌跡
function compressLine(coordinate, result, start, end, dMax) {
if (start < end) {
let maxDist = 0;
let currentIndex = 0;
let startPoint = coordinate[start];
let endPoint = coordinate[end];
for (let i = start + 1; i < end; i++) {
let currentDist = distToSegment(startPoint, endPoint, coordinate[i]);
if (currentDist > maxDist) {
maxDist = currentDist;
currentIndex = i;
}
}
if (maxDist >= dMax) {
//將當(dāng)前點加入到過濾數(shù)組中
result.push(coordinate[currentIndex]);
//將原來的線段以當(dāng)前點為中心拆成兩段，分別進(jìn)行遞歸處理
compressLine(coordinate, result, start, currentIndex, dMax);
compressLine(coordinate, result, currentIndex, end, dMax);
}
}
return result;
};
/**
*
*@param coordinate 原始軌跡Array<{latitude,longitude}>
*@param dMax 允許最大距離誤差
*@return douglasResult 抽稀后的軌跡
*
*/
function douglasPeucker(coordinate, dMax) {
if (!coordinate || !(coordinate.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;到了這里，關(guān)于Uniapp實現(xiàn)微信小程序跑步運動軌跡、歷史軌跡和軌跡回放等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
