騰訊位置服務實現軌跡回放demo

前言

在地圖接入使用中，很多開發者諮詢我們騰訊位置服務是否支持軌跡回放功能，所以今天特意將我們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"適合於標註位置使用（右圖）

視角跟隨小車移動（近期推出，敬請期待）

小車延路線運動的同時，控制視角跟隨小車運動，可以達到類似模擬導航、第三人稱遊戲視角的感覺，非常炫酷。

作者：騰訊位置服務

鏈接：https://blog.csdn.net/weixin_45628602/article/details/109103634

來源：CSDN

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