有的项目比如专车、城际车、代驾、顺风车等网约车行业，需要做车辆轨迹回放，这里给大家分享一下如何用腾讯位置服务API完成车辆轨迹回放的，并且在车辆轨迹回放中模拟了真实的速度和方向。
提前要说的几点：
1、首先因为是Web网页端的功能，所以需要用到的是地图模块的API，可以选择百度地图或者腾讯地图。
2、由于需要位置信息，所以地图需要支持点到点的路线绘制功能。
3、关键点：需要一个小车，并且小车是可以根据不同的方向而改变车头朝向。
因为前两点功能百度地图API可以满足，但是第三点，腾讯地图LBS，更新了新版本的接口，图标可以自动根据方向改变朝向。所以选择腾讯地址，减少开放量，另外就是直接API支持，减少了很多的BUG。
1、在腾讯位置服务中注册为开发者：
image
2、在控制台配置Key
配置完成之后，就可以通过开发文档-web前端-JavaScript-API来获取腾讯位置服务的LBS组件
image
开始开发：
第一步：画页面，初始化地图：
把key中的XXXXXXXXXXX更换为我们刚才在腾讯地图LBS后台获取的key。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>marker轨迹回放-全局模式</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=XXXXXXXXXXX"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container"></div>
<script type="text/javascript">
var center = new TMap.LatLng(30.465512, 114.402740);
//初始化地图
var map = new TMap.Map("container", {
zoom: 15,
center: center
});
</script>
</body>
</html>
效果如图所示：
image
第二步：画路线，并根据路线模拟运行
这里需要注意的是，如果路线比较复杂，尽可能的使用分钟级，甚至秒级的坐标，这样绘制的轨迹也会更精准。速度的展示，需要后台在记录坐标的时候计算好，并实时反馈。
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom: 15,
center: center
});
var path = [
new TMap.LatLng(39.98481500648338, 116.30571126937866),
new TMap.LatLng(39.982266575222155, 116.30596876144409),
new TMap.LatLng(39.982348784165886, 116.3111400604248),
new TMap.LatLng(39.978813710266024, 116.3111400604248),
new TMap.LatLng(39.978813710266024, 116.31699800491333)
];
var polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
// 折线样式定义
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //线填充色
'width': 4, //折线宽度
'borderWidth': 2, //边线宽度
'borderColor': '#FFF', //边线颜色
'lineCap': 'round' //线端头方式
})
},
geometries: [{
styleId: 'style_blue',
paths: path
}],
});
var marker = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 40,
'height': 40,
'anchor': {
x: 20,
y: 20,
},
'faceTo': 'map',
'rotate': 180,
'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
})
},
geometries: [{
id: 'car',
styleId: 'car-down',
position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
},{
"id": 'start',
"styleId": 'start',
"position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
}]
});
marker.moveAlong({
'car': {
path,
speed: 250
}
}, {
autoRotation:true
})
</script>
企业微信截图_20220324103259.png
另外需要后台配合的是：
1、把汽车的轨迹坐标，按照秒级/分钟级记录，同时记录下轨迹记录的时间。
2、把坐标绘制成轨迹，而不是仅仅设置起点和终点。
3、轨迹与轨迹之间用地图计算出来距离，然后除以时间计算出来速度。前端地图实时更新 marker.moveAlong中的car的速度。来达到轨迹回放跟实际车辆运行速度一致的目的。
总结：
使用腾讯位置服务API，是目前最简单的可以花轨迹+Mark图标跟随轨迹移动+Mark图标可以自适应转向的实现。
网友评论