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

此外，还补充了如马栏山、湖南广播电视局等辅助 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); 
    // 解析响应数据...
}

解析后的坐标串是后续前端渲染的基础。

核心实现

有了数据支撑，接下来就是在前端进行可视化组装。Leaflet 提供了轻量级的地图容器，而 Trackplayer 则负责处理轨迹动画逻辑。

1. 初始化与路径绑定

首先加载地图实例，并将后端返回的路径坐标转换为 Leaflet 所需的格式。注意坐标顺序通常是 [lat, lng]。

var routelatlonArray = new Array(); 
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 对象，并设置车辆图标。这里为了演示效果，我们将车速设定得较快，实际生产环境中应根据真实路况调整。

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 数组，为每个区域添加多边形图层，同时为子节点添加标记。代码逻辑上需要处理坐标转换和 HTML 弹窗内容的构建。

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

3. 车牌跟随效果

为了让演示更生动，我们不仅显示车辆模型，还增加了一个包含车牌信息的标记，并让它跟随车辆同步移动。这需要监听 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 = "行驶中"; 
});

效果展示

完成上述步骤后，即可看到车辆在地图上沿规划路线行驶的动画。从马栏山出发，经过星沙服务区，途径长沙黄花机场，最终到达永安收费站。

结语

本案例完整展示了从数据获取、处理到前端可视化的全流程。通过 Leaflet 与 Trackplayer 的配合，我们能够低成本地实现交通轨迹的动态回放，为交通管理、规划及公众出行提供直观的参考依据。在实际应用中，可根据具体业务需求进一步优化路径精度与交互体验。