一款轻量级街景影像展示系统的设计与实现

李静泽，岳建伟*，钱 欢

（1.北京师范大学地理数据与应用分析中心，北京 100875）

街景地图服务作为三维全景技术的典型应用，它将平面地图的位置查询功能和三维全景的虚拟现实技术结合起来[1]，给地图赋予了一种新的表现形式，为用户带来身临其境的真实感。

自街景技术诞生以来，国内外相继推出了多个大型街景地图服务，如谷歌地图、腾讯地图、百度地图[2]等。其中腾讯地图作为国内发展较早的街景地图服务，据官网显示其街景地图的覆盖城市已达到296 个，并对外提供了数据获取和API 使用接口。基于这些接口所建立的街景展示系统虽然功能完善，但不能将自行采集的街景数据进行发布，具有很大的应用局限性。此外，车载全景移动测量系统[3]的发展使得街景数据采集工作变得更加简单，如何将采集的海量数据进行发布，成为街景地图服务推广和应用的急需解决的问题。

张春梅等[4]深入研究太原市全景构建项目，对街景影像数据的外业采集、内业处理与建库等过程进行了详细的阐述，形成了完整的街景地图生产与发布流程。熊秋林等[5]基于Ajax、JavaScript 等浏览器技术以及百度电子地图接口建立了一套车载全景地图发布系统，并选择北京城区部分街景数据进行了测试，结果证明该全景地图建立方案具有较强的可行性。刘志浩[6]基于Webgl 和Soso 地图服务搭建了面向道路养护的街景地图浏览系统，对街景影像的处理和渲染进行了优化，并实现漫游、视角切换等多种地图交互方式，具有较强的真实感。朱明等[7]将天地图与Papervision 3D引擎进行了结合，设计并实现了一套街景地图系统，在公共服务和政务应用中发挥了很好的作用。

以上研究中所构建的系统基本实现了街景影像的展示功能，但仍有一定的缺陷。主要表现在：①针对街景大数据高效存储检索方法的研究相对较少。在进行场景漫游的过程中，需要进行频繁的数据检索，而街景数据量巨大，其检索速度直接影响系统的性能。②针对场景内导向箭头快速计算方法的研究较少，导向箭头是场景之间相互关联的要素，其方向计算的准确性和速度也会影响到系统的用户体验。

本文综合分析了街景影像数据量巨大、影像曝光点空间位置特性强的特点，在现有的技术上进行整合，对街景大数据的存储管理和街景场景构建过程进行重点优化，最终设计并实现了一款轻量级的街景影像展示系统，为街景影像提供了良好的发布与展示平台，希望以此来推动街景地图在更多行业的应用。

1 系统设计

1.1 总体设计

街景影像展示系统主要用于街景影像数据的网络展示与传播，因此系统在设计与开发时使用B/S 架构，由服务器统一进行数据管理和请求处理，用户可以通过浏览器对街景场景进行查看，系统的总体结构设计如图1 所示。

系统应用层基于vue.js 及其生态系统进行开发，利用vue 良好的封装能力将街景场景展示功能封装成单独的组件，并提供了开放的API 接口以提高模块嵌入能力。在服务层，系统的服务器端选择采用SSM 框架进行搭建，并使用Maven 作为项目管理辅助工具，最终实现了完整的前后端信息流通。在数据层，由于街景影像切片数据量巨大、文件细碎，使用文件系统进行存储；曝光点数据具有较强的空间位置特性，为典型的对象-空间关系型数据，存储于空间数据库中。平面地图使用Geo Server 发布卫星影像瓦片。

图1 系统总体结构

1.2 技术选型

1.2.1 地图服务引擎

平面地图是街景地图服务的基础，需要在平面地图上查看当前场景对应的真实位置、真实朝向和街景地图的街道范围。本系统开发时选取了Geo Server 作为平面地图发布的服务器引擎，前端使用Open Layers3进行平面地图接入。

Geo Server 是一个开元的地图服务发布和管理平台，是在著名的开源GIS 中间件GEO Tools 的基础上进行开发的[8]，支持PostGIS、OSM、KML、shpfile、GeoJSON 等丰富的地图数据源，同时能够进行WMS、WFS 等多种地图服务的发布，使得空间地理数据能够通过网络进行传播。相比于传统的ArcGIS Server 地图服务器来说，其架设简单、功能可以满足大部分WEB地图应用开发的需求。

Open Layers3 是一款开源的Java Script 框架[9]，提供了丰富的WebGIS 开发类库。Open Layers 3 采用了面向对象的设计开发方式[10]，将地图中关键的要素封装成了不同的类，使开发者能够轻易在业务系统中嵌入地图模块，并将Geo Server 发布服务接入地图中进行展示，从而开发出高性能的WebGIS 应用程序。

1.2.2 街景显示引擎

系统选择Krpano 作为街景影像显示引擎。Krpano是一款基于Flash 的三维全景播放器[11]，它以轻量、灵活和性能高著称，并且具有良好的跨平台特性[12]，受到广泛的应用和推广。Krpano 提供了丰富的功能插件，包括跳转热点、文字显示、三维特效等功能。

Krpano 将显示效果和场景内部配置分开进行管理，显示效果及响应事件使用Action Script 语言实现，场景及插件配置使用XML 进行控制[13]。Action Script 可以与前端开发语言Java Script 进行信息交互，使Krpano控件可以与前端网页很好的进行融合。

1.2.3 数据存储引擎

Postgresql 是一款开元的对象型关系数据库系统，安装简便，存储速度快，而且支持多种数据库操作语言，包括SQL、GDBC、ODBC 等，使Postgresql可以与其他数据库进行无缝迁移[14]。PostGIS 插件为Postgresql 提供了空间数据的扩展，将空间数据以关系型数据的形式进行存储，并且提供了300 多个空间分析函数，使复杂的空间分析过程通过简单的SQL 语句就可以完成，非常方便。

