前言
在地图接入应用中,很多开发者征询咱们腾讯位置服务是否反对轨迹回放性能,所以明天特意将咱们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/webDemoCen...
对于MultiMarker的faceTo阐明:
JavascriptAPI GL为可倾斜旋转的3D地图,这就带来了图片是贴在高空,还是贴向屏幕的问题:
faceTo
: “map
” 贴在高空,轨迹回放场景,车是要贴地的(左图)
faceTo
:“screen
” 贴在屏幕,小车场景就不适合了,它会始终“立着”(中图),"sreen
"适宜于标注地位应用(右图)
视角追随小车挪动(近期推出,敬请期待)
小车延路线静止的同时,管制视角追随小车静止,能够达到相似模仿导航、第三人称游戏视角的感觉,十分炫酷。