湖南首条免费高速轨迹呈现：借助 Leaflet -Trackplayer 实现 WebGIS 可视化
目录
前言
在交通基础设施建设与数字化技术飞速发展的时代，湖南迎来了其首条免费高速公路的建成通车，这不仅是交通领域的一大突破，更是区域经济发展与民生改善的重要里程碑。然而，如何更好地展示这条高速公路的运行轨迹，为交通管理、规划以及公众出行提供直观，成为了我们亟待解决的问题。将WebGIS 技术与 Leaflet - Trackplayer 的结合，为我们提供了一种创新且高效的解决方案。WebGIS（Web 地理信息系统）是一种基于互联网的地理信息系统，它将地理空间数据的存储、管理、分析和展示等功能通过网络平台实现，打破了传统 GIS 系统对硬件设备和专业软件的依赖，使得地理信息能够更广泛地被大众获取和应用。它具有强大的地图显示、空间查询、地理分析等功能，能够将复杂的地理数据以直观的图形界面呈现给用户，让非专业的普通大众也能够轻松理解和使用地理信息。
在数字化时代，数据的价值不在于其存储和积累，而在于其能够被有效利用和展示，从而为社会创造价值。湖南首条免费高速轨迹的 WebGIS 可视化呈现，正是我们对交通数据价值挖掘的一次积极探索和实践。它不仅是一项技术应用的创新，更是交通领域与数字化技术深度融合的体现，为未来更多交通基础设施的数字化展示和管理提供了有益的借鉴和参考。随着 WebGIS 技术和 Leaflet - Trackplayer 等相关工具的不断发展和完善，我们相信湖南首条免费高速的轨迹展示将更加丰富、生动和智能。
一、相关背景
将湖南首条免费高速的轨迹数据通过 Leaflet - Trackplayer 嵌入到 WebGIS 系统中，可以实现多方面的优势。首先，从交通管理的角度来看，交通管理部门能够实时监控高速公路的车辆运行轨迹，通过分析轨迹数据，可以更精准地掌握交通流量、车速分布、拥堵点等信息，从而为交通疏导、事故预防、道路维护等工作提供科学依据，提高交通管理的效率和决策的准确性。本节首先将对长永高速和leaflet-trackplayer的相关知识进行简单介绍。
1、湖南首条免费高速-长永高速
1994年12月28日，长永高速公路建成通车。据悉，这条高速公路于1993年开工修建，全长27公里，连接黄花机场和长沙市区。这是湖南的第一条高速公路。长永高速，即长沙—永安高速公路，是连接长沙县与浏阳市的高速公路，西起长沙收费站，东止于浏阳市永安镇永安收费站。这条高速的通车建成，彻底终结了湖南“无高速公路”的历史。之前在网上看到很多朋友说长永高速，是不是长沙到永州的，这是一个误会，这里的永指的是浏阳的永安，而不是湖南的永州市。
长永高速公路收费期将于2025年11月1日到期。根据有关规定，借鉴外省做法，长永高速公路收费期到期后，保留现有收费设施，实行“零费率”方式终止收费，并由湖南省高速公路集团有限公司负责运营。自2025年11月2日0时起，对通行长永高速公路主线、匝道及连接线的车辆，按“0元”计算车辆通行费。长永高速公路以“零费率”方式终止收费。何为“零费率”？即对通行本路段的所有车辆按“0元”计算车辆通行费，并代为收取其他路段的车辆通行费。就正常通行而言，现有收费设施仍然保留，车辆进出收费站时依旧需要正常领卡，办理了ETC通行的车辆同样需走ETC通道进入高速。
2、还有哪些快到30年的高速
除了长永高速外，以下这些高速的运营期也即将到30年。如下表：
| 序号 | 高速名称 | 起止地点 | 通车年限 |
| 1 | 长潭高速 | 长沙市长沙县和湘潭市岳塘区 | 29年 |
| 2 | 长沙-益阳高速公路 | 长沙与益阳 | 27年 |
| 3 | 益常高速 | 阳市资阳区与常德市武陵区 | 26年 |
| 4 | 潭耒高速 | 湘潭市岳塘区和衡阳市耒阳市 | 25年 |
长沙—湘潭高速公路，简称“长潭高速”，连接长沙市长沙县和湘潭市岳塘区，是G4京港澳高速的组成部分之一，1996年12月通车运营，截至目前已通车近29年；长沙-益阳高速公路，这是连接长沙与益阳的第一条高速公路，是G5513长张高速公路的重要组成部分，1998年7月通车运营，截至目前已通车27年；益阳—常德高速公路，简称“益常高速”，连接益阳市资阳区与常德市武陵区，是G5513长张高速公路的重要组成部分，1999年12月通车运营，截至目前已通车近26年；湘潭—耒阳高速公路，简称“潭耒高速”，连接湘潭市岳塘区和衡阳市耒阳市，是G4京港澳高速的组成部分之一，2000年12月通车运营，截至目前已通车近25年。
3、leaflet-trackplayer相关知识
Leaflet-Trackplayer 是一个基于 Leaflet 的轨迹回放插件，具有以下核心功能：
- 轨迹播放与暂停：支持轨迹的播放、暂停和继续。
- 动态速度调整：用户可以通过下拉菜单实时调整轨迹播放速度。
- 进度条控制：提供进度条，用户可以通过拖动进度条跳转到特定的轨迹位置。
- 地图跟随移动：地图视图会自动跟随轨迹移动，确保轨迹始终在视野内。
- 轨迹方向旋转：标记（marker）会根据轨迹方向自动旋转，增强视觉效果。
- 自定义设置：支持自定义标记图标、轨迹颜色等，满足不同场景的需求
Leaflet-Trackplayer 在多个领域有广泛的应用场景：
- 物流跟踪系统：实时展示货物的运输轨迹，帮助管理人员监控货物的运输状态。
- 运动轨迹记录：在运动应用中，用户可以记录自己的运动轨迹，并使用该插件进行回放，分析运动路线和速度。
- 导航系统：展示用户的行驶轨迹，提供历史轨迹回放功能
二、基础数据准备
对于城市规划者而言，这条高速公路的轨迹可视化有助于他们更好地了解区域交通网络的运行状况，评估高速公路对周边地区的交通辐射作用和经济发展带动效应，进而优化城市交通规划布局，合理规划沿线土地利用，促进区域协调发展。而对于广大公众来说，WebGIS 轨迹可视化的应用使他们能够直观地了解湖南首条免费高速的路线走向、路况信息等，方便他们提前规划出行路线，避开拥堵路段，提高出行效率。同时，这种可视化的展示方式也增加了公众对交通基础设施建设成果的感知度和认同感，提升了公众对交通出行的满意度。为了实现长永高速的通行道路展示，我们需要整理高速起始点、途径重要AOI和POI点和区间道路路线等空间信息。下面将使用天地图来进行综合构建。
1、高速起止点地理编码
为了模拟从长沙收费站到永安收费站，这里我们使用的道路起始点分别使用“长沙市马栏山财富广场”到“长沙永安收费站”，这里我们使用天地图的地理编码接口，使用天地图的好处是得到的坐标不需要进行转换，可以直接叠加到天地图的底图上。根据起止点获取对应的坐标点的实现方法如下：
@Test public void benzeneToLocation() { String target = "长沙市马栏山财富广场"; String keyWord = "%7B'keyWord':'" + target + "'%7D" ; HttpResponse<String> resp = tdtOptService.getGeocoder(keyWord, TDT_SERVER_KEY); System.out.println(resp.getBodyResult()); }通过查询地理编码接口，得到我们模拟的起始点位置如下：
{"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和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":""}, ]; AOI的数据大家可以直接从百度地图获取，由于边界负责，这里不贴出具体边界。除了AOI之外，还可以增加一些辅助的POI信息，让整体的效果看起来更丰富一些。POI准备了以下信息：
//途径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";//长沙永安收费站 // style 默认0 （0：最快路线，1：最短路线，2：避开高速，3：步行） // 这里选择最短路线 String postStr = "%7B'orig':'" + origInfo + "','dest':'" + destInfo + "','style':'1'%7D" ; HttpResponse<String> resp = tdtOptService.drivePlan(postStr,"search",TDT_SERVER_KEY); try { System.out.println(resp.getBodyResult()); 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()); System.out.println("起始点: " + result.getParameters().getOrig()); // 输出其他需要的数据... Gson gson = new Gson(); System.out.println("json格式化如下："); System.out.println(gson.toJson(result)); System.out.println(result); } catch (JAXBException e) { e.printStackTrace(); } }运行以上程序后，可以得到以下数据：
图中红框中的即为道路路线信息的坐标。有了以上三类信息之后，下面就可以使用leaflet-trackplayer组件来进行轨迹模拟。
三、leaflet-trackplayer实战
Leaflet 是一个轻量级的开源 JavaScript 地图库，它专注于移动设备和性能优化，能够快速地在网页上生成交互式地图。它易于使用，拥有丰富的插件生态系统，可以方便地扩展其功能。Trackplayer 则是一个基于 Leaflet 的扩展插件，专门用于在地图上播放和展示轨迹数据。它支持多种轨迹数据格式，能够实现轨迹的动态播放、速度控制、方向指示等功能，为用户提供了生动、形象的轨迹展示体验。
1、行驶道路生成和设置
在leaflet-trackplayer组件中，为了实现道路的自动轨迹播放，需要我们来设置行驶的轨迹道路。在经过上一节的内容讲解中，我们知道了如何生成道路区间信息，这里我们将分两个部分展开，即道路生成和设置。首先来看下如何将通过天地图获取的规划路线转为线坐标。核心方法如下：
var; 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);在得到了以上的道路坐标后，我们将道路路线坐标与leaflet-trackplayer组件进行绑定，核心方法如下：
let track = new L.TrackPlayer(path, { markerIcon: L.icon({ iconSize: [27, 54], //iconUrl: "./lib/assets/car.png", iconUrl: "./lib/assets/bus_online.png", iconAnchor: [13.5, 27], }), speed: 800, }); track.addTo(map);这里注意一下行驶车辆的速度，为了能快速展示整条道路，这里设置车速为800公里/小时，此处为演示，实际情况车速不能这么快。
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组件中监听变化数据，并将实时的经纬度坐标设置到mark上即可，实现代码如下：
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、成果展示
最后是成果展示时间，我们来看一下具体的效果：
车辆从马栏山出发
车辆经过星沙服务区
途径长沙黄花机场
到达永安收费站
更详细的视频效果点击链接：120秒一镜到底来看湖南首条免费高速-【长沙到浏阳永安】。
四、总结
以上就是本文的主要内容，文章详细的介绍了湖南首条免费高速轨迹的 WebGIS 可视化呈现，也是对交通数据价值挖掘的一次积极探索和实践。文章不仅详细的介绍了湖南省的首条免费高速公路，同时再次详细介绍了leaflet-trackplayer组件，围绕长永高速轨迹可视化，我们进行基础数据准备处理，最后基于leaflet-trackplayer进行了代码功能研发，并成功实现免费高速的道路可视化。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
