开源网络地图可视化第六章学习指南

源代码地址：开源网络地图可视化-配套代码.zip - 蓝奏云

配套书籍：开源网络地图可视化——基于Leaflet的在线地图开发 (杨乃) (Z-Library)(1).pdf - 蓝奏云

3 第六章Leaflet地图动画

3.1 图标动画

3.1.1 沿线运动

沿线运动的动画使用了Leaflet.Geodesic.js插件。按照教材要求，这里首先确定飞行起始点和终止点分别为洛杉矶和柏林，接下来下载并引用 Leaflet.Geodesic.js插件和LeafLet.AnimatedMarker.js 插件，然后开始构建测地线对象，并指定一个图标样式，加载动画图层。接着增加播放和停止窗口并绑定相应函数，最后进行运行和调试代码。代码的可视化结果如图3.1-1所示。

图3.1-1沿线运动图

代码的程序流程主要依照【开始网页】-【获取数据】-【构建测地线】-【添加动画】-【添加按钮】-【结束】的主线流程进行，如图3.1-2所示。

图3.1-2 程序流程图

3.1.2 时间轴控件

在Leaflet中可以应用Leaflet.TimeDimension.js库实现时间轴控件的加载，这里首先获取包含时间以及路径的数据，接下来新建一个html文档并引入iso8601.js库和leaflet.timedimension.src.js库，在创建地图时创建时间轴，并指定 Gif 图标。随后使用AJAX方法异步加载数据，数据加载完成后构造时间图层并添加，最后调试并运行代码。代码的可视化结果如图3.1-3所示。

图3.1-3 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建地图】-【构造geojson图层】-【添加时间图层】-【结束】的主线流程进行，如图3.1-4所示。

图3.1-4 程序流程图

3.2 折线动画

3.2.1 蛇形动画

在Leaflet中，蛇形动画可以使用LeafLet.Polyline.SnakeAnim库和jQuery库来实现。这里首先在高德地图申请路径规划API并记住相应的key。使用LeafLet.ChineseTmsProviders加载高德地图的常规地图图层，添加地图鼠标事件用于选择起始点、终止点坐标。使用jQuery调用高德路径规划API，获得相应路径数据并进行解析，并将数据添加至动画图层，最后调试和运行代码。代码的可视化结果如图3.2-1所示。

图3.2-1 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建地图】-【构造gpxTimeLayer】-【添加时间图层】-【结束】的主线流程进行，如图3.2-2所示。

图3.2-2 程序流程图

3.2.2 虚线动画

虚线的动画的实现方法和蛇形动画的实现方法相同，不过不一样的是这里的线路的样式需要做成虚线形式。代码的可视化结果如图3.2-3所示。

图3.2-3 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建地图】-【添加蛇形动画】-【解析高德路径】-【结束】的主线流程进行，如图3.2-4所示。

图3.2-4 程序流程图

3.2.3 蚂蚁动画

蚂蚁动画的实现方法和上面两种动画的实现底层方法都一致，不过不一样的是这里的线路的样式需要做成蚂蚁样式。代码的可视化结果如图3.2-5所示。

图3.2-5 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建地图】-【添加蛇形虚线动画】-【解析高德路径】-【结束】的主线流程进行，如图3.2-6所示。

图3.2-6 程序流程图

3.2.4 流向图动画

流向图动画可以使用Leaflet.Canvas-Flowmap-Layer.js库和其相关依赖库tween.js来实现，这里开启一个新HTML文件并引入相关头后可以使用LeafLet.ChineseTmsProviders加载高德地图的常规地图图层，准备一对多的csv数据。使用omnivore库加载csv数据，构建Geojson数据，再创建一个canvasFlowmapLayer图层，并添加相应鼠标事件，最后调试和运行代码。代码的可视化结果如图3.2-7所示。

图3.2-7 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建流向地图】-【添加贝塞尔曲线】-【显示流向动画】-【结束】的主线流程进行，如图3.2-8所示。

图3.2-8 程序流程图

3.3 流场动画

3.3.1 插件leaflet-velocity

在Leaflet中，流场动画可以使用leaflet-velocity插件，这里首先需要下载leaflet-velocity库，并准备相应数据。首先，使用天地图作为地图底图，然后使用D3读取经向和纬向方向的数据，创建矢量动画图层，并添加相关的交互功能，接下来调试并运行代码。代码的可视化结果如图3.3-1所示。

图3.3-1 时间轴样式图

代码的程序流程主要依照【开始网页】-【获取数据】-【创建流场地图】-【添加贝交互控件】-【结束】的主线流程进行，如图3.3-2所示。

图3.3-2 程序流程图

3.3.2 插件Leaflet.CanvasLayer.Field

在Leaflet中，流场动画还可以使用Leaflet.CanvasLayer.Field插件来实现。这里首先下载Leaflet.CanvasLayer.Field插件，并准备相应数据。使用天地图影像地图作为地图图底，然后使用D3读取经向和纬向方向的数据，创建矢量动画图层，并添加相关的交互功能，最后添加图例，调试和运行代码。代码的可视化结果如图3.3-3所示。