跳到主要内容基于 Leaflet Trackplayer 的高速公路轨迹 WebGIS 可视化实战 | 极客日志JavaScript大前端java
基于 Leaflet Trackplayer 的高速公路轨迹 WebGIS 可视化实战
利用 Leaflet-Trackplayer 插件实现高速公路轨迹的 WebGIS 可视化展示。项目以湖南长永高速为例,整合天地图地理编码与路径规划接口获取起止点及路线坐标,结合百度地图数据补充沿途 AOI 与 POI 信息。核心逻辑包括轨迹数据解析、播放器初始化配置、车辆模型跟随车牌信息的动态更新。通过进度事件监听同步标记位置,完成从起点到终点的模拟行驶效果。该方案为交通流量监控、路网规划提供了直观的数据呈现方式,验证了开源地图库在交通数字化场景中的落地可行性。
lzdxwyh1 浏览 前言
在交通基础设施数字化进程中,如何直观展示高速公路的运行轨迹是一个常见需求。将 WebGIS 技术与 Leaflet-Trackplayer 结合,能有效解决传统 GIS 系统对专业软件依赖过重的问题,让非专业人员也能轻松理解复杂的地理信息。

数据的价值在于利用与展示。湖南首条免费高速轨迹的可视化,不仅是技术应用的创新,也为未来更多交通基础设施的数字化管理提供了参考。
一、相关背景
通过 Leaflet-Trackplayer 嵌入 WebGIS 系统,交通管理部门可实时监控车辆运行轨迹,分析流量、车速及拥堵点,为疏导和决策提供依据。
1、湖南首条免费高速 - 长永高速
长永高速公路(长沙—永安)于 1994 年 12 月 28 日通车,全长 27 公里,连接黄花机场和长沙市区,终结了湖南'无高速公路'的历史。这里的'永'指浏阳永安,而非永州。
该高速收费期将于 2025 年 11 月 1 日到期。到期后实行'零费率',即通行费按 0 元计算,但现有收费设施保留,ETC 车辆仍需走 ETC 通道。
2、还有哪些快到 30 年的高速
除长永高速外,以下高速运营期也即将届满:
| 序号 | 高速名称 | 起止地点 | 通车年限 |
| 1 | 长潭高速 | 长沙市长沙县和湘潭市岳塘区 | 29 年 |
| 2 | 长沙 - 益阳高速公路 | 长沙与益阳 | 27 年 |
| 3 | 益常高速 | 阳市资阳区与常德市武陵区 | 26 年 |
| 4 | 潭耒高速 | 湘潭市岳塘区和衡阳市耒阳市 | 25 年 |
3、leaflet-trackplayer 相关知识
Leaflet-Trackplayer 是基于 Leaflet 的轨迹回放插件,核心功能包括:
- 轨迹播放控制:支持播放、暂停、继续。
- 动态速度调整:实时调节播放速率。
- 进度条跳转:拖动进度条定位特定位置。
- 地图跟随:视图自动跟随轨迹移动。
- 方向指示:标记随轨迹方向自动旋转。
适用于物流跟踪、运动记录及导航系统历史轨迹回放等场景。
二、基础数据准备
实现长永高速通行道路展示,需整理起始点、途径 AOI/POI 及区间道路路线等空间信息。本例使用天地图构建底图数据。
1、高速起止点地理编码
模拟从长沙收费站到永安收费站,起点设为'长沙市马栏山财富广场',终点为'长沙永安收费站'。使用天地图地理编码接口获取坐标,优势在于无需转换坐标系即可叠加到天地图底图上。
@Test public void benzeneToLocation() {
String target ;
+ target + ;
HttpResponse<String> resp = tdtOptService.getGeocoder(keyWord, TDT_SERVER_KEY);
System.out.println(resp.getBodyResult());
}
=
"长沙市马栏山财富广场"
String
keyWord
=
"%7B'keyWord':'"
"'%7D"
{"msg":"ok","location":{ "score":71, "level":"区县及以上级行政区划", "lon":"113.03667", "lat":"28.23593", "keyWord":"长沙市马栏山财富广场"}, "searchVersion":"7.4.3V", "status":"0"}
2、途径重要 AOI 和 POI 信息
展示沿途重要兴趣面(AOI),共 7 个,数据源自百度地图:
var jdsq = [
{"name":"月湖公园",children:[{lat:28.237564,lon:113.033027}],"aoi":""},
{"name":"长沙世界之窗",children:[{lat:28.23595,lon:113.046658}],"aoi":""},
{"name":"金科公园",children:[{lat:28.231451,lon:113.064211}],"aoi":""},
{"name":"香槟小镇",children:[{lat:28.235061,lon:113.078557}],"aoi":""},
{"name":"星沙服务区",children:[{lat:28.240166,lon:113.117113}],"aoi":""},
{"name":"鸽子湖公园",children:[{lat:28.243757,lon:113.162166}],"aoi":""},
{"name":"长沙黄花国际机场",children:[{lat:28.211995,lon:113.223308}],"aoi":""}
];
var dataJson = [
{lat:28.23457,lon:113.035247,p_name:"马栏山"},
{lat:28.237538,lon:113.043587,p_name:"湖南广播电视局"},
{lat:28.210105,lon:113.286124,p_name:"金阳雅苑"}
];
3、高速区间道路信息
调用天地图驾车规划服务获取路径坐标。核心逻辑如下:
@Test public void xml2JavaBean() {
String origInfo = "113.03667,28.23593";
String destInfo = "113.285187,28.209144";
String postStr = "%7B'orig':'" + origInfo + "','dest':'" + destInfo + "','style':'1'%7D";
HttpResponse<String> resp = tdtOptService.drivePlan(postStr,"search",TDT_SERVER_KEY);
try {
JAXBContext context = JAXBContext.newInstance(TdtResult.class);
Unmarshaller unmarshaller = context.createUnmarshaller();
TdtResult result = (TdtResult) unmarshaller.unmarshal(new StringReader(resp.getBodyResult()));
System.out.println("距离:" + result.getDistance());
System.out.println("时长:" + result.getDuration());
Gson gson = new Gson();
System.out.println(gson.toJson(result));
} catch (JAXBException e) {
e.printStackTrace();
}
}
运行后可得包含路线坐标的数据,红框区域即为道路路径信息。
三、leaflet-trackplayer 实战
Leaflet 是轻量级开源 JS 地图库,Trackplayer 是其扩展插件,支持轨迹动态播放、速度控制等功能。
1、行驶道路生成和设置
var routelatlonArray = new Array();
var routelatlonTarget = routelatlon.split(";");
for(var i=0;i < routelatlonTarget.length;i++){
var routelatlonVal = routelatlonTarget[i];
if("" != routelatlonVal){
var _tempVal = routelatlonVal.split(",");
routelatlonArray.push({lat:_tempVal[1],lng:_tempVal[0]});
}
}
const path = routelatlonArray;
map.fitBounds(path);
let track = new L.TrackPlayer(path, {
markerIcon: L.icon({
iconSize: [27, 54],
iconUrl: "./lib/assets/bus_online.png",
iconAnchor: [13.5, 27],
}),
speed: 800,
});
track.addTo(map);
2、途径重要 AOI 和 POI
for(var i=0;i<jdsq.length;i++){
for(var j = 0;j<jdsq[i].children.length;j++){
var tempInfo = jdsq[i].children;
var marker = L.marker([tempInfo[j].lat, tempInfo[j].lon], {
icon: L.divIcon({
iconSize: null,
className: '',
popupAnchor:[5,5],
shadowAnchor:[5,5],
html: buildHtml(jdsq[i].name)
})
}).addTo(collisionLayer);
}
L.polygon([ convertStr2DataArrayTrans(jdsq[i].aoi) ],style).addTo(map);
}
3、车辆车牌信息模拟跟随
除了模型车运动,还需让车牌信息跟随移动。先定义车牌 Marker:
var carNo = "湘 A32MH6/张三";
var sourceMarker = L.marker([28.235638, 113.036629], {
icon: L.divIcon({
iconSize: null,
className: '',
popupAnchor:[5,5],
shadowAnchor:[5,5],
html: "<div animation-spaceInDown><div>"+carNo +"</div>" +"</div>"
})
}).addTo(map);
监听 Trackplayer 的 progress 事件,实时更新车牌坐标:
track.on("progress", (progress, { lng, lat },index) => {
control.carLatLng = `${lng},${lat}`;
console.log(sourceMarker);
sourceMarker.setLatLng([lat, lng]);
control.progress = progress * 100;
control.status = "行驶中";
console.log(`progress:${progress} - position:${lng},${lat} - trackIndex:${index}`)
});
4、成果展示
最终效果展示了车辆从马栏山出发,途经星沙服务区、长沙黄花机场,最终到达永安收费站的完整过程。
车辆从马栏山出发
车辆经过星沙服务区
途径长沙黄花机场
到达永安收费站
四、总结
本文介绍了基于 Leaflet-Trackplayer 的高速公路轨迹 WebGIS 可视化方案。通过整合天地图地理编码与路径规划接口,配合前端轨迹回放组件,成功实现了长永高速的数字化展示。该实践验证了开源地图库在交通数据价值挖掘中的可行性,为后续路网监控与规划提供了有益参考。
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online