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

2. 途径重要 AOI 和 POI

为了丰富地图信息，我们引入了 7 个关键 AOI（如月湖公园、星沙服务区等）以及沿途的 POI 点位。这些数据可以直接从百度地图获取。

var jdsq = [ 
    {"name":"月湖公园", children:[{lat:28.237564, lon:113.033027}]}, 
    {"name":"长沙世界之窗", children:[{lat:28.23595, lon:113.046658}]}, 
    // ... 其他 AOI 数据
]; 

// 辅助 POI 信息
var dataJson = [
    {lat:28.23457, lon:113.035247, p_name:"马栏山"}, 
    {lat:28.237538, lon:113.043587, p_name:"湖南广播电视局"}, 
    // ... 其他 POI 数据
];

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); 
    // 解析响应获取路径坐标...
}

实战开发

1. 行驶道路生成与设置

获取到的路径字符串需要转换为 Leaflet 可识别的坐标数组。注意处理分隔符和经纬度顺序。

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

遍历数据源，为每个兴趣点添加 Marker。对于 AOI，还可以绘制多边形区域。

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({ 
                popupAnchor:[5,5], 
                html: buildHtml(jdsq[i].name) 
            }) 
        }).addTo(collisionLayer); 
    } 
    L.polygon([convertStr2DataArrayTrans(jdsq[i].aoi)], style).addTo(map); 
}

3. 车牌信息模拟跟随

为了让演示更生动，我们在车辆上叠加了一个显示车牌信息的 Marker，并监听 TrackPlayer 的进度事件来同步位置。

首先定义静态 Marker：

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

监听 progress 事件更新坐标：

track.on("progress", (progress, { lng, lat }, index) => { 
    console.log(`progress:${progress} - position:${lng},${lat}`); 
    sourceMarker.setLatLng([lat, lng]); 
    control.progress = progress * 100; 
});

4. 成果展示

最终效果展示了车辆从马栏山出发，途经星沙服务区、长沙黄花机场，最终到达永安收费站的完整过程。地图会自动跟随车辆移动，且车牌信息始终悬浮于车辆上方。

总结

通过本案例，我们完成了利用 Leaflet-Trackplayer 进行 WebGIS 轨迹可视化的全流程。从后端数据接口调用到前端轨迹渲染与交互，这套方案不仅适用于高速公路监控，也可扩展至物流配送、户外运动等多种场景。在实际应用中，建议根据网络状况优化数据加载策略，并合理设置回放速度以提升用户体验。