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

此外，还补充了马栏山、湖南广播电视局等辅助 POI 信息，增强地图的上下文感知。

3. 高速区间道路信息

路径规划是核心环节。我们调用天地图的驾车规划服务，获取起点到终点的最短路线坐标串。核心逻辑是将返回的 XML 或 JSON 解析为坐标数组。

// 调用驾车规划接口
String postStr = "%7B'orig':'" + origInfo + "','dest':'" + destInfo + "','style':'1'%7D";
HttpResponse<String> resp = tdtOptService.drivePlan(postStr, "search", TDT_SERVER_KEY);
// 解析响应并提取路径坐标

运行后得到的路径坐标将作为后续轨迹绘制的依据。

前端实战：轨迹回放与交互

拿到数据后，重点在于如何在 Leaflet 中渲染并驱动它动起来。

1. 行驶道路生成与配置

首先将天地图返回的路径字符串转换为 Leaflet 可识别的经纬度数组。注意坐标顺序通常是 lng,lat，而 Leaflet 需要 [lat, lng]。

var routelatlonArray = new Array();
var routelatlonTarget = routelatlon.split(";");
for(var i=0; i<routelatlonTarget.length; i++) {
    var _tempVal = routelatlonTarget[i].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);

2. 标注 AOI 与 POI

遍历之前准备好的 AOI 数据，使用 L.marker 和 L.divIcon 进行自定义标注。对于 POI 则直接采用标准 Marker 方式，代码逻辑类似，不再赘述。

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({ 
                className: '', 
                popupAnchor:[5,5], 
                html: buildHtml(jdsq[i].name) 
            }) 
        }).addTo(collisionLayer);
    }
    // 绘制 AOI 多边形边界
    L.polygon([convertStr2DataArrayTrans(jdsq[i].aoi)], style).addTo(map);
}

3. 车牌信息模拟跟随

除了车辆模型移动，我们还希望车牌号能实时跟随车辆位置变化。这需要监听 Trackplayer 的 progress 事件，获取当前实时经纬度并更新标记位置。

首先定义一个包含车牌信息的 Marker：

var carNo = "湘 A32MH6/张三";
var sourceMarker = L.marker([28.235638, 113.036629], { 
    icon: L.divIcon({ 
        className: '', 
        html: "<div animation-spaceInDown><div>"+carNo +"</div></div>" 
    }) 
}).addTo(map);

然后在 Trackplayer 事件中绑定更新逻辑：

track.on("progress", (progress, { lng, lat }, index) => { 
    console.log(`progress:${progress} - position:${lng},${lat}`);
    // 实时更新标记位置
    sourceMarker.setLatLng([lat, lng]); 
    control.progress = progress * 100;
    control.status = "行驶中";
});

这样，车牌信息就能像真实的 GPS 设备一样，随着车辆沿轨迹移动。

成果展示

完成上述配置后，即可看到完整的轨迹回放效果。车辆从马栏山出发，途经星沙服务区、长沙黄花机场，最终到达永安收费站。整个过程地图会自动跟随视角切换，配合速度控制和进度条，实现了流畅的交互体验。

总结

本文通过 Leaflet-Trackplayer 插件结合天地图 API，实现了长永高速轨迹的 WebGIS 可视化全流程。从后端地理编码、路径规划，到前端轨迹回放、动态标注，展示了如何利用开源工具快速构建交通数据展示系统。这种方案不仅适用于高速公路，也可扩展至物流跟踪、运动记录等多种场景。