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

查询结果如下：

{"msg":"ok","location":{"score":71,"level":"区县及以上级行政区划","lon":"113.03667","lat":"28.23593","keyWord":"长沙市马栏山财富广场"},"searchVersion":"7.4.3V","status":"0"}
{"msg":"ok","location":{"score":100,"level":"兴趣点","lon":"113.285187","lat":"28.209144","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 信息如下：

var dataJson = [
  {"lat":28.23457,"lon":113.035247,"p_name":"马栏山"},
  {"lat":28.237538,"lon":113.043587,"p_name":"湖南广播电视局"},
  {"lat":28.233681,"lon":113.048907,"p_name":"湖南省高速公路局"},
  {"lat":28.234513,"lon":113.059526,"p_name":"长永佳苑"},
  {"lat":28.233927,"lon":113.073449,"p_name":"长沙华夏医院"},
  {"lat":28.234986,"lon":113.087125,"p_name":"东二路"},
  {"lat":28.238332,"lon":113.096006,"p_name":"东家屋场"},
  {"lat":28.237954,"lon":113.10586,"p_name":"东六路"},
  {"lat":28.238218,"lon":113.126946,"p_name":"老屋冲"},
  {"lat":28.239806,"lon":113.139774,"p_name":"闻家冲"},
  {"lat":28.237878,"lon":113.149621,"p_name":"长沙绕城高速"},
  {"lat":28.240846,"lon":113.156057,"p_name":"雷鸣城市绿地"},
  {"lat":28.237973,"lon":113.183152,"p_name":"黄花镇人民政府"},
  {"lat":28.223,"lon":113.208016,"p_name":"长沙工程职业技术学院"},
  {"lat":28.211239,"lon":113.253263,"p_name":"瓢塘水库"},
  {"lat":28.211353,"lon":113.275357,"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());
    } catch (JAXBException e) {
        e.printStackTrace();
    }
}

三、leaflet-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 并监听 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 = "行驶中";
    console.log(`progress:${progress} - position:${lng},${lat} - trackIndex:${index}`)
});

4、成果展示

车辆从马栏山出发

图中红框中的即为道路路线信息的坐标。

车辆经过星沙服务区

途径长沙黄花机场

到达永安收费站

四、总结

本文详细介绍了利用 Leaflet-Trackplayer 实现 WebGIS 高速公路轨迹可视化的技术方案。围绕长永高速轨迹可视化，完成了基础数据准备处理，并基于 Leaflet-Trackplayer 进行了代码功能研发，成功实现了免费高速的道路可视化。