基于HTML5的时空轨迹动态可视化方法

王淑庆，韩 勇，张小垒，郭 建，陈 戈

（1.中国海洋大学 信息科学与工程学院，山东 青岛266100；2.青岛市勘察测绘研究院，山东 青岛266033）

0 引 言

研究人员对时空轨迹数据进行了大量的研究，并试图挖掘轨迹数据背后隐藏的时空关系［1－4］。如何快速有效地表达这些数据以便为相关部门提供决策支持，是众多领域研究的难点之一。时空轨迹数据蕴含着速度、加速度、方向等重要的属性信息，同时具有空间位置和时间维度信息，具有数据量大、频率高、动态变化等特点，挖掘分析非常困难。可视化技术可以直观地呈现多维时空轨迹数据，并提供丰富的互动方式，以揭示数据中包含的时空规律［5］，以便将来重建历史状态、跟踪变化和预测未来。时空数据的动态可视化在时空规律的探索性分析中有着广泛的应用前景，例如人类迁移，商业交易，社交网络传播等［6］。

通过互联网实现地理时空数据的网络发布、应用和共享，提高地理信息资源的利用率和共享度，在未来各类地理信息的建设中有着广泛的发展空间［7］，地理空间信息共享与协同的社会化将是未来发展的趋势［8］。传统的时空数据网络可视化大多需要在用户在电脑上安装客户端［9，10］或者浏览器插件［11，12］，后期维护更新困难，难以进行广泛推广和使用。HTML5以前的版本仅可以对预渲染的数据进行可视化显示，例如Google map，OpenStreetMap都是在服务器端对数据进行预渲染，然后将相应的图像传送到浏览器端，浏览器无法对基于图像的表示进行空间分析，也不能以任何方式个性化地图可视化过程，例如动态改变物体的颜色［13］。为了解决以上难题，减少浏览器对插件如Adobe Flash、Microsoft Silverlight和Oracle－Sun JavaFX等的需求，HTML5提供了Canvas和SVG 接口对数据进行可视化绘制，使Web开发人员在浏览器端使用标准的Web技术实现免插件、跨平台的Web数据可视化成为可能。Web浏览器正迅速从简单的HTML渲染演变成能够在许多应用领域提供丰富交互式应用程序的运行时环境［14］。当前IE9以上版本 （含IE9）、Firefox （火狐浏览器）、Chrome（谷歌浏览器）和Safari（狩猎）等传统电脑端的主流浏览器都对实现了对HTML5的主要新特性支持，而且现在移动终端的百度浏览器、UC 浏览器和Opera等浏览器也都实现了对HTML5主要标准的支持，使在移动端实现数据的可视化成为可能。对于大数据量的实时绘制渲染Canvas具有非常好的性能［15］，轨迹数据具有数据量大、随时间动态变化等特点，因此利用HTML5Canvas可以较好的实现轨迹数据的动态可视化。

针对客户端软件和浏览器插件所存在的问题，利用最新的HTML5技术，基于Canvas实现了浏览器端时空轨迹的动态实时渲染与绘制，基于WebSocket实现了时空轨迹数据的实时快速传输，对网络环境下对时空轨迹数据的免插件动态可视化进行了探索和实践。

1 可视化方法流程

基于HTML5Canvas、WebSocket和粒子追踪等技术对网络环境下时空轨迹数据的动态可视化进行了研究，提出的可视化总体技术框架如图1所示。总体框架分为数据层、服务层和表现层3个部分，利用MVC 模式进行开发，做到了视图、控制器和模型的分离，提高了设计的规范性，实现了各层间连接的松耦合。其中，数据层主要负责时空轨迹数据和地理基础空间数据的存储与管理；服务层通过WebSocket服务器与浏览器页面进行数据通讯和交换，根据浏览器端的请求对轨迹数据进行预处理，包括清洗、坐标变换等，然后将预处理后的数据传输到客户端；浏览器端进行数据解析和插值模拟，通过HTML5Canvas和粒子追踪技术实现动态可视化交互绘制渲染。

图1 可视化方法流程

2 可视化关键技术研究与实现

2.1 时空轨迹数据的处理

