园区公交运营数据三维可视化初探

一、背景

    由于在2016年全程参与了园区公交三期项目，其中一个子系统为“公交客流采集与分析”，即通过乘客刷卡投币数据、公交车辆轨迹数据及公交排班运营等数据，分析出乘客OD数据、线路客流数据及站点客流数据等。因而积累了一些公交原始数据和分析数据。

    加之之前看到过一个有趣的project，将旧金山的出租车轨迹数据结合建筑、水系数据，用三维的方式表现出来。受之启发，于2017年初开发了这个“园区公交运营数据三维可视化”系统。

公交运营三维可视化

二、数据

基础数据：

    园区建筑数据

    园区水系数据

公交专题数据：

    园区公交路线数据

    园区公交站点数据

    园区公交车一天的GPS轨迹数据

    园区公交一天的客流数据

三、功能

运营轨迹

    将每一辆公交车辆的GPS点按时间序列连接成线，依次绘制到三维场景中，呈现全部50条线路、700余辆公交车的全天运营轨迹。

    由于公交线路覆盖密度的不一致，表现到场景中便会出现颜色的明暗差异，如主干路上的轨迹线比支路会更“亮”一些。

左侧面板中提取了行驶里程前五的线路和车辆，点击可以在地图中红色高亮查看。

站点客流

    以站点为单元，从分时段客流、累计客流两个维度，配合时间轴来还原全天客流变化情况、总量高低分布。

分时客流

累计客流

站点OD

    选择某一站点作为O，显示其关联的所有到达站点（D）。通过颜色的差异代表客流量的大小。

天气模拟

    为了获得更真实的场景环境体验，引入粒子系统来模拟雨、雪等天气效果。

四、技术点

三维渲染及动画库

three.js：一个JavaScript 3D库，封装了底层的WebGL图形接口，提供简化、高效的三维图形程序开发。

tween.js：一款可生成平滑动画效果的JS动画库，易于和threejs结合。

建筑数据抽稀

    全园区接近35000幢建筑，为减轻数据传输压力，在保证数据特征的前提下，对其进行简化抽稀。

水系数据三角网剖分

    因水系涉及复杂多边形（环、洞），无法直接使用THREE.SHAPE函数将geojson转换成geometry。采用德劳内三角剖分算法自己构建三角网，再构造geometry。

五、TODO

1. 考虑通过websocket从后端推送实时数据并显示，如车辆gps数据、客流数据、天气数据等

2. 丰富基础地理数据，如绿地、交通标识等

3. 叠加瓦片地图，如openstreetmap作为底图

4. 欢迎补充建议