大规模道路交通数据网络轻量化可视化方法

2021-10-31吴思豪张昀昊黄华平郭煜坤陈逸东李维炼

西南交通大学学报 2021年5期

朱军，吴思豪，张昀昊，黄华平，郭煜坤，陈逸东，李维炼

（1.西南交通大学地球科学与环境工程学院，四川成都 611756；2.中铁二院测绘工程设计研究院，四川成都610031）

伴随着城市化的热潮，不断增加的城市汽车保有量与有限的交通资源的供需矛盾也愈发激烈[1]，其直接结果便是交通拥堵问题.道路交通信息实时可视化能够清晰展示实时交通拥堵状态，揭示交通流量变化趋势，辅助交通部门实时监控交通流量信息并及时向社会发布[2]，让人们根据交通状态更有计划地选择出行时间与路线.人们在日常出行中普遍通过浏览器使用各类工具浏览实时交通状态，然而，浏览器的现有性能难以支持海量实时交通信息的展示[3-4].因此如何在网络环境下对海量实时道路交通数据进行高效可视化是目前面临的关键问题.

现有网络可视化技术大多需要安装浏览器插件实现对海量数据的高效渲染，但这对后期维护和更新带来了一定的困难，同时，浏览器插件不能满足用户对Web GIS（geographic information system）便捷性与实时性的预期[5].近年来，随着Web GIS 技术的快速发展与普及，基于WebGL (Web graghics library)技术实现网络环境下跨平台、免插件式的道路交通流量数据可视化的需求日益增强[6-10].然而，WebGL作为免插件式的网络可视化技术，难以直接支持对大规模道路交通数据的高质量以及高效率渲染.

国内外利用WebGL 技术进行道路可视化方面的研究大多通过车辆轨迹流变化体现交通态势变化[11]，面向公众的电子产品，如百度地图、高德地图以及腾讯地图等，一般在地图上绘制箭头，使用箭头的方向、粗细或颜色代表轨迹方向以及密集程度[12]，可视化效果差，相较于动画，数据表示方法给予人脑思维的刺激感更低.邓晨晨[13]利用百度推出的ECharts开源可视化产品对重庆市公交出行轨迹进行了动态可视化；Tominski 等[14]通过二、三维联动可视化车辆轨迹，在二维地图上增加三维属性值表示车速以及车流量，但以上方法并不支持大规模交通数据的渲染，在效率上依旧存在缺陷.

在可视化系统中，利用合适的动画与过渡效果是增强可视化结果视图的丰富性与可理解性的有效方法[15].流光线和颜色渐变作为提高可视化效果的两种基础方法，对改善视觉效果以及用户交互感受有巨大作用.流光线是通过不断更新颜色、透明度等光学属性产生流动效果的光线[16]，其相较于静态线来说，有更强的视觉冲击力，颜色渐变作为辅助手段，能够提升用户观察交通态势变化的敏感程度.海量道路交通数据若直接在浏览器中渲染，将存在数据获取速度慢、传输效率低、渲染效果差等问题.

因此，本文提出一种面向实时道路交通大数据的大规模流光线网络轻量化可视化方法.首先，采用高精度的大规模道路网数据为研究对象，在此基础上进行了道路网数据重构.基于道路属性的道路网分层组织，系统研究了基于WebGL 线段索引特点的多道路合并方法.其次，使用视域剔除以及多线程技术对场景进行优化，设计实现了支持道路拥堵状态实时变换的渐变、高效实时动态流光线等动画效果.最后，以全国道路网数据为例，进行大规模流光线网络轻量化可视化实验与分析.

1 道路网分层组织方法

1.1 道路网数据重构

本文的整体结构如图1 所示.

图1 大规模流光线网络轻量化可视化方法Fig.1 Lightweight visualization method of large-scale streaminglight network

大规模流光线高效实时动态渲染可视化需要处理大量的道路数据，其精确的道路数据是实验的基础[17].为保证流光线在Web 端可视化的实时性与高效性，需要对道路数据进行合理的格式转换以及冗余信息的过滤，有效提高Web 端对道路数据的获取速度与传输效率.预处理流程如图2 所示.

图2 数据预处理Fig.2 Data preprocessing

目前大规模二维道路网数据一般为shape 文件.相比于shape，JSON 更加简练、小巧，另外浏览器对JSON 快速解析的支持使得JSON 更适用于网络传输领域[3]，符合在网络环境下传输大数据的需求.因此本文选用JSON 作为数据交换格式，通过WebSocket实时服务器与浏览器页面进行数据传输，在接入shape 文件与实时路况信息时对其进行格式转换，然后将处理好的JSON 形式的数据传输到浏览器端，用以数据解析以及后续动态可视化渲染绘制.

由于道路数据含有多种特征信息，冗余信息过多势必会造成数据量过大，影响精确道路数据在浏览器中的获取速度与传输效率，因此需要过滤掉数据中的无关信息，本文只需要道路编号、道路名称、道路几何数据、道路红线宽度4 种道路特征信息.