时空轨迹是指由一系列轨迹点按照时间先后顺序组成的序列。本文将轨迹数据点定义为p（x，y，t，attr），其中x 代表经度，y 代表纬度，t代表时间，attr代表加速度、速度、方向等信息。轨迹有一系列轨迹点p（xi，yi，ti，attri）组成，我们规定轨迹中至少有3 个轨迹点，轨迹Trajectory 可表示为

2.1.1 数据清洗

时空轨迹数据大多是由GPS定位装置和各种传感器获取，由于GPS定位精度、传感器系统误差和采集频率的影响轨迹数据会出现异常。本文主要对以下几种数据进行剔除：

（2）计算两个轨迹点间的速度，移除速度大于一定阈值的点，例如：人步行的速度一般不超过5m／s，公交车不超过16m／s；

（3）受采样频率的影响，轨迹可能会产生冗余，即在同一个时间戳产生多个轨迹点，本文保留第一个点，移除其它的点；

（4）移除轨迹点个数小于3的轨迹。

2.1.2 基于Cat－mull曲线插值的时空轨迹重构

原始的轨迹数据是由一系列离散点组成的，而时空轨迹的动态可视化是按照特定时间顺序连续变化的过程，需要对轨迹进行重构获取每一个绘制时刻的轨迹点。轨迹重构的主要思想是对数据进行插值，文中采用Cat－mull曲线插值算法对时空轨迹数据进行插值获取平滑完整的轨迹线。Cat－mull曲线是一种分段式连续平滑曲线，每一分段都可以独立计算，进行一次拟合只需要利用前后4个基准控制点进行插值，通过连续的控制顶点的控制，可以实现分段间的连续平滑［16］。假设有一组轨迹控制点：p0（x0，y0，t0），p1（x1，y1，y1），p2（x2，y2，t2），p3（x3，y3，t3）其中t0＜t1＜t2＜t3，如图2所示。

图2 Cat－mull轨迹曲线重构

对于给定的控制点p0，p1，p2，p3，曲线p1p2中间的插值点pt（xt，yt，tt），其中t1＜＝tt＜＝t2，可由以下公式计算

公式中t＝ （tt－t1）／ （t2－t1）其取值范围为： ［0，1］，通过设置t值可以插值获得 ［t1，t2］时间范围内任意时刻tt的轨迹点坐标，对于轨迹起始点可将第一个点和第二个点设为同一点，轨迹结束点最后一个点和倒数第二个点设为同一点，同样利用Cat－mull插值算法获得首段和末段轨迹曲线。

2.1.3 坐标变换

时空轨迹位置数据以经纬度形式表示，为了在Canvas上实现轨迹数据的绘制，需要将地理坐标系转换为Canvas屏幕坐标系。

如图3 所示，设地理坐标系的左上角点为 （LTlng，LTlat），右下角点为 （RDlng，RDlat），屏幕Canvas的宽度为canvasWidth，高度为canvasHeight，则

其中： （centerX，centerY）为Canvas地图中心点坐标，（offsetX，offetY）是Canvas地图在x轴和y轴上的偏移量，scale为Canvas地图的缩放级别。

图3 坐标变换

2.2 基于WebSocket的时空轨迹数据动态加载技术

WebSocket是HTML5 新引入的技术，允许后台随时向客户端发送数据；WebSocket的实现使Web应用不需要每次都发起HTTP请求来建立与服务器的连接，可以实现浏览器与服务器间的一次握手多次数据交换，这样二者之间就形成了一条快速的数据传输通道。浏览器与服务器沟通的头文件大概只有2Bytes，能更好的节省服务器资源和带宽并达到实时通讯。现在主流的浏览器包括Chrome，Firefox，Opera，Safari，IE10都实现了WebSocket的支持。目前在已经有了很多符合WebSocket规范的开源服务器实现方 案，例 如 基 于JavaScript 的Node.js、基 于Java 的Kaazing WebSocket Gateway 和 基 于.NET 的SuperWeb－Socket等。本文利用基于.NET 的SuperWebSocket开源框架构建了WebSocket服务器应用程序，服务器可以按照时间顺序实时向客户端传输特定时间段的时空轨迹数据，实现数据的分时段动态加载，避免一次完全加载过程中用户等待时间过长的问题。图4为基于WebSocket的时空轨迹数据动态加载方案。

图4 基于WebSocket的时空轨迹数据动态加载方案

2.3 浏览器端基于HTML5Canvas的可视化绘制

2.3.1 地理基础矢量数据的加载与绘制

