可视化开发-02

XujiRe

于 2025-03-31 16:12:19 发布

阅读量151

点赞数 3

分类专栏：可视化大屏文章标签：信息可视化

本文链接：https://blog.csdn.net/XujiRe/article/details/146847872

版权

可视化大屏专栏收录该内容

5 篇文章

订阅专栏

使用高德地图API实现行车轨迹播放
在这里插入图片描述

收运车辆轨迹录制

可以进行倍速播放设置
实现逻辑：
先使用AMap.Marker绘制起始点图标；造一台车this.markerCar = new AMap.Marker然后需要添加autoRotation: true,才能实现车头自动转弯；使用AMap.Polyline绘制轨迹其中的path需要是一点一点衔接起来的坐标点，然后监听车辆移动this.markerCar.on(“moving”, function (e: any) {；以及车辆移动停止this.markerCar.on(“movealong”, function (e: any) {。
这个是车辆实现移动的主要代码

startAnimation() {
    this.markerCar.moveAlong(this.lineArr.map((it:any)=>{
      return [it.lng, it.lat]
    }), this.speed);
  }

其中，this.lineArr就是绘制轨迹的坐标点数据