腾讯地图GL（轨迹回放）

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量1.1k 收藏 5
点赞数 2
分类专栏： 腾讯地图 轨迹回放 map 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45219548/article/details/126154920
版权

腾讯地图轨迹回放的实现

效果图
在这里插入图片描述

  • 首先了解一下需要使用到的API
API定义
MultiMarker（必选）用于实现在地图中的点标注功能，可以根据用户设置的样式同时标注多个位置
InfoWindow（可选）信息窗口，一般用于地点的摘要性信息的展示，Javascript API GL 提供了TMap.infoWindow类，用于实现这一功能
MultiPolyline（可选）矢量图形指绘制在地图上的二维线、面覆盖物， 具有广泛的应用场景，用于构建折线，常用于表现规划线路、行动轨迹、区域边界等
  • 实现思路
    1、将轨迹数据进行处理，遍历经纬度，全部转为腾讯地图new TMap.LatLng(lat,lng)，放进一个数组变量，用于后面渲染回放轨迹和渲染轨迹线；
    2、创建一个数组变量，用来存放信息窗口需要展示的内容
for (let i = 0; i < arr.length; i++) {
            if (i !== arr.length - 1) {
                if (arr[i + 1].lon !== arr[i].lon && arr[i + 1].lat !== arr[i].lat) { // 去重和一些没有经纬度的数据
                    this.polylineData.push(new TMap.LatLng(arr[i].lat, arr[i].lon));
                    this.trackData.push({
                        position: new TMap.LatLng(arr[i].lat, arr[i].lon),
                        updateTime: arr[i].updateTime,
                        speed: arr[i].speed,
                        imei: arr[i].imei,
                        coordType: arr[i].coordType,
                    });
                }
            } else {
                this.polylineData.push(new TMap.LatLng(arr[i].lat, arr[i].lon));
                this.trackData.push({
                    position: new TMap.LatLng(arr[i].lat, arr[i].lon),
                    updateTime: arr[i].updateTime,
                    speed: arr[i].speed,
                    imei: arr[i].imei,
                    coordType: arr[i].coordType,
                });
            }
        }

3、设置轨迹的相关图标样式，包括起点、终点和行走的图标

this.playBackMarkers.setStyles({
            'car-down': new TMap.MarkerStyle({
                width: 30,
                height: 30,
                anchor: {
                    x: 10,
                    y: 20,
                },
                faceTo: 'screen',
                rotate: 0,
                src: require('../../assets/images/car.png'),
            }),
            polyMark: new TMap.MarkerStyle({
                width: 40,
                height: 40,
                anchor: { x: 15, y: 32 },
                src: require('../../assets/images/coordinate-spot.png'),
            }),
            start: new TMap.MarkerStyle({
                width: 25,
                height: 35,
                anchor: { x: 15, y: 32 },
                src: require('../../assets/images/start.png'),
            }),
            end: new TMap.MarkerStyle({
                width: 25,
                height: 35,
                anchor: { x: 15, y: 32 },
                src: require('../../assets/images/end.png'),
            }),
        });

4、通过MultiMarker.setGeometries设置固定的起点、终点和行走开始点的图标

this.playBackMarkers.setGeometries([
            {
                id: 'car',
                styleId: 'car-down',
                rank: 4,
                position: this.polylineData[0],
            },
            {
                id: 'start',
                styleId: 'start',
                updateTime: this.trackData[0].updateTime,
                speed: this.trackData[0].speed,
                rank: 4,
                imei: this.trackData[0].imei,
                coordType: this.trackData[0].coordType,
                position: this.trackData[0].position,
            },
            {
                id: 'end',
                styleId: 'end',
                rank: 4,
                updateTime: this.trackData[this.trackData.length - 1].updateTime,
                speed: this.trackData[this.trackData.length - 1].speed,
                imei: this.trackData[this.trackData.length - 1].imei,
                coordType: this.trackData[this.trackData.length - 1].coordType,
                position: this.trackData[this.trackData.length - 1].position,
            },
        ]);

5、通过MultiMarker.add将需要回放的点数据全部添加进坐标点，从而在地图上将所有的轨迹点显示出来

this.trackData.map((item, index) => {
            if (index != 0 && index != this.trackData.length - 1) {
                return this.playBackMarkers.add([
                    {
                        id: index,
                        styleId: 'polyMark',
                        position: item.position,
                        updateTime: item.updateTime,
                        speed: item.speed,
                        imei: item.imei,
                        rank: 2,
                        coordType: item.coordType,
                    },
                ]);
            }
        });

6、创建MultiPolyline轨迹线，设置PolylineStyle的相关样式，将前面处理好的轨迹数据通过MultiPolyline.add添加进去

