084：vue+mapbox 轨迹动画

于 2025-06-26 07:45:00 发布
阅读量140 收藏 2
点赞数 5
CC 4.0 BY-SA版权
分类专栏： # mapboxGL示例教程100+ 文章标签： 大剑师 mapbox示例 mapbox动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/148873903

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 084个示例

文章目录

一、示例效果图

在这里插入图片描述

二、示例简介

本示例演示如何在vue+mapbox中实现轨迹动画。它使用了 Turf.js 进行地理空间计算，创建了一个沿着预设路线移动的标记（Marker）动画效果。

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/9327810546
或者同样查看：

了解本专栏 订阅专栏 解锁全文
mapbox基础，使用geojson加载cluster聚合图层
我哎GIS博客
03-31 369
本文详细介绍如何基于mapbox-gl v3.*.* 版本，使用geojson加载cluster聚合图层，亲测可用。希望能帮助到您。一起学习，加油！加油！
【MapBox】实现实时飞行轨迹功能
Mozifei73的博客
04-02 1344
实现获取到无人机的推送点位数据实时飞行的功能。
Mapbox循环动态轨迹
Sakura1998gis的博客
05-26 1145
Mapbox循环动态轨迹
echarts+mapbox 轨迹热力图
11-14
echarts+mapbox渲染实现轨迹热力图的可视化展示，数据均为模拟数据。
mapboxGL学习——多段线路marker运动动画轨迹。途径点暂停并弹出相关信息
qq_28551707的博客
03-13 762
这里需要注意的是，后台返回的数据，有n个途经点 就有n+1段路径。每一段路径的终点就是途经点，或者说 每一段的起点也是途经点（除了起点之外）。代码：这里随便截选了一个点作为停留点。停留时间由setTimeout里面的时间决定。也需要手动将每一段的终点（或者起点）加入到对应的数组中。主要逻辑和主要方法都和。
mapbox实现添加历史轨迹，并进行动画播放效果
qq_48795482的博客
02-27 396
详细操作可下载上方的插件类资源，进行代码的修改。3、调用实例的start开始进行动画播放。
071：vue+openlayers 轨迹路线动画（图文代码）
大剑师兰特的GIS世界
08-19 1941
本示例的目的是介绍演示如何在vue+openlayers中实现轨迹动画，本示例为网上别人的一个引用，感觉很好，应用地址请见相关API参考。
vue+mapbox通过地图添加自定义图层、聚合、点击等(工作笔记，不能直接复制使用，需要自行调整部分代码)
_小郑有点困了的博客
09-05 1373
mapbox聚合显示、自定义图层图标点等。
273：vue+openlayers 显示流动轨迹并计算航向
大剑师兰特的GIS世界
07-04 1578
本示例介绍如何在vue+openlayer中显示流动轨迹并计算航向。这里要注意角度和弧度的转换，并且以正北为主方向，做不同的转变。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果**
MapBox历史轨迹
Sakura1998gis的博客
08-16 367
MapBox历史轨迹
代码如何实现轨迹_在 Mapbox 地图上如何实现轨迹复现？进来看设计思路和整套代码...
weixin_39978696的博客
12-10 978
Building a cross-country road trip for the 50 States Project2020 年，是不是会有诸如“用一年的时间走遍美国的 50 大洲“这类看似很难实现的愿望从心中飘过？其实在 2019 年，已经有一群人实现了这个愿望，并在 Mapbox Community Team（之前介绍过的，一个专注公益项目的团队） 的支持下，将路线图做成了一张交互地图。实...
Mapbox实现动态轨迹
qq_44741716的博客
11-10 2496
基于Mapbox实现动态轨迹
mapboxGL轨迹展示与播放
热门推荐
LZUGIS
12-20 3万+
历史轨迹回放是GIS很常见的一个功能，本文结合turf.js实现轨迹的展示与播放动画。
Mapbox 轻松规划起始点轨迹
林恒的博客
11-26 668
【代码】Mapbox 轻松规划起始点轨迹。
使用mapbox实现动态轨迹，设置对象图标，点击弹出框
weixin_41165803的博客
01-25 4918
mapbox动态轨迹及对象标识、还有弹出框
MapBox添加带箭头的轨迹线
Mozifei73的博客
03-12 1209
【代码】MapBox添加带箭头的轨迹线。
Mapbox gl HTML经纬度点渲染，动态轨迹播放，自定义图形以及轨迹上显示箭头方向
qq_40985985的博客
09-16 1406
今天要排查个问题，需要显示多个经纬度点连接成线段的方向，于是尝试下展示。1. mapbox渲染经纬度点，线，多线，面 2. 运动轨迹增加箭头方向 3. 增加一个图像（如小车等）本文用的tomcat小猫图标，实行运动轨迹可控制，开始，播放，停止
MapboxGL——marker轨迹动画效果，自定义速度。暂停继续轨迹运动
qq_28551707的博客
03-13 2801
turf.along和turf.lineChunk出来的数据，只包含坐标点. 如果终点在室内，那么就办法设置楼层。所以直接用turf.along和turf.lineChunk处理的数据不符合我们的要求。需要手动的终点的放入分割之后的数组中。拿到数据之后 二次处理。这样anverageLine里面的信息都是我们所需要的。这样可以分别得到线段数据，处理之后的距离，处理之后每段路程所在的楼层，和每段路线的终点。拿到这些数据之后，我们就可以根据数据设置我们想要的效果了。轨迹运动的核心是不断变动marker的坐标。
mapbox画历史轨迹
最新发布
04-03
### 使用 Mapbox API 绘制历史轨迹 为了在 Vue.js 中使用 Mapbox GL JS 实现历史轨迹的绘制，可以按照以下方法操作。以下是详细的说明和示例代码。 #### 1. 初始化 Mapbox 地图 首先需要初始化 Mapbox 地图，并将其绑定到 HTML 页面中的容器上。通过 `mapboxgl.Map` 构造函数创建地图实例[^4]。 ```javascript import mapboxgl from 'mapbox-gl'; // 设置访问令牌 mapboxgl.accessToken = 'your_mapbox_access_token'; // 创建地图实例 const map = new mapboxgl.Map({ container: 'map', // 地图容器ID style: 'mapbox://styles/mapbox/streets-v11', center: [lon, lat], // 初始中心点坐标 zoom: 9 // 初始缩放级别 }); ``` #### 2. 准备历史轨迹数据 历史轨迹通常由一系列地理坐标组成，每组坐标表示某个时间点的位置。假设有一个 JSON 数组存储了这些位置： ```json [ { "timestamp": "2023-01-01T12:00:00Z", "coordinates": [-73.9948, 40.7504] }, { "timestamp": "2023-01-01T12:01:00Z", "coordinates": [-73.9943, 40.7507] }, ... ] ``` 将此数组转换为 GeoJSON LineString 格式以便于绘图[^1]。 ```javascript function createLineStringFromHistory(historyData) { const coordinates = historyData.map(item => item.coordinates); return { type: 'Feature', geometry: { type: 'LineString', coordinates } }; } ``` #### 3. 添加轨迹线层 利用 Mapbox 的 `addLayer` 方法向地图添加一条轨迹线条。这一步骤会基于前面准备好的 GeoJSON 数据渲染轨迹。 ```javascript map.on('load', () => { const lineString = createLineStringFromHistory(historyData); map.addSource('route', { type: 'geojson', data: lineString }); map.addLayer({ id: 'route-layer', type: 'line', source: 'route', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#ff0000', 'line-width': 4 } }); }); ``` #### 4. 动态播放轨迹动画（可选） 如果希望模拟动态的历史轨迹回放效果，则可以在一定的时间间隔内逐步更新显示的部分路段[^2]。 ```javascript let currentStep = 0; const totalSteps = historyData.length; function animateRoute() { if (currentStep >= totalSteps) return; const updatedCoordinates = historyData.slice(0, ++currentStep).map(item => item.coordinates); map.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: updatedCoordinates } }); requestAnimationFrame(animateRoute); // 循环调用直到结束 } requestAnimationFrame(animateRoute); ``` --- ### 总结 上述过程展示了如何借助 Mapbox GL JS 库，在 Vue.js 环境下实现历史轨迹的静态展示与动态动画功能。具体实现了从基础的地图加载、GeoJSON 转换到最后的分步动画呈现整个流程[^1]. ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值