基于 Leaflet-Trackplayer 实现高速轨迹 WebGIS 可视化实战

前言

在交通数字化背景下，展示高速公路运行轨迹对规划和管理至关重要。本文将演示如何利用 WebGIS 技术与 Leaflet-Trackplayer 插件，将湖南首条免费高速（长永高速）的轨迹数据直观地呈现在网页上。这不仅涉及地图渲染，更是对空间数据价值的一次实践探索。

背景信息

长永高速概况

长永高速于 1994 年通车，连接黄花机场与长沙市区，全长 27 公里。它是湖南第一条高速公路。值得注意的是，'永'指浏阳永安镇，而非永州。该高速收费期将于 2025 年 11 月到期，之后实行'零费率'。

其他临近到期高速

省内还有多条运营近 30 年的高速即将到期，例如长潭高速、长沙 - 益阳高速等。具体列表如下：

序号	高速名称	起止地点	通车年限
1	长潭高速	长沙市长沙县和湘潭市岳塘区	29 年
2	长沙 - 益阳高速公路	长沙与益阳	27 年
3	益常高速	阳市资阳区与常德市武陵区	26 年
4	潭耒高速	湘潭市岳塘区和衡阳市耒阳市	25 年

技术选型

Leaflet-Trackplayer 是基于 Leaflet 的轨迹回放插件，支持播放控制、速度调整、地图跟随及方向旋转等功能，非常适合此类场景。

数据准备

地理编码

为了获取准确的起止点坐标，我们使用天地图的地理编码接口。选择天地图的优势在于其坐标系可直接叠加到天地图底图，无需二次转换。

@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()); 
}

返回结果包含经纬度信息，例如长沙马栏山财富广场和长沙永安收费站的具体坐标。

AOI 与 POI 数据

为了丰富地图展示，我们引入了途径的重要兴趣面（AOI）和兴趣点（POI）。

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":""}, 
]; 

这些数据可以直接从百度地图等来源获取，用于增强视觉参考。

路径规划

利用天地图驾车规划服务获取路线坐标。核心逻辑是解析返回的 XML 或 JSON 数据，提取路径点。

@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 所需的格式。

var routelatlonArray = []; 
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);

初始化 TrackPlayer 实例时，设置车辆图标和模拟速度。注意，演示中车速设为 800km/h 是为了快速预览，实际应用中需根据真实情况调整。

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);

标注与交互

除了主轨迹，还需标注沿途的 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); 
}

车牌信息的模拟跟随是一个亮点。我们定义一个独立的 Marker 显示车牌号，并通过监听 TrackPlayer 的进度事件实时更新其位置。

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);

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}`) 
});

这样，车牌标签会始终跟随车辆模型移动，增强了交互的真实感。

效果展示

最终效果展示了车辆从马栏山出发，经过星沙服务区、黄花机场，最终到达永安收费站的完整过程。地图视图会自动跟随轨迹移动，确保关键节点始终在视野内。

车辆从马栏山出发

车辆经过星沙服务区

途径长沙黄花机场

到达永安收费站

总结

通过上述步骤，我们完成了长永高速轨迹的 WebGIS 可视化。结合基础数据清洗、路径规划以及 Leaflet-Trackplayer 的灵活配置，实现了动态轨迹回放功能。这种方案为交通数据的数字化展示提供了可行的参考路径。