系统在开发过程中街景曝光点位置数据需要以空间数据的形式进行存储，而且在实际应用的过程中往往需要选取距离某个位置最近的街景场景进行加载显示，充分利用了PostGIS 良好的的空间临近分析的功能。

1.3 功能设计

系统以地图信息获取为目的，将平面电子地图与街景场景相结合，因此系统主要提供了以平面电子地图为主体和以街景影像图为主体两个页面，功能主要包括平面地图浏览模块、图层控制模块、地图交互模块、街景浏览模块、跳转联动模块五大模块，如图2 所示。

其中，平面电子地图包含了常用的地图浏览模块和图层控制模块，保证系统具有基础的平面地图查看功能，通过地图交互模块可以打开街景场景以及切换到以街景为主体的页面，街景浏览模块可以使用户在场景内进行漫游查看，在场景发生变化时还能保证场景与地图之间的联动。

图2 系统功能模块

2 关键技术

2.1 数据索引技术

街景地图服务最大的特点就是数据量巨大且检索频繁，因此必须建立必要的数据索引关系从而提升数据的检索速度。在室外采集到的街景数据包括两类：街景影像数据和曝光点信息数据，本系统根据两类数据特性制定了两种数据索引方法。

2.1.1 文件数据索引技术

街景影像数据用于构建全景场景，也是街景浏览时资源传输量最大的数据。在数据处理时使用影像瓦片技术将街景照片按照立方体的8 个方向进行分级切片，切片化后的数据较为琐碎，选择文件系统的方式进行保存。

一般的街景切片管理方式是以日期为依据划分为不同文件夹，这种数据存储方式没有考虑数据的空间特性，数据检索时需要对同一天的所有场景依次进行遍历，直至找到目标影像数据，速度较为缓慢。

本系统按照片曝光的空间位置对街景照片数据构建索引，将街景切片根据“区域”、“街道”，“街景”的模式进行分层存储，如图3 所示。并将文件的存储信息同时放于数据库表中，如表1 所示。街景影像检索过程中通过区域划分缩小了目标数据检索范围，有效提高了场景的加载速度。

图3 街景照片存储结构图

表1 曝光点信息表结构

2.1.2 空间数据索引技术

曝光点位置数据记录了摄影光束在曝光瞬间的空间位置和姿态等参数，是街景场景与平面地图关联的重要信息。由于曝光点位置数据具有较强的空间位置特性，系统使用PostgreSQL 数据库进行数据存储，并在空间列上构建GiST 空间索引以提升数据检索速度。在空间索引的基础上利用空间分析函数，极大地简化了后台请求处理的难度。本系统使用的空间查询语句如下：

SELECT id,lat,lon FROM bgd

WHERE ST_DWithin( geom::geography,

ST_GeomFromText('Point(latlon)',4326)::geo graphy,100)

ORDER BY

ST_Distance_sphere(geom,

ST_GeometryFromText('Point(lat,lon)'))

ASC LIMIT 1;

2.2 场景内导向箭头角度计算

传统向Krpano 场景中添加的导向箭头热点的方式为图片嵌入，以这种方法添加的热点样式比较呆板，且不能跟随场景的旋转进行位置改变，在进行场景浏览时必须将场景视角旋转至热点固定的方向才能进行场景的跳转，操作非常繁琐。

针对该问题，系统引入了一种新的箭头导向加载方式：先在独立坐标系中得到能描述一个指向箭头的关键点坐标，然后通过坐标转换的方式将箭头添加至场景中去，当场景发生旋转时会根据观察的角度实时计算并更新箭头的位置，这样导向箭头可以一直存在于场景观察视野中，方便场景的跳转。实现效果如图4 所示。

图4 场景导向箭头效果图

以该种方式向场景中添加导向箭头时，需要计算箭头相对于当前场景的朝向角度，而在室外采集到的街景曝光点信息数据中仅记录了照片曝光时相机的真实方位角，如图5 所示。因此在场景构建时快速准确地计算出场景内导向箭头的方向也是本系统要解决的重要问题。

图5 相邻场景真实方位角与相对观察方向对比图

经过分析与总结，导向箭头朝向的计算方式可以根据相邻场景真实方位角的矢量方向与该场景相对于当前场景的观察方向之间的关系来确定，关系如表2所示。其中，下一场景中两者的方向必然相同，上一场景两者的方向必然相反。左右转场景真实方位角的矢量方向是由车辆的行使方向来确定的，可根据场景照片拍摄的先后顺序进行判断。

表2 方位角矢量方向与相对观察方向关系表

在对比分析的基础上得出导向箭头朝向的计算方法如式（1）：

图6 系统总体实现效果图

3 系统实现

系统的最终实现效果如图6 所示，在系统功能上，系统实现了地图浏览、全景加载显示、全景漫游等功能模块。用户点击街景影像采集范围内的任意位置，系统会加载距离该点最近的街景场景。此外，平面地图中还添加了雷达标志用来标识当前场景所在的真实位置和观察方向。系统将平面地图与全景场景进行更好的结合，丰富了地图的信息量和表现方式。

4 结 语

本文以Web GIS 为表现形式，综合Geo Server 地图服务引擎、PostgreSQL 数据库引擎以及Krpano 三维全景显示引擎，设计并实现了一套轻量级、嵌入能力强的街景影像展示系统，较好地解决了街景影像大数据高效管理和场景内导向箭头自动快速计算问题，为街景地图提供了良好的数据发布与展示平台，希望能应用于更多的领域，以此推动街景技术的广泛应用。