轨迹系列——WebGIS中使用ZRender实现轨迹前端动态播放特效

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1.背景

项目中需要在地图上以时间轴方式播放人员、车辆在地图上的历史行进轨迹。在之前的博客中我们谈到了如何对轨迹数据进行滤波、平滑、聚类等,均是为让轨迹线变得简化优美,这里我们将和大家一起探讨如何将轨迹以播放的效果在前端地图上展示。

2.技术选型

2.1选型结论

GIS的前端框架我们选用的是AGS JS(3.18)。选这个前端框架主要是基于浏览器的支持情况,我们要求IE9及以上浏览器等均能支持(仅二维场景),但是目前最新的4.0及以上版本等由于使用上了WebGL技术来支持三维场景,导致浏览器需是IE11以上。以下是目前各浏览器版本对WebGL的支持情况,其中红色是不支持,绿色是完全支持,其他颜色是部分支持:

 

在AGSJS3.18这个版本中,瓦片展示依然是基于DIV,而所有的前端要素展示依然是基于SVG,而我们将要实现的轨迹播放特效则在canvas上实现则是更加好的方案,所以这里我们首先要进行两个技术的预研:

a.如何在AGSJS环境中自定义一个基于Canvas的图层。

b.是否基于Canvas的前端框架实现绘制。

2.2预研结论

