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

查询结果示例：

{"msg":"ok","location":{ "score":71, "level":"区县及以上级行政区划", "lon":"113.03667", "lat":"28.23593", "keyWord":"长沙市马栏山财富广场"}, "searchVersion":"7.4.3V", "status":"0"}

2、途径重要 AOI 和 POI 信息

展示沿途重要兴趣面（AOI），共 7 个，数据源自百度地图：

var jdsq = [ 
  {"name":"月湖公园",children:[{lat:28.237564,lon:113.033027}],"aoi":""}, 
  {"name":"长沙世界之窗",children:[{lat:28.23595,lon:113.046658}],"aoi":""}, 
  {"name":"金科公园",children:[{lat:28.231451,lon:113.064211}],"aoi":""}, 
  {"name":"香槟小镇",children:[{lat:28.235061,lon:113.078557}],"aoi":""}, 
  {"name":"星沙服务区",children:[{lat:28.240166,lon:113.117113}],"aoi":""}, 
  {"name":"鸽子湖公园",children:[{lat:28.243757,lon:113.162166}],"aoi":""}, 
  {"name":"长沙黄花国际机场",children:[{lat:28.211995,lon:113.223308}],"aoi":""} 
]; 

此外补充辅助 POI 信息丰富效果：

// 途径 POI 信息
var dataJson = [ 
  {lat:28.23457,lon:113.035247,p_name:"马栏山"}, 
  {lat:28.237538,lon:113.043587,p_name:"湖南广播电视局"}, 
  // ... 更多点位
  {lat:28.210105,lon:113.286124,p_name:"金阳雅苑"} 
];

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); 
    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 是轻量级开源 JS 地图库，Trackplayer 是其扩展插件，支持轨迹动态播放、速度控制等功能。

1、行驶道路生成和设置

将天地图返回的路径转为线坐标数组，并绑定到组件：

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

初始化播放器，注意演示时车速设置较快：

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 数据添加标注，同时绘制多边形边界：

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

POI 标注类似，直接采用 Marker 方式。

3、车辆车牌信息模拟跟随

除了模型车运动，还需让车牌信息跟随移动。先定义车牌 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);

监听 Trackplayer 的 progress 事件，实时更新车牌坐标：

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 可视化方案。通过整合天地图地理编码与路径规划接口，配合前端轨迹回放组件，成功实现了长永高速的数字化展示。该实践验证了开源地图库在交通数据价值挖掘中的可行性，为后续路网监控与规划提供了有益参考。