美文网首页
对接腾讯地图API实现车辆轨迹回放

对接腾讯地图API实现车辆轨迹回放

作者: Mr船长大人 | 来源:发表于2022-03-24 10:48 被阅读0次

    有的项目比如专车、城际车、代驾、顺风车等网约车行业,需要做车辆轨迹回放,这里给大家分享一下如何用腾讯位置服务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图标可以自适应转向的实现。

    相关文章

      网友评论

          本文标题:对接腾讯地图API实现车辆轨迹回放

          本文链接:https://www.haomeiwen.com/subject/hqukjrtx.html