this.polylineLayer = new TMap.MultiPolyline({
            map: this.map, // 绘制到目标地图
            // 折线样式定义
            styles: {
                style_blue: new TMap.PolylineStyle({
                    color: '#3777FF', // 线填充色
                    width: 6, // 折线宽度
                    borderWidth: 2, // 边线宽度
                    borderColor: '#FFF', // 边线颜色
                    lineCap: 'round', // 线端头方式
                    // eraseColor: 'rgba(190,188,188,1)',
                    eraseColor: 'rgba(74, 179, 34, .7)',
                    showArrow: true,
                    arrowOptions: {
                        width: 6,
                        height: 4,
                    },
                }),
            },
            geometries: [],
        });

        this.polylineLayer.setGeometries([
            {
                id: 'erasePath',
                styleId: 'style_blue',
                paths: this.polylineData,
            },
        ]);

7、创建InfoWindow信息窗体
8、做一个开始回放、暂停回放、重新回放、结束回放的事件处理

switchType(type) {
        if (type == 'start') {
            this.playBackMarkers.moveAlong(
                {
                    car: {
                        path: this.polylineData, 
                        speed: 70,
                    },
                },
                {
                    autoRotation: true,
                }
            );
        } else if (type == 'stop') {
            this.playBackMarkers.pauseMove();
        } else if (type == 'continue') {
            this.playBackMarkers.resumeMove();
        } else if (type == 'reStart') {
            this.playBackMarkers.moveAlong(
                {
                    car: {
                        path: this.polylineData,
                        speed: 70,
                    },
                },
                {
                    autoRotation: true,
                }
            );
        } else if (type == 'closePlackBack') {
            if (this.trackData.length > 3) {
                this.infoWindow.destroy();
                this.polylineData = [];
                this.trackData = [];
                this.playBackMarkers.stopMove();
                this.playBackMarkers.setGeometries([]);
                this.playBackMarkers.setMap(null);
                this.polylineLayer.setMap(null);
            }
        }
    }

8、对轨迹回放的进行监听，执行腾讯地图的路线擦除，保证轨迹的填充线能够跟着行走图标的实际情况走

 // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
                this.polylineLayer.eraseTo(
                    'erasePath',
                    passedLatLngs.length - 1,
                    passedLatLngs[passedLatLngs.length - 1]
                );

9、监听marker点的点击，将点击后获取到的marker点赋值到信息窗体

  • 总结
    1、轨迹回放结束时务必要清除MultiMarker、MultiPolyline，关闭infoWindow信息窗体
    2、infoWindow上的点击事件需要通过监听元素来添加，并且通过bind来改变this指向，否则不生效
    3、轨迹数据一定要做去重处理，否则轨迹的填充线在回放的时候会有问题
