product demand:
According to the running track route, running direction and speed of the vehicle can be replayed.
demand analysis:
1. First of all, because it is a function of the web page, it is the API of the map module that needs to be used. You can choose Baidu map or Tencent map.
2. Due to the need for location information, the map needs to support the point-to-point route drawing function.
3. The key point: a small car is needed, and the car can change the front of the car according to different directions.
Because the first two points of function Baidu Map API can be satisfied, but the third point, Tencent Maps LBS, has updated the new version of the interface, and the icon can automatically change its orientation according to the direction. So choose the Tencent address to reduce the amount of openness, and the other is direct API support, which reduces a lot of BUG.
Preparation before development:
1. Register as a developer in Tencent's location service:
2. Configure Key in the console
After the configuration is complete, you can obtain the LBS component of Tencent's location service through the development document-web front-end-JavaScript-API
Start development:
Step 1: Draw the page and initialize the map:
Replace the XXXXXXXXXXX in the key with the key we just obtained in the Tencent Map LBS backend.
<!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>The effect is shown in the figure:
Step 2: Draw a route and simulate running according to the route
It should be noted here that if the route is more complicated, use minute-level or even second-level coordinates as much as possible, so that the drawn trajectory will be more accurate. The speed display needs to be calculated in the background when the coordinates are recorded, and real-time feedback is required.
<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>
1. Record the trajectory coordinates of the car in seconds/minutes, and record the time of the trajectory recording at the same time.
2. Draw the coordinates as a trajectory instead of just setting the start and end points.
3. Use the map to calculate the distance between the trajectory and the trajectory, and then divide it by the time to calculate the speed. The front-end map updates the speed of the car in marker.moveAlong in real time. To achieve the goal of trajectory playback consistent with the actual vehicle running speed.
Summarize:
Using Tencent's location service API is currently the simplest implementation that can take the track + the Mark icon to follow the track + the Mark icon can adaptively turn.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。