使用騰訊位置服務API完成車輛軌跡回放（模擬真實的速度和方向）

阿新 • • 發佈：2021-08-19

產品需求：

根據能夠回放出來車輛的執行軌跡路線、執行方向和速度。

需求分析：

1、首先因為是Web網頁端的功能，所以需要用到的是地圖模組的API，可以選擇百度地圖或者騰訊地圖。

2、由於需要位置資訊，所以地圖需要支援點到點的路線繪製功能。

3、關鍵點：需要一個小車，並且小車是可以根據不同的方向而改變車頭朝向。

因為前兩點功能百度地圖API可以滿足，但是第三點，騰訊地圖LBS，更新了新版本的介面，圖示可以自動根據方向改變朝向。所以選擇騰訊地址，減少開放量，另外就是直接API支援，減少了很多的BUG。

開發前的準備：

1、在騰訊位置服務中註冊為開發者：

2、在控制檯配置Key

配置完成之後，就可以通過開發文件-web前端-JavaScript-API來獲取騰訊位置服務的LBS元件

開始開發：

第一步：畫頁面，初始化地圖：

把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>

效果如圖所示：

第二步：畫路線，並根據路線模擬執行

這裡需要注意的是，如果路線比較複雜，儘可能的使用分鐘級，甚至秒級的座標，這樣繪製的軌跡也會更精準。速度的展示，需要後臺在記錄座標的時候計算好，並實時反饋。

 <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、把汽車的軌跡座標，按照秒級/分鐘級記錄，同時記錄下軌跡記錄的時間。

2、把座標繪製成軌跡，而不是僅僅設定起點和終點。

3、軌跡與軌跡之間用地圖計算出來距離，然後除以時間計算出來速度。前端地圖實時更新 marker.moveAlong中的car的速度。來達到軌跡回放跟實際車輛執行速度一致的目的。

總結：
使用騰訊位置服務API，是目前最簡單的可以花軌跡+Mark圖示跟隨軌跡移動+Mark圖示可以自適應轉向的實現。