a.继承AGS的layer模块,重写部分核心方法。具体如何完成自定义图层,大家可以参考我的之前的一篇博客:基于AGS JS开发自定义贴图图层 (http://www.cnblogs.com/naaoveGIS/p/6576420.html)。

b.为便于一些描绘特效的实现,采用基于Canvas的框架(ZRender)来进行绘制。ZRender(Zlevel Render) 是一个轻量级的Canvas类库(http://ecomfe.github.io/zrender/),类似的类库有Kinetic.JS、EaselJS,但是国内使用用户没有Zrender用户多。百度强大的图表工具eCharts就是在ZRender基础上建立。其特点如自身的口号所宣传:

            

3.初步实现

这里我们首先需要完成一个专门进行轨迹描绘的基于Canvas的自定义图层。

a.继承Layer,重写_setMap和_unsetMap函数,在该函数中使用ZRender完成Canvas的创建:

        

b.获取到轨迹点集,使用ZRender进行点和线的描绘:

        

c.监听地图的平移、缩放、地图外框变化事件,在这些事件被触发时使用ZRender进行重绘(这里需要重点注意的是每次重绘时要将地理坐标转换成对应的平面坐标):

    

完成以上步骤后,已经可以在地图上看到一个静态的、可随地图变化而重绘的轨迹:

                 

4.展示效果初步优化

目前有以下几个问题:

a.如果将每个轨迹点都描绘出来,地图级别很小时会聚集在一处导致轨迹线不可见。

b.有些轨迹点之间时间跨度太大,连接起来会导致轨迹线出现穿墙的问题。

针对以上两个问题,首先采用热力图来取代轨迹点的展示。对于两点时间间隔超过阈值的轨迹点,不进行连接,以信号丢失来提示:

                       

5.动态播放效果的实现

5.1初步实现

所谓轨迹播放,其核心是指随着时间轴的自动滑动,代表人员或车辆的图标在轨迹线上进行移动展示。我们总结播放需要实现的功能有:播放、暂停、重置、进度拖拽、快进。

以播放为例来描述即是:通过setInterval函数的触发,在该函数中进行对应图标随坐标变化的展示。

但是仅仅是一个图标的移动,将是特别单调的效果。

5.2播放效果的优化

a.实现平滑移动的效果,将两个相邻的线段根据图标像素宽度划分切割,进行每次的移动。

b.对每种图标做出16向图,每次平移时计算出方位角度,从而使用对应的图标方位图。

c.对于已经走过的轨迹,用不同颜色的轨迹线进行标识。

5.3播放效果展示

                                  

6.结合信息挖掘的展示

信息挖掘中,我们可以知道轨迹的停留点、相关事件结合点、信号丢失点、里程数和排名等等信息,结合轨迹可以进行综合展示:

                               

7.轨迹展示的进一步优化

目前展示方式中,当轨迹为静态时无法看出轨迹的方向,这里我们将对轨迹附上箭头来表示方向。设计为,外框来表示轨迹线,内中填充箭头线。其中箭头的宽展、长度、两点间填充的箭头数目等均需进行考虑。这其中,对于箭头的各个方向时的点坐标,需要不断以箭头顶端点和线方向进行联和换算最为麻烦。这里我们给出换算公式和部分代码:

      

最后的效果图为:

                   

8.总结

以上所有步骤的完成,都是基于最原始的历史轨迹,以下为本次实验的原始轨迹(用Arcmap加载):

                      

这其中优化涉及到的算法层优化颇多,最核心部分为基于卡尔曼滤波的优化算法以及基于时间和距离的聚类处理。后者我在博客——通过时间及距离维度进行轨迹聚类平滑的一种方案(http://www.cnblogs.com/naaoveGIS/p/6653907.html)中做了比较详细的描述,后面我将跟大家一起探讨如何基于卡尔曼滤波进行轨迹优化。

 

                               

                                                                   -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                        如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                                                                                                

时间: 2024-09-22 08:10:33

轨迹系列——WebGIS中使用ZRender实现轨迹前端动态播放特效的相关文章

轨迹系列——记某真实项目中轨迹展示查询效率优化方案二(日志模式)

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    方案目标        该方案需要满足以下几点:        支持人员当天轨迹快速获取(查询).        支持轨迹高并发读.写(实际项目中轨迹高并发读情况很少).        保证所有(历史)轨迹数据的完整性.不丢失. 2.方案探讨详细描述 2.1支持轨迹快速查询--轨迹日志文件方案        海量数据高效存储.查询,这个场景本身是比较适合No

控件-在vs2010中实现雷达信号轨迹追踪

问题描述 在vs2010中实现雷达信号轨迹追踪 雷达上显示一些不同的目标,目标新的位置是红色显示的(这个本来就实现了)现在想把以前的位置想要保持住,然后把历史位置更改为其他颜色显示,最后能看出目标的移动轨迹,信号从网口发过来,然后在TEECHART控件中每隔100ms绘制一次目标的新位置,这个有什么思路.绘制函数在定时器中实现的,接收数据是一个单独函数. 解决方案 思路没有什么问题,需要注意界面刷新的实现过程(100ms刷新一次需要防闪屏现象),与如何指示出"能看出目标的移动轨迹" 解

Android 游戏开发中绘制游戏触摸轨迹的曲线图_Android

       本篇文章主要来讲解怎样绘制游戏触摸轨迹的曲线图.        我们在onTouchEvent方法中,可以获取到触摸屏幕时手指触摸点的x.y坐标,如何用这些点形成一条无规则轨迹并把这条无规则轨迹曲线显示在屏幕上就是本篇文章的主旨内容.        Android Path类        Android提供了一个Path类 , 顾名思义这个类可以设置曲线路径轨迹.任何无规则的曲线实际上都是由若干条线段组成,而线段的定义为两点之间最短的一条线.path类就 可以记录这两点之间的轨迹

轨迹系列——车载GPS对接方案汇总小结(809、自定义协议、前置库、WS)

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景          最近在不同项目中对接了多个车载GPS厂商服务终端,绝大多数厂商可以提供809协议的数据对接,还有部分可以提供自定义协议等方式的对接.多个项目中,我公司处于略强势地位,所以根据现场实际的项目进度和部署环境以及对方支持的对接方式,提出了不同的对接方案.这里做个总结. 2.809协议对接 2.1协议背景        2011年5月10日中国交通通

轨迹系列——一种基于路网图层的GPS轨迹优化方案

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 GPS数据正常情况下有20M左右的偏移,在遇到高楼和桥梁等情况下偏移会更大.本方案讨论基于路网图层如何来进行轨迹优化. 2.数据预处理 整套数据预处理围绕拓扑检查.节点打断来进行,具体步骤为: a.新建数据集. b.导入道路图层. c.新建拓扑规则. d.进行拓扑操作. e.导出处理后的数据.     3.匹配算法设计                    

用户行动轨迹的产品设计:关于用户行动轨迹设计的思考

文章描述:用户行动轨迹设计杂思.   最近关于LBS是否有泡沫的争论此起彼伏,尤其是对Color模式质疑,甚至传出了国内某某基于Foursquare签到模式的LBS公司要大规模裁员的消息.毋庸置疑的是,LBS是整个移动互联网的基础应用之一,LBS业务模式尚处于探索期.不管现在众多的Foursquare.Color.Kuipp们的模式多么不靠谱,其中有多少的泡沫成分,并不代表LBS本身没有美好的未来,当然未来LBS的成功肯定不单纯只依赖于签到.弹性社交.问答等几个简单模式.     在LBS应用中

(六)WebGIS中地图瓦片在Canvas上的拼接显示原理

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本框架和技术,第二章节里介绍了什么是瓦片行列号以及计算它的原因,第三章节里介绍了如何通过地理范围计算出这个范围内瓦片的行列号,第四和第五章节里介绍了在得到瓦片行列号后如何获得离线和在线地图的URL,这个章节里,我们将介绍在通过URL得到瓦片后,如何将其显示在浏览器相对应的地方,拼接出整块地图. 2.左

(二十一)WebGIS中鹰眼的实现思路

 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现起来非常方便.当然,按照博主从底层谈WebGIS这套系列的风格,在这里还是跟大家一起探讨探讨不借助第三方框架开发鹰眼的简单实现思路. 2.鹰眼功能分析                         3.实现思路设计 3.1主图平移时与鹰眼图的联动 a.主图进行平移时,在平移完成后抛出地图平移事件

(八)WebGIS中栅格图层的设计

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    前言 我们在上一章里了解到WebGIS中栅格图层的本质--地图图片.而从之前的第二章到第五章,我们详细的介绍了地图图片的获取原理和方法.所以在设计栅格图层前,我们已经知道了栅格图层中数据是如何获得的,剩下的便是怎样将这个过程用一种符合面向对象的设计原则来进行实现. 2.栅格数据获得的流程 这里我再次将栅格数据获得的流程描述一遍: 首先,得到屏幕范围内的地图