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

前言

在地图接入使用中,很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能,所以今天特意将我们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   //车头始终向前(沿路线自动旋转)
    }
)

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

关于MultiMarker的faceTo说明:

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

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

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

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

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

栏目
728_90 cn stocks