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

2. 途径重要 AOI 和 POI 信息

为丰富展示效果，引入百度地图获取的 7 个兴趣面（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.240166,lon:113.117113}],"aoi":""},
  // ... 其他 AOI 数据
];

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

3. 高速区间道路信息

调用天地图驾车规划服务获取路径坐标。选择最短路线模式（style=1），解析返回的 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);
    // 解析响应数据...
}

运行后可获得包含红框坐标的道路路线信息，这是后续轨迹生成的基础。

三、leaflet-trackplayer 实战

1. 行驶道路生成和设置

首先将天地图获取的规划路线转为线坐标数组。注意经纬度顺序的转换（天地图通常为 lon,lat，而 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);

绑定轨迹到组件时，可自定义车辆图标及速度。演示中车速设为 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 时，遍历数据创建 Marker 并添加到图层。对于 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({
                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. 车辆车牌信息模拟跟随

为了让展示更生动，除了模型车辆运动外，还实现了车牌信息的跟随效果。定义一个独立的 Marker 用于显示车牌，并通过监听 TrackPlayer 的 progress 事件更新其位置。

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

4. 成果展示

最终效果展示了车辆从马栏山出发，经过星沙服务区、长沙黄花机场，最终到达永安收费站的完整过程。车牌信息随车辆同步移动，增强了交互体验。

四、总结

本文详细介绍了基于 Leaflet-Trackplayer 实现高速轨迹 WebGIS 可视化的全过程。从基础数据准备（地理编码、POI/AOI 采集、路径规划）到前端代码实现（轨迹绑定、坐标解析、事件监听），完成了一次完整的交通数据价值挖掘实践。该方案不仅适用于高速公路，也可推广至物流监控、运动轨迹分析等领域，为交通基础设施的数字化展示提供了可行的技术参考。