黄上的皇
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c#——绘制任意轨迹的画板
02-26
前两天群的一同仁，求助写一个可以绘制任意图形程序。经了解后就是一个可以用鼠标绘制任意轨迹的画板。同仁强烈要求能否给些绘图相关的示例。小的不才，因为写过天GDI+相关的程序，本着码农本份，就在晚上花了40分钟写了这个画板。虽不是什么给力神马，但也不敢私藏，现贴出来和大家一起学习学习，还请多多指教。
腾讯地图插件
03-29
出门在外，免不了查询地图的需求！为了帮助开发者们进一步“减负”，腾讯地图的插件添加了路线规划的能力，主要解决“向用户展示从A到B路线”的问题。使用插件的正确姿势究竟是什么呢？今天我们给大家介绍——腾讯地图插件的能力。       腾讯地图插件使用场景 >>>   场景1：        -收到小程序的婚礼请柬，但是请柬上的地址找不到？怎么办？        -用路线插件给用户指路~   如果你开发的是请柬邀请类的小程序，就会遇到上述场景。在传统开发模式中，引入完整的地图选点、路线规划组件，开发成本非常高，更多开发者选择让用户直接输入文字地址进行展示，以此作为降低开发成本的妥协方案。这样的设计不
腾讯地图省市区经纬度json
04-23
微信小程序,腾讯地图省市区经纬度json status: 0, message: "query ok", data_version: "20190117", result: [ [ { id: "110000", name: "北京", fullname: "北京市", pinyin: [ "bei", "jing" ], location: { lat: 39.90469, lng: 116.40717 }, cidx: [ 0, 15 ] }, { id: "120000", name: "天津", fullname: "天津市", pinyin: [ "tian", "jin" ], location: { lat: 39.0851, lng: 117.19937 }, cidx: [ 16, 31 ] },
Minimum Snap轨迹规划详解（1）轨迹规划入门
04-08
Minimum Snap轨迹规划详解（1）轨迹规划入门
腾讯地图定位
11-29
腾讯地图定位
微信小程序+腾讯地图开发实现路径规划绘制
12-09
现象 我们想用微信小程序实现在map>组件上自定义显示导航路径，但是目前为止官方并未给出相应的方法实现，map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的， 更糟糕的是即便你内置微信小程序JavaScript SDK，它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现，不信你看介绍 解决方案 那我们只能用WebService API咯， 但是不要高兴的太早，根据文档，我们要的接口参数是酱紫的 那么我们开始写（下面是菜鸡版代码，非礼勿视） wx.request()参数的data部分对”from”/”to”赋值不能采用
腾讯位置服务实现轨迹回放
腾讯位置服务
10-16 6848
前言 在地图接入使用中，很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能，所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享。 轨迹回放&小车移动 在JavaScript API GL中，使用MultiMarker（点标记）中的moveAlong()方法 ，可以方便的实现轨迹回放功能，而且您可以对样式进行各种想要的修改，比如修改小车图片、不显示路线或者改成您想要的颜色等。 代码 //初始化地图 var map = new TMap.Map("
vue美团项目开发问题总结
qq_40619263的博客
03-10 523
网址：http://www.tsm1.cn/jmm/dist/index.html 项目技术：vue全家桶+elementUI，用vue-cli 2.x搭建环境 开发流程：需求分析–接口文档–模块开发–npm run build 打包–利用ftp可视化工具上传到服务器 问题一：vue如何引用腾讯地图 看博发现了五花八门的写法，后来转向腾讯地图的官方文档。 解决方如下： 1、在Src文件夹下创建TM...
腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3
m0_65607651的博客
10-21 1055
腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3
腾讯地图实现站点标记，及已标记的点回显在地图上
yolo_link的博客
10-10 2200
腾讯地图实现点标记及回显操作。使用过程中可能会遇到："ReferenceError: TMap is not defined"，"ReferenceError: TMap is not defined"，地图不会重绘，容器内出现多个地图实例等问题，相关的解决方案文中都有对应的解释。
H5腾讯地图选择位置组件
04-28
H5腾讯地图选择位置组件
Multi-Sensor-Fusion-master_传感器融合和轨迹关联_
09-29
多传感器融合介绍：仅仅为多传感信息融合的课程作业多传感器信息融合的课程见仁见智，慎用代码很可能不是您需要的代码内容：1.基于线性状态转移方程的集中式和分布式融合。线性状态转移方程下的集中式和分布式多传感信息融合include: - Kalman Fliter 卡尔曼滤波<br>- SCC-Simple Convex Combination 简单凸组合融合算法<br>- GaussNoise 高斯噪声<br>- Loss Ellipse 误差椭圆<br>- Sequential fusion 集中式序贯融合<br>2.航迹关联PDA：参数：Pg = Pd = 1通过这样的设定简化模型后进行运算预报还是基于KF方法，但是在更新和航迹关联的时候采用概率和全概公式进
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
首先申请腾讯地图key 配置安全域名 详细效果微信搜索小程序【城市科技行】查看
SLAM综述之ORB-SLAM3论文精读: An Accurate Open-Source Library for Visual, Visual-Inertial and Multi-Map SLAM
Jeff_ROS的博客
12-28 2374
论文下载????: ORB-SLAM3: An Accurate Open-Source Library for Visual, Visual-Inertial and Multi-Map SLAM ORB_SLAM3在ubuntu18.04安装和初步测试+轨迹评估这里开始安装测试 摘要 ORB_SLAM3是第一个集合visual, visual-inertial,multi-map的SLAM系统,支持基于针孔镜头模型和鱼眼镜头模型的单目相机,立体视觉双目相机和RDB-D深度相机.这里提一下RGB-
vue+腾讯地图标记弹框
qq_27081015的博客
08-05 2035
腾讯地图添加自定义标记 首先要加载腾讯地图 var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标 //初始化地图 var map = new TMap.Map("container", { center: center }); 然后创建事件 var markerLayer = new TMap.MultiMarker({ i
《前端开发 实践之 腾讯地图API 学习》
yk_ddm的博客
07-12 832
腾讯地图。
UniApp调用腾讯地图TMap
zhangpulin的专栏
10-22 921
uni-app 使用腾讯地图 多种引入方式
腾讯地图GPS轨迹回放
@宝儿姐
06-10 456
前言 当我们使用地图进行开发时，利用已经录制好的轨迹进行轨迹回放来检查导航的准确性是十分常用的手段，并且上一篇已经讲完了关于地图使用时GPS轨迹文件的录制，现在对于安卓系统下使用腾讯导航SDK进行轨迹回放做一个分享 前期准备 腾讯导航SDK依赖于腾讯地图SDK、腾讯定位SDK，具体权限的开通需要去lbs.qq.com 的官网控制台去操作,另外导航SDK的权限可以联系小助手咨询（如下图所示），这里就不多做探讨 轨迹回放正片 系统架构 GPS回放系统分成两部分：GPSPlaybackActivity 和 G
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
微信小程序腾讯地图运行轨迹
08-29
您好！如果您正在寻找微信小程序的地图运行轨迹功能，可以通过以下步骤实现： 1. 在小程序中引入地图 API，并获取用户地理位置授权。 2. 在地图上创建一个图层，并在用户进行运动时，实时更新该图层的坐标点。 3. 将坐标点转换为运动轨迹，并在地图上绘制出来。 4. 可以通过在运动过程中记录下坐标点的时间信息，来计算出用户的运动速度、距离等相关数据。 需要注意的是，为了确保用户隐私，您需要在小程序中明确告知用户您将收集其地理位置信息，并保证不会将该信息用于非法用途。同时，为了提高用户体验，您可以考虑将地图运行轨迹与其他功能（如健康数据记录）相结合，从而更好地为用户提供服务。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值