GIS前端编程-地理事件动态模拟
- 动画特效功能
- 图形闪烁
- 要素轨迹移动
动画特效功能
目前,GIS应用除了涉及地理位置信息,还要结合时间维度,这样才能更加真实地模拟现实世界的事物。因此在实际项目应用中,静态的(位置固定不变)图形和地图标注通常不能支撑起整个GIS应用需求,很多时候需要加入时间维度动态模拟一些地理事件。例如,在物流管理系统中,用标注点表示物流所在位置,它会随时间不停地变化;或者在地灾救援系统中,用多边形区域表示地灾区域的影响范围,范围同样也会不断变化。由此可见,地理要素动态模拟在WebGIS中发挥着积极的作用。
在介绍GIS的动画特效功能之前,读者不妨先思考一个问题:地理要素怎样变化才能有“动”的效果,实现动态渲染?如果修改一个地理要素的坐标位置,则使其沿着某一路线不停移动,即可看到轨迹移动的效果;如果交替添加、删除某一个图形图层,则可以看到图形闪烁的效果;如果不断增加线图形的坐标数组,则可以看到水流模拟的效果。因此,只要地理要素的位置、样式、显示等状态随时间发生了变化,即可视为地理要素进行了动态模拟。
动态模拟的核心在于“动”,在WebGIS客户端如何才能实现这一功能呢?通常可以利用JavaScript提供的定时器,对地理要素的位置、样式、显示状态等参数进行修改,从而让地理要素动态改变。例如,调用setInterval()函数,通过addLayer和removeLayer不停地添加、删除绘制图形的图层,以实现图形高亮闪烁的效果。
动画模拟功能,有的需要使用JavaScript定时器实现,有的需要使用Leaflet插件实现(实现核心也是利用定时器。
图形闪烁
图形闪烁,即图形时隐时现的一种高亮显示效果,在WebGIS中有较为广泛的应用。例如,查询到某一个地理要素后,绘制其坐标轮廓并进行高亮显示,让用户直观地浏览查询结果。
基于Leaflet的图形绘制原理,结合JavaScript提供的定时器函数setInterval(),即可实现简单的图形闪烁功能。下面以多边形闪烁为例,利用L.Polygon绘制图形,在setInterval()函数中反复添加、删除该图层,以达到图形闪烁的效果。主要实现步骤如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。
(3)通过L.TileLayer加载一幅天地图地图进行显示。
(4)利用L.Polygon创建多边形图层,在地图上显示。
(5)调用setInterval()函数,在回调函数中反复添加和删除多边形图层。
代码如下:
要素轨迹移动
要素轨迹移动,即要素按照预定线路进行移动,从起点开始直至终点结束。在WebGIS应用中,要素轨迹移动可用于模拟要素的轨迹线路。例如,车辆行驶轨迹模拟、物流运输模拟等。
该功能的核心实现方法为:通过L.Marker添加一个图片标注,结合JavaScript提供的定时器,不断改变图片标注的位置,模拟图片标注的轨迹行驶路线。Leaflet插件库提供了Leaflet.AnimatedMarker.js插件(插件下载地址为https://github.com/openplans/Leaflet.AnimatedMarker),该插件基于L.Marker进行了扩展,在Marker对象基础上增加了distance(移动距离)、interval(移动时间间隔)、autoStart(开启移动)等属性,供用户设置图片标注的移动参数,以实现轨迹移动功能。
本实例基于Leaflet.AnimatedMarker.js插件编写,主要实现步骤如下。
(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。
(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。
(3)通过L.TileLayer加载一幅天地图地图进行显示。
(4)利用L.AnimatedMarker添加轨迹移动标注,设置参数来模拟要素的轨迹移动。
代码如下: