当前位置：首页 > news >正文

mapbox实现添加历史轨迹，并进行动画播放效果

news 2025/9/14 11:01:32

1、引入播放插件类

https://download.csdn.net/download/qq_48795482/90437319

2、添加图层

drawRouteLine(resData, layerType) {console.log("调用了轨迹线函数", resData);var jsondata = {type: "FeatureCollection",features: [],};var linejsondata = {type: "FeatureCollection",features: [{type: "Feature",geometry: { type: "LineString", coordinates: [] },properties: { num: 0 },},],};resData.forEach((item, index) => {if (item.longtitude == "" || item.latitude == "") {return true;}// var wgs84Coords = this.LayerManager.getWGS84Position(item.longtitude, item.latitude);jsondata.features.push({type: "Feature",geometry: {type: "Point",coordinates: [item.longtitude, item.latitude],},properties: {no: index,X: item.longitude,Y: item.latitude,REPORTTIME: item.positionTimeFormat,},});linejsondata.features[0].geometry.coordinates.push([item.longitude,item.latitude,]);linejsondata.features[0].properties.num = index;});// let source = {//   data: linejsondata// }// var layerOption = {//   'line-color': 'rgb(255,165,0)',//   'line-width': 5// }// window.LayerManager.addGeoJsonLayer(window.lyrPrefix + 'inspectroute', source, layerOption)var imgUrl = require("@/assets/banxian_route.png");var sImgUrl = require("@/assets/start.png");var eImgUrl = require("@/assets/end.png");this.routeReplay = new RouteReplay(this.map,linejsondata,imgUrl,sImgUrl,eImgUrl,2,jsondata);}

3、调用实例的start开始进行动画播放

this.routeReplay.start();

详细操作可下载上方的插件类资源，进行代码的修改。

ps:

1、插件参数解析：

this.map,地图实例
linejsondata,轨迹线图层geojson格式数据
imgUrl,播放动画图标
sImgUrl,起点图标
eImgUrl,终点图标
2,无所谓
jsondata，轨迹点位图层geojson格式数据，用于构建小车完整轨迹点（对应插件里的变量_newRouteGeoJson,最终构建小车实时点位图层数据_animatePointGeoJson，里面就一个实时点）

查看全文

http://www.lryc.cn/news/543713.html