文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处: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/

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

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

  1. WebGIS中使用ZRender实现前端动态播放轨迹特效的方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在地图上以时间轴方式播放人员.车辆在地图上的历史行进 ...

  2. 在网页中使用particlesjs实现背景的动态粒子特效

    先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...

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

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现 ...

  4. (二十)WebGIS中图层树功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...

  5. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  6. (十五)WebGIS中平移功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这一章我们将详细讲解WebGIS工具栏中另一个基础工具——平 ...

  7. (十二) WebGIS中矢量图层的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在前几章中我们已经了解了什么是矢量查询.屏幕坐标与地理坐标之 ...

  8. (十一)WebGIS中要素(Feature)的设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在GIS中元素一般分为点元素,线元素,面元素以及symbol ...

  9. (九)WebGIS中的矢量查询(针对AGS和GeoServer)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在第七章里我们知道了WebGIS中要素的本质是UICompo ...

随机推荐

  1. 我为什么放弃MySQL?最终选择了MongoDB

    最近有个项目的功能模块,为了处理方便,需要操作集合类型的数据以及其他原因.考虑再三最终决定放弃使用MySQL,而选择MongoDB. 两个数据库,大家应该都不陌生.他们最大的区别就是MySQL为关系型 ...

  2. 结合Mybatis源码看设计模式——外观模式

    定义 提供了一个统一的接口,用来访问子系统中一群接口 适用场景 子系统复杂,增加外观模式提供简单调用接口 构建多层系统结构,用外观对象作为每层入口 详解 外观模式,主要理解外观.通俗一点可以认为这个模 ...

  3. andorid 应用第二次登录实现自动登录

    前置条件是所有用户相关接口都走 https,非用户相关列表类数据走 http. 步骤 第一次登陆 getUserInfo 里带有一个长效 token,该长效 token 用来判断用户是否登陆和换取短 ...

  4. 了解git的命令行使用

    git现在已经是非常大众的版本管理工具了,如果在windows下用vs这种ide,已经可以很简单的点点鼠标就完成大部分工作了. 但是在某些特殊情况用命令行时,还是需要了解很多命令的. 安装 linux ...

  5. Git - git branch - 查看远端所有分支

    索引: 目录索引 一.示例: git branch -r 二.说明: 该命令将列出仓库中所有存在的远端分支,无论该分支是否已签出到本地. 蒙 2018-09-29 19:59 周六

  6. 关于ORACLE的SQL语句拼接、替换、截取、排序,联表等...~持续汇总~

     先看一下所有的数据.这里全部为VARCHAR2(255). 字段拼接 在所有的性别后面加% 字段替换,把性别TPF_SEX去除百分号% 字段截取 字段截取+拼接 字段替换,这里把百分号%替换为空,也 ...

  7. cmd 配置dchp服务器

    1.安装DHCP服务器角色,这样在netsh下才会有dhcp上下文 2.编写配置dhcp的脚本 从命令行运行netsh有两种语法: 比如要获取已经配置的网络接口列表 1.写全 netsh -r Rem ...

  8. TTL 和 DNS TTL 的区别

    TTL TTL是 Time To Live 的缩写,该字段指定IP包被路由器丢弃之前允许通过的最大网段数量.TTL是IPv4包头的一个8 bit字段.在IPv4包头中TTL是一个8 bit字段,它位于 ...

  9. ASP.NET Aries 高级开发教程:Excel导入之多表高级导入配置(中)

    前言: 在面对Excel的各种复杂导入情况中,多表导入是很常见的情景. 今天就来写一下多表导入是如何配置的. 1.自定义导入模板 怎么自定义: 其实就是自己新建一个Excel了,把列头都写好. 不过有 ...

  10. Docker Demo on Docker

    install docker-machine $ curl -L https://github.com/docker/machine/releases/download/v0.10.0/docker- ...