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

源代码地点：开源网络舆图可视化-配套代码.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所示。

图3.3-3 时间轴样式图

代码的步伐流程主要依照【开始网页】-【获取数据】-【创建流场舆图】-【添加交互控件】-【添加图例】-【竣事】的主线流程进行，如图3.3-4所示。

图3.3-4 步伐流程图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告