时空轨迹数据需要与地理基础地图结合来发现轨迹运动与周围环境之间的关系，为此需要加载地理基础数据。在绘制大数据量、多图层的情况下使用HTML5Canvas绘制矢量图形相比传统地图切片技术在网页加载速度上也有明显优势［17］。本文利用Canvas绘图API将矢量数据分为地图轮廓、地名标注、道路等进行绘制，采用轻量级GeoJSON 格式进行地理数据发布。GeoJSON 类型是一种对点、线、面等几何地理数据要素进行编码和数据交换的轻量级JSON 数据格式［18］。本文定义了点Point、线Line、面Polygon这3个GeoJSON 格式的地理要素类型对地名标注、地图轮廓、道路进行描述。浏览器端通过WebSocket动态请求获取GeoJSON 格式的矢量数据，利用原生JavaScript对数据进行解析，并将数据坐标变换为Canvas坐标。地图轮廓和道路使用创建路径的方法实现，首先调用beginPath开始一个路径，然后通过moveTo（）和lineTo（）命令控制路径的绘制，最后使用stroke（）函数并调用closePath（）完成路径的绘制，使用fillText（“text”，x，y）将相应的地名标注绘制在Canvas上。

2.3.2 基于粒子追踪技术的时空轨迹动态可视化

为了动态模拟时空轨迹数据的连续变化过程，需要对时空轨迹产生、发展和灭亡的过程进行抽象和表达，粒子系统采用大量的、具有一定位置、生命周期和属性的粒子来模拟事物的演变过程。本文将产生轨迹的实体抽象为粒子系统中的粒子，粒子按照时空路径移动产生时空轨迹，每个粒子代表一个产生轨迹的实体，具有位置、速度、加速度等信息，将时空轨迹随时间的变化过程抽象为粒子的“产生”、“活动”和 “消亡”3个阶段。时空轨迹数据的动态可视化是按照特定时间间隔interval进行动态绘制渲染的，为了更好的适应轨迹可视化的特点，对粒子系统进行改进，将位置position定义为位置序列，表示时间内实体的轨迹序列，轨迹序列由一系列控制点组成。

利用粒子系统实现多时空轨迹的追踪与绘制的流程如图5所示，主要分为以下几个步骤：

（1）Emit发射粒子：判断轨迹序列是否在当前时间戳内，发射特定时间戳内含有轨迹序列的实体，对粒子的位置序列、速度、年龄、寿命、颜色、大小等属性进行初始化，使用JavaScript粒子数ParticlesArray［］来存储初始化的粒子；

（2）Simulate模拟粒子：利用前文提到的基于Cat－mull的时空轨迹插值算法，根据当前时刻前后位置序列 （即控制点序列）对轨迹进行插值计算获取当前时段interval内由粒子序列组成的轨迹曲线，每一次模拟粒子的年龄就会增加，对于年龄超过粒子寿命的粒子则需要调用粒子系统的Kill方法从粒子数组中移除；

（3）Render 绘 制 渲 染：利 用JavaScript 在HTML5 Canvas中绘制有生命的粒子，通过上一步的模拟插值方法计算当前时段interval内的轨迹曲线，按照绘制路径的方法进行绘制。动态设置轨迹的透明度，最新绘制的轨迹无透明度，随着时间的推移后绘制的轨迹透明度逐渐降低，最早绘制的轨迹会慢慢消失，产生轨迹慢慢移动的效果，多个粒子的轨迹同时绘制就会产生多轨迹动态流动的效果，可以直观展现大量时空轨迹的演变规律。

2.3.3 分层绘制解决方案的设计与实现

为了提高绘制效率、减少渲染量，使用HTML5Canvas分层缓存与绘制技术对不发生变化的地理基础地图实现预绘制。在选择分层的场景时，需要考虑场景是如何组成的。时空轨迹的动态可视化由地理基础地图和时空轨迹组成，地理基础底层又可分为：地图轮廓、道路、地名标注等。使用Canvas分层绘制时，在DOM 中创建不同Canvas画布使各画布共存于视区的同一位置，按照画布应该显示的顺序来样式化z－index样式，从而管理图层顺序。图6为时空轨迹数据动态可视化的一个分层解决方案，方案将需要实时绘制渲染的时空轨迹图与保留不变的地理基础图层分离，从而提高绘制渲染效率实现不同图层间的交互显示。