1.2 基于道路属性的道路网分层组织

大规模道路网数据拓扑关系极其复杂，各等级道路交织纵横，由于大规模道路网数据并没有直接区分道路等级，若将所有道路直接进行渲染会让屏幕画面过于杂乱且不美观，导致用户体验度很差.例如，当视点很高时，很多肉眼难以分辨或模糊的道路依然被绘制出来，使屏幕画面不清晰.而且多余的绘制以及数据调度会造成设备硬件资源的浪费.在此提出一种基于道路属性的道路网分层组织方法，根据道路数据的几何数据以及道路名称属性对JSON格式数据进行合理的匹配合并，在此基础上根据道路红线宽度和路长对道路网进行分层，并建立空间索引，再根据视点位置变化进行道路数据的动态调度，其具体步骤描述如下：

步骤1获取JSON 数据中每条道路的道路点数据的几何数据、道路名称.

步骤2匹配道路名称和道路几何数据的起点与终点，将道路名称相同且被分为多段的道路进行合并，合并道路红线宽度取最大值.

步骤3获取JSON 数据中每条道路的道路点序列、道路红线宽度.

步骤4计算道路长度D=d1+d2+···+dn，定义di为相邻道路顶点之间距离，单位为km，i=1,2,···,n.根据Haversin 公式可推导得

式中：Δ λ1、Δ λ2分别为相邻道路顶点的纬度差、经度差；l1、l2为相邻道路顶点的纬度；R=6371 km，为地球半径.

根据《城市道路工程设计规范》[18]，对道路红线宽度W建议一级道路不小于40 m，二级道路30～40 m，三级道路25～30 m，四级道路12～25 m.设定路长阈值为P，若W≥40m，将该道路归为Ⅰ层；若30m≤W<40 m且D

步骤5根据道路分层结果建立空间索引优化数据调度，开始本帧渲染，判断视角高H和阈值P1、P2、P3对应的视角高H1、H2、H3（分别取1、10、50 km）的大小.若H≥H1，只调用Ⅰ层道路数据；若H2≤H

算法流程如图3 所示.

图3 算法流程Fig.3 Algorithm flowchart

2 大规模流光线实时渲染与场景优化

2.1 基于WebGL 线段索引特点的多道路合并方法

在WebGL 中，线段的渲染是通过线图元完成的，一条线段需要两个三角形图元构成，所以需要通过复制顶点生成线段对应的4 个顶点和6 个索引值.线段绘制出来的形状取决于索引值数组的排列顺序，若索引值缺失或者错位，绘制出来的图形会是错乱的、不完整的.基于这个特点，可以将多条道路合并成一条道路.以A、B、C、D4 个点为例，经过复制后，坐标为分别对应的索引值为0、1、2、3、4、5、6、7、8、9、10、11.

当索引值数组为（0，2，1，1，2，3，4，6，5，5，6，7，8，10，9，9，10，11）时，绘制图形如图4（a）所示.删除点B和C之间的6 个索引值后，索引值数组为（0，2，1，1，2，3，8，10，9，9，10，11），绘制图形如图4（b）所示，此时B和C两点之间的两个三角形图元没有被绘制出来.

图4 WebGL 线段索引特点Fig.4 WebGL segment index features

当用户需要分别绘制点A、B和点C、D之间的道路时，将它们分为两个primitive 进行渲染.向顶点着色器中按顺序输入两段道路的点坐标后，只要在索引值数组中删去道路与道路接合部分的索引，就能实现相同的渲染结果.在渲染大规模道路交通数据时，此方法能极大地减少CPU 的计算次数，有效地缩短由数据解析到生成primitive 过程所耗费的时间.

由于将多条道路合并为一个primitive 进行渲染改变了索引数组的结构，所以需要对索引数组对应的其他描述数据进行修改.

已知所有道路的数量和每条道路的数据点数量，构建一个巨大的索引值数组.索引增加规律如下：设置n的初始值为0，在相同的道路内，每增长一个数据点，n的值增长1，索引值数组在原来的基础上增加以下6个数组元素 4n、4n+2、4n+1、4n+1、4n+2、4n+3；完成道路数据点遍历后，n的值增长1，然后开始处理新的道路.重复上述步骤，直到所有道路处理完成.

经过道路网分层组织以及多道路进行合并之后，渲染效率得到了有效的提升.流光线渲染可以解释为折线段的分段设色与周期变色相结合.算法流程如下：

1）根据道路分层将每条道路分为合适的n段，实验中n在Ⅰ、Ⅱ、Ⅲ、Ⅳ层分别设置为相邻道路点距离（m）除以1000、200、30、2 的商值，并为每段道路添加道路时间值 α 以及流光流动周期 β，使流光在道路上循环流动.

