基于 Leaflet-Trackplayer 的 WebGIS 高速轨迹可视化实战
背景与需求
在交通数字化领域,如何直观展示高速公路的运行轨迹是一个常见痛点。以湖南首条免费高速公路——长永高速为例,其于 1994 年通车,连接长沙县与浏阳市,全长 27 公里。随着收费期即将结束(2025 年 11 月),利用 WebGIS 技术对其轨迹进行可视化呈现,不仅有助于交通管理监控,也能为公众出行提供直观参考。
本次实战将结合 Leaflet 地图库与 Trackplayer 插件,实现轨迹的动态回放、速度控制及车辆跟随效果。Leaflet-Trackplayer 支持轨迹播放暂停、动态速度调整、进度条控制以及地图自动跟随等功能,非常适合此类场景。
基础数据准备
要实现流畅的轨迹展示,首先需要整理三类核心空间信息:起止点坐标、途径重要 AOI/POI 以及区间道路路径。
1. 起止点地理编码
为了模拟从长沙收费站到永安收费站的行驶过程,我们使用天地图的地理编码接口获取精确坐标。天地图的优势在于坐标系兼容性好,可直接叠加到底图上。
后端通过 Java 调用天地图 API 获取坐标,示例代码如下:
@Test public void benzeneToLocation() {
String target = "长沙市马栏山财富广场";
String keyWord = "%7B'keyWord':'" + target + "'%7D" ;
HttpResponse<String> resp = tdtOptService.getGeocoder(keyWord, TDT_SERVER_KEY);
System.out.println(resp.getBodyResult());
}
查询结果返回了起始点和终点的经纬度,例如长沙永安收费站的坐标为 lon:113.285187, lat:28.209144。
2. 途径重要 AOI 和 POI
为了让轨迹展示更丰富,我们需要标注沿途的重要兴趣面(AOI)和兴趣点(POI)。这里使用了百度地图的数据源,选取了包括月湖公园、长沙世界之窗、星沙服务区等 7 个关键 AOI。
前端定义数据结构如下:
var jdsq = [
{"name":"月湖公园", children:[{lat:28.237564, lon:113.033027}], "aoi":""},
{"name":"长沙世界之窗", children:[{lat:28.23595, lon:}], :},
];