图5 基于粒子追踪的动态轨迹绘制流程

图6 分层绘制方案

3 实验结果

本文所采用的 实验平台为Intel Core i5－3570k3.4GHz CPU、4G 内存和NVIDIA GeForce GTX 650 1024M 显卡，操作系统为Windows7，服务器为IIS7.0，客户端与服务器处于同一个局域网环境中。在实验平台上使用VS2010开发环境基于.NET 和HTML5开发完成了青岛市公交轨迹动态可视化系统，利用青岛市30天的公交轨迹数据对提出的可视化技术方法进行了验证。公交轨迹数据为青岛市199条公交车线路的31 295 183条轨迹点数据，轨迹点包括位置、站点名称、线路名称、时间、上下行、车牌号等信息，通过对公交轨迹数据采用预处理算法去除异常、重复数据，最后得到16 644 709条轨迹点数据，每天从早晨4：00到晚上11：30大约50万条轨迹点数据。以公交轨迹数据为支撑开发完成了青岛市公交动态可视化系统，实现了日期选择、时间轴拖动、兴趣区选择、轨迹流向控制等可视化交互，同时具有放大、缩小、漫游等地图交互。分别在IE10，Chrome36，Firefox和Opera这4个浏览器下进行了测试，结果表明青岛市公交动态可视化系统可以在浏览器端流畅地运行。公交轨迹在浏览器上实际表现为一个随时间连续动态变化的过程，图7选取了2014年5月某日青岛市公交实际动态可视化过程中几个时刻的截图，利用不同的颜色绘制不同速度的公交，其中黑色轨迹线代表交通拥堵、灰色代表非拥堵。

从图7动态可视化结果中可以直观的看到青岛市一天内不同时刻公交时空分布的动态变化情况，结合下方的柱状统计图表可视化可以清晰的看出堵车公交数量的变化趋势。图7 （a）～图7 （d）中反应了公交数量和时空分布的变化，早晨5：30公交数量相对较少而且基本没有堵路段，到8：00的时候公交数量大幅度增加且有几个路段堵车比较严重，中午12：00的时候公交数量没有发生明显变化，但是拥堵路段空间分布明显减少，到了晚上10：30公交分布又开始减少。通过连续的动态可视化，可以观察到整个城市公交的流动性规律。系统可以动态反映青岛市公交的时空分布规律及交通拥堵状况，经实际交通状况比较，可视化结果基本正确。公交动态可视化系统对于城市交通状况的探索性分析具有一定的应用价值，可以为有关交通部门提供决策支持，对城市交通出行和规划具有重要的指导意义。

4 结束语

针对传统可视化方法存在的问题，在B／S架构下利用HTML5Canvas和粒子系统在浏览器端完成了时空轨迹数据的免插件动态可视化，通过对WebSocket和Canvas缓存绘制技术的研究分别实现了基于WebSocket的实时数据加载和基于Canvas的矢量数据分层绘制，最后在此基础上构建了集时空轨迹数据和地理基础矢量图层为一体的青岛市公交轨迹动态可视化系统。实验结果表明，提出的可视化方法可以很好的通过网络平台在浏览器端模拟时空轨迹数据连续变化过程，并可在多种浏览器上取得良好的可视化效果和用户体验，提出的方法在跨平台、免插件、后期维护更新方面较传统客户端和浏览器插件等方式具有明显优势。用户客户端不安装任何第三方插件就可以在浏览器端实现时空轨迹数据的动态可视化绘制，具有简单易行、快速灵活的优点。结合系统开发的可视化交互功能，可以直观地反应时空轨迹的时空演变规律。提出的可视化方法具有通用性，可以通过网络平台广泛地应用到各种轨迹数据的实时监控和历史分析，实现Internet环境下时空轨迹数据的实时发布与共享。

图7 公交动态可视化

［1］GONG Xi，PEI Tao，SUN Jia，et al.Review of the research progresses in trajectory clustering methods ［J］.Progress in Geography，2011，30 （5）：522－534 （in Chinese）. ［龚玺，裴韬，孙嘉，等.时空轨迹聚类方法研究进展 ［J］.地理科学进展，2011，30 （5）：522－534.］

［2］Zheng Y，Wang L，Zhang R，et al.GeoLife：Managing and understanding your past life over maps［C］／／9th International Conference on Mobile Data Management.IEEE，2008：211－212.

