目录
前言
今天是大年初一，在蛇年的第一天里，给各位朋友拜个年。祝各位亲爱的朋友们，蛇年新春到，愿你们代码如行云流水，bug无影无踪，项目顺利上线，薪资节节攀升。新的一年，技术不断精进，生活充满惊喜，身体健健康康，心情美美哒！在这样欢乐祥和的节日氛围中，不知道各位看了之前推荐给大家的蛇年优免景点没，是否带着家人去享受了以下欢乐没没有？
双层巴士也短暂出现过长沙人民生活中，20世纪90年代后期，长沙运营过双层巴士线路，但没过多久就消失了。当时，双层巴士因城市限高、油耗、乘客站立舒适度、分区售票等问题，未能实现长久、稳定的运行。然而最近通过政府的公交线路调整公告的说明可以看到。在长沙这座充满活力与魅力的城市，湘江之畔的风景如诗如画，湘江双层观光巴士即将作为一种新的旅游方式回归我们的生活。这不仅是一次简单的出行，更是一场穿越古今、领略湖湘文化精髓的奇妙之旅。随着科技的飞速发展，WebGIS（网络地理信息系统）技术的融入，让这场旅行变得更加生动、便捷与智能化，仿佛为游客打开了一扇通往长沙历史与现代交融的神奇之门。先将效果一睹为快，将完成的动态轨迹播放给大家展示出来。
基于Leaflet.TrackPlaye的城市观光路线
本文将重点介绍基于Leaflet.TrackPlayer的湘江一号双层观光巴士行驶轨迹播放实践。通过以观光巴士的第一视角，沿着湘江中路而上，从橘子洲头到西园北里，穿越多个商圈和网红打卡景点。博文首先介绍观光巴士的旅游路线以及穿越的景点等信息，然后基于Leaflet.TrackPlayer实现路线的动态播放，将这一幅幅优美的画卷徐徐展现在各位面前。无论是想要深度体验长沙的历史文化，还是希望轻松游览城市的现代风貌，湘江双层观光巴士搭配WebGIS技术，都将为游客带来前所未有的旅游体验。这不仅是一次简单的观光之旅，更是一场科技与文化完美融合的探索之旅。接下来，就让我们一起跟随湘江双层观光巴士的脚步，借助WebGIS的神奇力量，深入领略长沙这座城市的独特魅力，开启一段难忘的旅程吧。
一、观光巴士路线及沿途风景
长沙，这座拥有三千年历史的文化名城，湘江宛如一条灵动的绸带，贯穿全城，滋养着这片土地，也见证了无数的变迁与发展。本节我们从观光巴士的相关信息、沿途的商圈、景点和网上能查找到的途径公交站点三个方面来分别进行介绍。通过这些详细的介绍，让大家对这条观光路线充满期待，也欢迎在正式开通后大家可以来打卡。
1、互联网上的观光巴士信息
湘江双层观光巴士，以其独特的视角和舒适的乘坐体验，成为探索长沙城市魅力的新宠。它穿梭于湘江两岸，从橘子洲头的壮美风光到岳麓山的秀丽景色，从繁华的五一商圈到充满历史底蕴的太平老街，一路风景如画，一路故事悠长。而WebGIS技术的加入，更是为这场旅行增添了一份科技的魔力。通过网络地理信息系统，游客可以在出发前就通过网络平台，清晰地规划自己的行程，了解每一站的景点特色、历史背景以及周边的美食与购物信息。在观光巴士上，借助智能设备，游客可以实时查看自己的位置，获取沿途景点的详细介绍，甚至可以通过虚拟现实技术，身临其境地感受那些历史场景，仿佛穿越时空，与古人对话。首先来看一下在当地的一些宣传信息中，是否有关于湘江的观光巴士的新闻介绍呢？
下面援引长沙本地宝对该观光旅游路线的相关介绍：
湘江观光巴士项目路线沿湘江中路建设，南起碧沙湖地铁站，北至西园北里，全程设站19个。观光路线将串联起西园北里、潮宗街、太平街、西文庙坪等沿江历史文化街区，以及五一商圈、杜甫江阁、橘子洲、湖南第一师范学院等长沙热门景点，为游客打造特色旅游观光专线，一条路线即可打卡长沙城市风貌。除此之外，观光巴士路线还与地铁2号线、3号线、4号线站点相接，市民及游客可通过地铁换乘，畅享长沙美景美食。
2、沿途商圈、景点
根据上一小节整理出来的观光巴士经过的沿途商圈、景点列表。这些景点都是来长沙的热门景点，欢迎大家前来打卡。 基本上通过这趟专线，可以实现无缝的衔接。通过地图的API接口可以很轻易的获取到上述商圈或者景点的位置信息，不管是AOI或者是POI，都是很容易获取的。获取之后就可以配合路线进行路线模拟。关于如何获取相关的AOI数据，这里不进行赘述，感兴趣的朋友可以到前面的博客中去查找相关的博客或者在评论区留言。
3、途径公交车站
关于这条观光巴士具体穿越的19个站点，官方尚未进行公布，只是在相关的信息中看到大概的站点分布，同时也有一些网友和记者去了现场进行了实际探寻，也分享了一些照片。因此结合现场的照片和车站名称的具体描述我们大概猜测未来的实际站点（最后的站点只能在最后才进行宣布）。其经过的站点如下：（由北向南）1、西园北里站；2、五一路口西站；3、文和友东站；4、第一师范东站；5、碧沙湖站。以上站点的位置是自己定义的，只是大致的定位。
本节详细的介绍了观光巴士的基本信息以及沿途的商圈、景点信息，途径的公交车站信息。有了这些基本信息之后，下一步就可以进行形式轨迹的播放展示。
二、Leaflet.TrackPlayer简介
为了实现观光车的动态运动，同时还要将地图的重要信息标注出来。在进行组件的选择和实现时费了不少时间。念念不忘，必有回响。最终还是找到了一个款比较让人满足的组件。即Leaflet.TrackPlayer，这款基于Leaflet的插件不仅能很好的进行轨迹回放，还能进行动态的控制，效果非常好。因此本节将对Leaflet.TrackPlayer组件进行一个简单的介绍。
1、Leaflet.TrackPlayer是什么？
这里使用的是gitee的克隆镜像，由于github的一些限制策略。gitee上的版本也是比较新的。因此大家可以放心的使用。快速访问地址：Leaflet.TrackPlayer gitee访问地址。在浏览器中打开以上的网址后可以看到以下页面。
来看看官方对其自身组件的信息介绍：
A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。
2、Leaflet.TrackPlayer方法和参数
这里分享一下Leaflet.TrackPlayer这个组件的一些参数和方法，方便第一次使用该组件的同学可以有一个简单的认识，更详细的说法和说明，大家可以把库下载后进行深入的学习。本博客不在于深入的讲解这个库，因此仅将参数的方法做一个说明。
配置参数:
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| speed | Number | 600 | 行驶速度（公里/小时） |
| weight | Number | 8 | 轨迹线宽度 |
| markerIcon | L.icon | - | 回放过程中移动标记的图标，相当于L.marker的'icon'属性 |
| polylineDecoratorOptions | Object | {...} | 轨迹线箭头样式，参见Leaflet.PolylineDecorator |
| passedLineColor | String | #0000ff | 已行驶轨迹部分的颜色 |
| notPassedLineColor | String | #ff0000 | 未行驶轨迹部分的颜色 |
| panTo | Boolean | true | 地图视图是否跟随移动标记 |
| markerRotation | Boolean | true | 标记是否根据移动方向自动旋转 |
| markerRotationOrigin | String | center | 标记旋转的原点，遵循CSS transform-origin规则 |
| markerRotationOffset | Number | 0 | 标记旋转的角度偏移量 |
接下来再来看一下其重要的方法：
| 方法 | 返回值 | 描述 |
|---|---|---|
| start() | - | 开始播放 |
| pause() | - | 暂停播放 |
setSpeed(<Number> speed, <Number> debounceTimeout?) | - | 设置回放速度（公里/小时） |
setProgress(<Number> progress) | - | 设置回放进度值至0-1之间 |
addTo(<Map> map) | this | 将轨迹播放器添加到地图上 |
| remove() | - | 从地图上移除轨迹播放器 |
on(<String> type, <Function> fn) | - | 向指定事件类型添加监听函数 |
off(<String> type, <Function> fn?) | - | 移除传入的监听函数。如果不指定函数，则移除该事件类型的所有监听器 |
最后来看一下组件的事件，我们可以通过监听事件的方式来进行相应的处理和控制：
| 事件 | 描述 |
|---|---|
| start | 当播放开始时触发 |
| pause | 当播放暂停时触发 |
| finished | 当播放完成时触发 |
| progress | 在播放过程中触发；回调函数接收 progress(0-1)、当前位置 和 轨迹数组索引 |
掌握组件的配置参数、方法和事件非常重要，在实际项目开发过程中，我们需要在事件中使用方法对参数进行控制，因此非常有必要对上述的内容进行了解。只有掌握了以上的知识后，才能进入下一步的继承和开发。
三、集成Leaflet.TrackPlayer到观光路线
本节将重点讲解如何将Leaflet.TrackPlayer继承到Leaflet当中，最后实现观光巴士的轨迹动态模拟。
1、代码实现过程
首先在Leaflet地图展示界面中引入相关的资源，包括css和javascript组件。引入代码如下所示：
<script src="./lib/leaflet/dist/leaflet-src.js"></script>
<script src="./lib/dat.gui/build/dat.gui.js"></script>
<script src="../dist/leaflet-trackplayer.umd.cjs"></script>
<!-- 引入rbush.js -->
<script src="/2d/rbush.js"></script>
<!-- 引入Leaflet.LayerGroup.Collision.js -->
<script src="/2d/Leaflet.LayerGroup.Collision/src/Leaflet.LayerGroup.Collision.js"></script>
<!-- 引入leaflet-polygon.fillPattern.js -->
<script src="/2d/leaflet-polygon-fillPattern/leaflet-polygon.fillPattern.js"></script>然后将观光车经过的景点、商圈信息、红色景点等添加到地图中，代码如下图所示：
然后紧接着把公交车站也添加到地图中，代码如下图所示：
定义观光车的行进路线，是一个polyline对象，需要将坐标点进行详细的标记，为了保持路线的更加平滑，我们可以选择使用插值的算法来实现。
创建运动的观光车对象，并设置运动的地图视图信息，这里需要注意的是，iconUrl是一个图片的访问地址。可以使用在线图源也可以使用离线图源，大家根据自己的实际情况进行选择。
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: 300,
});
track.addTo(map);2、动态控制
为了方便在程序运行过程中对相关的配置和参数进行控制，这里我们使用外部的一个dat.GUI的动态配置组件进行增强效果。关于dat.GUI组件的深入之后，后续会发文深入讨论。本文不进行过多的讨论。
let control = {
speed: track.options.speed,
progress: track.options.progress * 100,
start: function () {
// 设置运动
map.setZoom(16, {
animate: false,
});
track.start();
},
pause: function () {
track.pause();
},
status: "original",
carLatLng: "original",
};
let gui = new dat.GUI({
width: 500
});将控制器定义好之后，还需要对组件的运行等状态进行监控，通过自定义事件监控，我们可以实现对组件的动态操作。
track.on("start", () => {
console.log("start");
control.status = "开始";
});
track.on("pause", () => {
console.log("pause");
control.status = "暂停";
});
track.on("finished", () => {
console.log("finished");
control.status = "完成";
});
track.on("progress", (progress, { lng, lat },index) => {
control.carLatLng = `${lng},${lat}`;
control.progress = progress * 100;
control.status = "行驶中";
console.log(`progress:${progress} - position:${lng},${lat} - trackIndex:${index}`)
});
gui.add(control, "start");
gui.add(control, "pause");
let timeout = null;
gui.add(control, "speed", 100, 5000)
.onChange((e) => {
track.setSpeed(e);
}).name("speed(km/h)");
gui.add(control, "status").listen();
gui.add(control, "carLatLng").listen();
gui.add(control, "progress", 0, 100)
.onChange((e) => {
track.setProgress(e / 100);
})
.name("progress")
.listen();3、成果展示
以上就是所有的代码实现，我们将程序发布到nginx当中，就可以在浏览器中输入访问地址后看到下的效果，这样就说明成功的进行了轨迹的模拟追踪。
四、总结
以上就是本文的主要内容，本文将重点介绍基于Leaflet.TrackPlayer的湘江一号双层观光巴士行驶轨迹播放实践。通过以观光巴士的第一视角，沿着湘江中路而上，从橘子洲头到西园北里，穿越多个商圈和网红打卡景点。博文首先介绍观光巴士的旅游路线以及穿越的景点等信息，然后基于Leaflet.TrackPlayer实现路线的动态播放，将这一幅幅优美的画卷徐徐展现在各位面前。无论是想要深度体验长沙的历史文化，还是希望轻松游览城市的现代风貌，湘江双层观光巴士搭配WebGIS技术，都将为游客带来前所未有的旅游体验。通过本文，您不仅可以了解长沙的观光双层巴士的基本信息，同时还掌握了Leaflet.TrackPlayer组件，最后通过一个实例的具体开发，让大家掌握Leaflet.TrackPlayer的详细开发。行文仓促，难免有许多不足之处，如有不足，在此恳请各位转接朋友在评论区留言批量指正，不慎荣幸。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
