4

腾讯位置服务实现轨迹回放

 1 year ago
source link: https://blog.csdn.net/weixin_45628602/article/details/109103634
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前言

在地图接入使用中,很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能,所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享。

轨迹回放&小车移动

在JavaScript API GL中,使用MultiMarker(点标记)中的moveAlong()方法 ,可以方便的实现轨迹回放功能,而且您可以对样式进行各种想要的修改,比如修改小车图片、不显示路线或者改成您想要的颜色等。

代码

//初始化地图
var map = new TMap.Map("container", {
  zoom: 15,
  center: new TMap.LatLng(39.984104, 116.307503)
});
 
//小车移动路线
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)
];
 
//创建mareker(小车)
var marker = new TMap.MultiMarker({
  map,
  styles: { //样式设置
    'car-down': new TMap.MarkerStyle({
      'width': 40,  //小车图片宽度(像素)
      'height': 40, //高度
      'anchor': {   //图片中心的像素位置(小车会保持车头朝前,会以中心位置进行转向)
        x: 20,y: 20,
      },
      'faceTo': 'map',  //取’map’让小车贴于地面,faceTo取值说明请见下文图示
      'rotate': 180,    //初始小车朝向(正北0度,顺时针一周为360度,180为正南)
      'src': './img/car.png',   //小车图片(图中小车车头向上,即正北0度)
    })
  },
  geometries: [{    //小车marker的位置信息
    id: 'car',      //因MultiMarker支持包含多个点标记,因此要给小车一个id
    styleId: 'car-down',    //绑定样式
    position: new TMap.LatLng(39.98481500648338, 116.30571126937866),//初始坐标位置
  }]
});
 
//调用moveAlong,实现小车移动
marker.moveAlong({ 
        "car": {    //设置让"car"沿"path"移动,速度70公里/小时
            path,
            speed: 70
        }
    }, {
        autoRotation:true   //车头始终向前(沿路线自动旋转)
    }
)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

在线示例:https://lbs.qq.com/webDemoCenter/glAPI/glMarker/markerMoveAlong

关于MultiMarker的faceTo说明:

JavascriptAPI GL为可倾斜旋转的3D地图,这就带来了图片是贴在地面,还是贴向屏幕的问题:

faceTo: “map” 贴在地面,轨迹回放场景,车是要贴地的(左图)

faceTo:“screen” 贴在屏幕,小车场景就不合适了,它会始终“立着”(中图),"sreen"适合于标注位置使用(右图)

视角跟随小车移动(近期推出,敬请期待)

小车延路线运动的同时,控制视角跟随小车运动,可以达到类似模拟导航、第三人称游戏视角的感觉,非常炫酷。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK