使用騰訊位置服務實現類滴滴汽車沿軌跡行駛功能

前言

最近公司有個地圖功能開發，根據車輛的行駛的經緯度，來畫出車輛的移動軌跡，並模擬車輛在該線路的行駛過程。效果圖大致是這樣的。

簡易入門

首先進入騰訊位置服務頁面然後進行註冊賬號，註冊完成後需要申請AppKey，我們將在自己的應用中配置這個Key來使用SDK中的服務。

webserveapi默認勾選就可以，在未上線之前，我們可以先不填域名白名單。

只需要在html的頁面裏引入即可

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你剛申請的key"></script>

一個完成的例子

<!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>創建地圖</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }

  #container {
    width: 100%;
    height: 100%;
  }
</style>

<body onload="initMap()">
  <div id="container"></div>
  <script type="text/javascript">
    function initMap() {
      var center = new TMap.LatLng(39.984104, 116.307503);
      //初始化地圖
      var map = new TMap.Map("container", {
        rotation: 20,//設置地圖旋轉角度
        pitch: 30, //設置俯仰角度（0~45）
        zoom: 12,//設置地圖縮放級別
        center: center//設置地圖中心點座標
      });
    }
  </script>
</body>

</html>

把上面這段代碼保存到html文件中，用瀏覽器打開，就可以看到一個地圖,如下：

實現需求：汽車行駛在地圖上

我們要想讓車在地圖上跑起來，首先要畫出一條線。

由點連線

有了地圖之後，我們要在地圖上劃線的話需要用到這個MultiPolyline這個類，折線。折線一般用於運動軌跡顯示、路線規劃顯示等場景中。

這個類是以圖層的方式對摺線進行單條或批量繪製，以及刪改等操作。你可以在地圖上創建，修改，刪除。

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, // 繪製到目標地圖
  // 折線樣式定義
  geometries: [{
    styleId: 'style_blue',
    paths: path
  }],
});

代碼效果圖

要畫線，必須要先有點，而點在地圖上表現爲一個經緯度，即這樣的new TMap.LatLng(39.98481500648338, 116.30571126937866),有了一組點之後我們，就能對點進行連線，最後形成一個折線。

當然我們也可以對先進行修改，改變線的顏色，寬度，邊線寬度，邊線顏色，線端頭方式

var polylineLayer = new TMap.MultiPolyline({
  map, // 繪製到目標地圖
  // 折線樣式定義
  styles: {
    'style_blue': new TMap.PolylineStyle({
      'color': '#3777FF', //線填充色
      'width': 3, //折線寬度
      'borderWidth': 1, //邊線寬度
      'borderColor': '#FFF', //邊線顏色
      'lineCap': 'round' //線端頭方式
    })
  },
  geometries: [{
    styleId: 'style_blue',
    paths: path
  }],
});

物沿線動

有了線之後，也就是行駛軌跡後，我們需要在線的起始端添加一個汽車的標誌，然後讓這個汽車沿着線走起來，在騰訊地圖裏要在地圖上添加一個標註，需要使用MultiMarker類，這個類可以讓你往地圖上的多個標註點，可自定義標註的圖標。

該類的相關文檔解釋

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)
  }]
});

在styles中定義mark的樣式，一共有三種，車輛開始時，車輛行進時，車輛結束時。在geometries中定義樣式在那個地方使用。

做完上面一步，車輛已經出現在了軌跡上的起點，但還不會自己走，如圖

在騰訊地圖中如果要讓一個地圖走，需要使用的 MultiMarker的moveAlong方法,具體用法

marker.moveAlong({
  'car': {
    path,
    speed: 250
  }
}, {
  autoRotation: true
})

path是marker行走的路徑，speed是速度，autoRotation表示是否在行進途中自動將旋轉

最終效果及源碼

完整的源碼是這樣的

<!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=QSWBZ-AL2KU-4Q4VI-46ONV-26OOT-ISB5G"></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(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>
</body>

</html>

最終的效果

寫在最後

騰訊位置服務提供了很多示例，如果做個需求沒有頭緒的話，可以先看看騰訊地圖的示例中心。

如果你是高手，想做更多自定義擴展的功能，可以直接查看騰訊提供的API文檔，裏面包含了所有類的屬性，方法。

作者：拿我格子衫來

鏈接：https://fizzz.blog.csdn.net/article/details/111764120

來源：CSDN

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

使用騰訊位置服務實現類滴滴汽車沿軌跡行駛功能

前言

簡易入門

實現需求：汽車行駛在地圖上

由點連線

物沿線動

最終效果及源碼

寫在最後

2024年DataOps趨勢預測：AI不會取代數據工程師

雲原生週刊：K8s 中的服務和網絡｜ 2024.4.29

[轉帖]cpupower

今天，昨天，近七天，近30天，近90天，js封裝

華爲云云原生FinOps解決方案，釋放雲原生最大價值

消金公司2023財報解析：息差維持高位，信用成本攀升

ai 大模型

2024年DataOps趨勢預測：AI不會取代數據工程師

Apache DolphinScheduler支持Flink嗎？

界面組件DevExpress中文教程 - 如何在Node.js應用中創建報表？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結