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

2. 途径 AOI 与 POI 信息

为了丰富地图展示，我们引入了途经的重要兴趣面（AOI）和兴趣点（POI）。

AOI 数据示例：

var jdsq = [
  {"name":"月湖公园","children":[{lat:28.237564,lon:113.033027}],"aoi":""},
  {"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:"湖南广播电视局"},
  // ... 其他兴趣点
];

3. 高速区间道路信息

利用天地图驾车规划服务获取路径坐标。核心逻辑是解析返回的 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);
    // 解析响应并提取路径坐标...
}

核心实现步骤

1. 行驶道路生成与设置

将天地图返回的路径字符串转换为 Leaflet 所需的坐标数组。注意坐标顺序通常是 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);

初始化 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 数组，为每个兴趣面添加多边形或标记。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 的进度事件，实时更新该 Marker 的位置。

首先定义车牌 Marker：

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

成果展示

通过上述步骤，成功实现了车辆在地图上沿规划路线行驶的效果。车辆从马栏山出发，依次经过星沙服务区、长沙黄花国际机场，最终到达永安收费站。车牌信息随车辆同步移动，增强了交互体验。

总结

本项目展示了如何利用 Leaflet-Trackplayer 结合后端地理信息服务，完成高速公路轨迹的 WebGIS 可视化。重点解决了路径坐标转换、动态速度控制及实时位置同步等技术细节。该方案不仅适用于交通监控，也可扩展至物流跟踪、运动记录等场景，具有较高的实用价值。