［3］Agamennoni G，Nieto J I，Nebot E M.Robust inference of principal road paths for intelligent transportation systems ［J］.IEEE Transactions on Intelligent Transportation Systems，2011，12 （1）：298－308.

［4］Qi F，Du F.Tracking and visualization of space－time activities for a micro－scale flu transmission study ［J］.International Journal of Health Geographics，2013，12 （1）：6.

［5］PU Jiansu，QU Huamin，NI Mingxuan.Survey on visualiza－tion of trajectory data ［J］.Journal of Computer－Aided Design＆Computer Graphics，2012，24 （10）：1273－1282 （in Chinese）. ［蒲剑苏，屈华民，倪明选.移动轨迹数据的可视化［J］.计 算 机 辅 助 设 计 与 图 形 学 学 报，2012，24 （10）：1273－1282.］

［6］Guo D，Wu K，Zhang Z，et al.Wms－based flow mapping services ［C］／／IEEE Eighth World Congress on Services，2012：234－241.

［7］WANG Yi，ZHOU Xun，ZHOU Wei，et al.A study of dynamic visualization of discrete spatial－temporal data on WebGIS platform ［J］.Remote Sensing for Land ＆ Resource，2012，24 （2）：143－147 （in Chinese）. ［王轶，周迅，周伟，等.基于WebGIS的离散时序空间数据动态可视化研究 ［J］.国土资源感，2012，24 （2）：143－147.］

［8］WANG Jiayao.Development of geographic information system and developing geographic information system ［J］.Engineering Sciences，2009，11 （2）：10－16 （in Chinese）.［王家耀.地理信息系统的发展与发展中的地理信息系统 ［J］.中国工程科学，2009，11 （2）：10－16.］

［9］Box S，Chen X，Blainey S，et al.Fine－grained traffic state estimation and visualisation ［C］／／Proceedings of the ICE－Civil Engineering，2014，167 （5）：9－16.

［10］McArdle G，Demar U，Van Der Spek S，et al.Classifying pedestrian movement behaviour from GPS trajectories using visualization and clustering ［J］.Annals of GIS，2014，20（2）：85－98.

［11］Van Ho Q，Lundblad P，strm T，et al.A web－enabled visualization toolkit for geovisual analytics ［J］.Information Visualization，2012，11 （1）：22－42.

［12］Wang H，Zou H，Yue Y，et al.Visualizing hot spot analysis result based on mashup ［C］／／Proceedings of the International Workshop on Location Based Social Networks.ACM，2009：45－48.

［13］Corcoran P，Mooney P，Winstanley A，et al.Effective vector data mission and visualization using HTML5 ［C］／／Proceedings of the 19th GIS Research UK Annual Conference.University of Portsmouth with Ordnance Survey，2011：179－183.

［14］Melamed T，Clayton B.A comparative evaluation of HTML5 as a pervasive media platform ［M］.Mobile Computing，Applications，and Services.Springer Berlin Heidelberg，2010：307－325.

［15］Boulos M N K，Warren J，Gong J，et al.Web GIS in practice VIII：HTML5and the canvas element for interactive online mapping ［J］.International Journal of Health Geographics，2010，9 （1）：14.

［16］CHEN Hongqian，LI Fengxia，ZHANG Qingyi，et al.Progressive rendering method for smooth trajectorie［J］.Journal of System Simulation，2012，24 （2）：357－360 （in Chinese）.［陈红倩，李凤霞，张庆义，等.一种渐进式平滑轨迹线标绘方法 ［J］.系统仿真学报，2012，24 （2）：357－360.］

［17］LIANG Chunyu，LI Xintong.The design of the lightweight WebGIS based on GeoJSON by using HTML5canvas ［J］.Computer Science and Application，2012，2：189－196 （in Chinese）.［梁春雨，李新通.使用HTML5Canvas构建基于GeoJSON 的轻量级WebGIS ［J］.计算机科学与应用，2012，2：189－196.］

［18］WU Lei，ZHANG Fuqing.A study on WebGIS client based on HTML canvas［J］.Geomatics World，2009，7 （3）：78－82 （in Chinese）. ［吴磊，张福庆.基于HTML canvas的WebGIS 客户端技术研究 ［J］.地理信息世界，2009，7（3）：78－82.］