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

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

路径规划

利用天地图驾车规划服务获取路线坐标。核心逻辑是解析返回的 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 的灵活配置，实现了动态轨迹回放功能。这种方案为交通数据的数字化展示提供了可行的参考路径。