2）设置一个初始值为0 且随时间增长的变量t，求当前时间与道路时间值的差值 Δt=tmod β−α.

设置阈值T1、T2、T3分别为65、70、130.当T1≤Δt≤T2，流光线条头部颜色设置为c1；当T2≤Δt≤T3，流光线条尾部颜色设置为c2，如式（2）所示.

式中：t0、t1、t2分别为所求颜色对应道路点、Δt=T3对应道路点、Δt=T2对应道路点的道路时间值；c0为车道颜色；r、g、b分别为红、绿、蓝值.

如图5 所示，渐变流光线由5 个颜色组成，前端的深色部分代表流光线的流动方向.交通态势发生变化时，c1与c2设置为随t变化而变化的目标颜色，从而实现颜色渐变的效果.图中由深至浅构成渐变流光线的5 个颜色的（r，g，b）分别为（137，105，5）、（203，155，5）、（255，230，110）、（255，243，164）、（255，255，217）.

图5 流光线实时渲染Fig.5 Real-time rendering of streaming light

2.2 大规模道路网场景优化方法

在可视化过程中，场景的渲染速度及效果除了与硬件单元性能以及数据复杂度有关外，也和优化方式关系密切[19].虽然对大规模道路数据的复杂问题进行了处理，但在渲染大规模流光线时，依旧存在大量硬件资源被浪费的情况，实时动态渲染大规模流光线时，选择绘制场景中的内容与提升计算并行度是优化渲染速度及效果的关键.具体优化流程如图6 所示.

图6 场景优化Fig.6 Scene optimization

在大规模流光线实时动态渲染时，在显示设备中只能显示道路的一部分，未被显示的道路并不需要绘制，这一部分道路会很大程度地浪费硬件资源，因此需要把未被观察到的道路进行剔除处理.通过获取每帧渲染开始时的相机坐标、视点位置以及视角高，计算得到视域范围，将在视域范围外的道路点数据剔除.

在网络端的渲染过程中，如果图像渲染、加载数据以及逻辑关系处理都在同一线程，易导致线程堵塞，渲染效率偏低[20].将数据读取、处理与显示分别放在不同线程中进行.主线程、渲染线程以及加载线程这样的多线程设计使得加载数据不会堵塞主线程或者渲染线程，进一步提升计算并行度，提高大规模流光线实时动态渲染的效果.

3 实验结果与分析

为验证方法的有效性，利用WebGL 技术研发可视化原型系统，选择全国道路网shape 格式数据进行了实验分析.在数据处理方面，对shape 文件进行处理，转为geojson 格式.然后提取了geojson 文件中的ID、coordinate 以及name 信息，并将其组织为更适合网络环境传输的JSON 格式.

采用笔记本电脑作为服务端搭建网络环境.硬件环境为Intel Core i52.6 GHz CPU、8 GB 内存、2 GB 显存的NVIDA Geforce 860 M 显卡；软件环境为Windows 10 操作系统、Google Chrome 78 浏览器.

使用1、10、50 km 视角高阈值将全国道路网分为4 个不同层次的道路网.采用3 种不同颜色的流光线来表达不同拥挤程度的交通态势，如表1 所示，其中每条流光线由流光线尾部到流光线头部之间的颜色组成，表中颜色数值分别为红、绿、蓝值.

表1 不同颜色的流光线Tab.1 Different colors of streaming light

实验效果见图7 和图8.图7 展示了分别截取自7000.0、40.0、5.0、0.5 km 视角高交互漫游过程中的场景，分别对应场景1～4.图8 展示了一条正在运动的流光线在不同时刻的可视化效果.

图7 不同视角高下交通数据可视化Fig.7 Visualization of traffic data from different view heights

图8 不同时刻下的流光线Fig.8 Streaming light at different times

图9 展示了大规模流光线可视化在不同场景、角度、方法漫游交互50.0 秒过程中的帧率.从图中可以看出利用本文可视化方法在不同场景下、不同角度下的可视化帧率均稳定在40 帧/秒以上，相较于同等情况下利用百度ECharts GL 方法帧率提高了20～30 帧/秒.进行场景优化后，4 种场景下的相关参数见表2.

图9 大规模流光线可视化实时渲染帧率Fig.9 Real-time rendering frame rate of large-scale streaming light visualization

从表2 可以看出，在漫游过程中，基于视角高的变化，动态地对道路网数据进行了选择性可视化，做到了按需加载，并且在有效减少场景一次性渲染大量流光线同时，相应的道路层级道路占可视化页面总道路数75%以上，保持了较高的道路层级真实度，大大的提升了渲染效率.在不同视角高以及不同漫游角度下均能保证交互漫游过程中浏览器端可视化的实时渲染帧率稳定在 40 帧/秒以上，性能表现良好.证明本文方法支持在网络环境下对面向实时交通大数据的大规模流光线进行可视化展示.