BMapGL实现地图轨迹运动(地图视角不变)

BMapGL实现地图轨迹

想要实现:

  1. 轨迹运动地图视角不能随之改变
  2. 有icon标识运动当前的位位置

总的说就是在BMapGl里实现BMap的轨迹运动功能

由于数据之间的经纬度之间的距离太遥远,不能使用每隔一段时间换一个point这种办法,后来仔细看了看百度地图的demo文档,路书的能实现均匀的轨迹运动,但是需求和demo还是有一点点的不同,所以做了小小的改动。
路书demo
最后实现的效果如下:
轨迹运动

  • 引入路书的js
    在这里插入图片描述
  • 在地图上根据数据绘制出一条线
  • icon和轨迹
 var points = [] //里面为多个point的点var point = new BMapGL.Point(116.39,28.33)
 var polyline = new BMapGL.Polyline(points, { strokeColor: '#1a66c7ba', strokeWeight: 6, strokeOpacity: 0.2 }) //创建折线
 //添加在地图上 这里的“map”地图初始化就定义的变量
 map.addOverlay(polyline)
 引入您需要用的icon
 var icon = require('@/assets/img/carIcon.png')
 var trackExample = new BMapGLLib.LuShu(map, points, {
  // defaultContent: '起飞啦', // "信息窗口文案"
  autoView: true, // 是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
  speed: 100,
  icon: new BMapGL.Icon(icon, new BMapGL.Size(30, 30), { anchor: new BMapGL.Size(24, 24) }),
  enableRotation: true, // 是否设置marker随着道路的走向进行旋转
})

当然这里路书的事件也是一样的,直接在需要用到的地方代用就ok了

//开始
trackExample.start();
//停止
trackExample.stop();
//暂停
trackExample.pause();
//隐藏信息窗口
trackExample.hideInfoWindow();
//展示信息窗口
trackExample.showInfoWindow();     

路书的js也可以直接下载放在项目里面,需要的如下:
https://bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BMapGL是百度地图JavaScript API 4.0版本中的一个模块,用于渲染地图。离线地图是指在没有网络连接的情况下,使用本地下载的地图数据进行地图展示。BMapGL同样支持离线地图的使用。 以下是离线地图的使用步骤: 1. 下载离线地图数据:通过百度地图官网提供的离线地图下载工具,选择需要下载的地图区域,并下载对应的离线地图数据。下载完成后,将数据保存到本地磁盘上。 2. 将离线地图数据添加到地图:在初始化地图时,通过BMapGL.MapOptions对象的offline属性,将离线地图数据添加到地图中。代码示例: ``` var map = new BMapGL.Map("container", { minZoom: 3, maxZoom: 19, offline: { retryInterval: 5000, txt: "离线地图已开启", imgUrl: "offline.png", jsonUrl: "离线地图数据文件路径" } }); ``` 其中,retryInterval表示离线地图数据加载失败后的重试时间间隔(单位:毫秒);txt表示离线地图开启时,在地图上的提示文本;imgUrl表示离线地图开启时,在地图上显示的图片路径;jsonUrl表示离线地图数据文件的路径(即下载的离线地图数据所在的文件夹路径)。 3. 离线地图数据的使用:当离线地图数据添加到地图中后,地图将在没有网络连接时,使用本地下载的离线地图数据进行地图展示。此时,在地图上进行缩放、拖动等操作,地图将立即响应。 需要注意的是,在使用离线地图时,需要将下载的离线地图数据文件夹放置在正确的位置,并设置正确的路径。同时,为了保证地图的流畅性,建议下载的离线地图数据区域尽量小,并且只下载需要使用的区域。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值