GIS前端编程-航线动态模拟

航线动态模拟

leaflet-echarts3插件是在Leaflet基础上结合了强大的开源图表库ECharts编写而来的（插件下载地址为https://github.com/wandergis/leaflet-echarts3），该插件可以实现炫酷的航线模拟功能。通过JSON数据格式来组织航线所经过的城市，再通过ECharts提供的setOption()方法来显示数据。本实例基于leaflet-echarts3插件编写，提供了多种底图和3条航线供用户进行动态切换。北京至各地的航线模拟如图

主要实现步骤如下。
（1）创建L.Map对象，通过图层组控件加载地图底图，供用户进行地图底图切换。
（2）设置数据来源，在option中创建JSON类型的航线坐标数据及样式参数。
（3）调用ECharts中的setOption()方法显示航线数据。
代码如下：

迁移轨迹模拟

Leaflet.MovingMarKer.js是Leaflet常用的迁移轨迹模拟插件之一，基于该插件可以实现多种迁移轨迹模拟效果（插件下载地址为https://github.com/ewoken/Leaflet.MovingMarker）。例如，标注沿着一条线做匀速运动、标注绕着圆做圆周运动、标注做往返运动等。本实例基于Leaflet.MovingMarKer.js插件编写，单击标注时开始沿线运动，再次单击标注时暂停运动。主要实现步骤如下。
（1）在中通过onload事件加载初始化函数，并创建一个div作为地图容器。
（2）在初始化函数中，创建一个Map对象，设置显示中心、当前显示级数等参数。
（3）通过L.TileLayer加载一幅天地图地图进行显示。
（4）创建MovingMarker对象，监听标注单击事件，在该事件中开始/暂停轨迹模拟。
代码如下：

水流模拟

水流模拟，即一条线从起点出发，随着时间不断变长，直至到达终点。不难看出，实现该功能的核心在于，如何让所绘制的线随着时间而逐步变长。Leaflet提供了setLatLngs()方法，供用户修改线坐标，再结合JavaScript定时器，不断地修改线坐标，达到线动态变长的效果。
leaflet.Polyline.SnakeAnim插件基于该思路进行编写，通过该插件可以便捷地实现水流模拟功能（插件下载地址为https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim）。首先，创建一个L.Polyline对象，利用leaflet.Polyline.SnakeAnim插件扩展的snakingSpeed参数设置流速；其次，在线的起点和终点各添加一个Marker标注，以标识起点和终点的位置；最后，调用leaflet.Polyline.SnakeAnim插件提供的snakeIn()方法开启水流模拟状态。水流模拟过程如图5-7所示，完成后的水流模拟过程如

主要实现步骤如下。
（1）在中通过onload事件加载初始化函数，并创建一个div作为地图容器。
（2）在初始化函数中，创建一个Map对象，设置显示中心、当前显示级数等参数。
（3）通过L.TileLayer加载一幅天地图地图进行显示。
（4）创建L.Polyline对象，设置线坐标和水流速。
（5）在线的起点和终点位置各添加一个L.Marker标注。
（6）通过leaflet.Polyline.SnakeAnim插件提供的snakeIn()方法开启水流模
代码如下


地图绘制、标注与动画特效，也就是基于Leaflet和JavaScript脚本语言，实现了图形绘制、地图标注、动画特效等众多基础功能。这些功能在WebGIS中具有广泛的应用，与业务数据相结合，可呈现出一个丰富的WebGIS应用。