一款輕量級街景影像展示系統(tǒng)的設計與實現(xiàn)

李靜澤，岳建偉*，錢 歡

（1.北京師范大學地理數(shù)據(jù)與應用分析中心，北京 100875）

街景地圖服務作為三維全景技術的典型應用，它將平面地圖的位置查詢功能和三維全景的虛擬現(xiàn)實技術結合起來[1]，給地圖賦予了一種新的表現(xiàn)形式，為用戶帶來身臨其境的真實感。

自街景技術誕生以來，國內(nèi)外相繼推出了多個大型街景地圖服務，如谷歌地圖、騰訊地圖、百度地圖[2]等。其中騰訊地圖作為國內(nèi)發(fā)展較早的街景地圖服務，據(jù)官網(wǎng)顯示其街景地圖的覆蓋城市已達到296 個，并對外提供了數(shù)據(jù)獲取和API 使用接口。基于這些接口所建立的街景展示系統(tǒng)雖然功能完善，但不能將自行采集的街景數(shù)據(jù)進行發(fā)布，具有很大的應用局限性。此外，車載全景移動測量系統(tǒng)[3]的發(fā)展使得街景數(shù)據(jù)采集工作變得更加簡單，如何將采集的海量數(shù)據(jù)進行發(fā)布，成為街景地圖服務推廣和應用的急需解決的問題。

張春梅等[4]深入研究太原市全景構建項目，對街景影像數(shù)據(jù)的外業(yè)采集、內(nèi)業(yè)處理與建庫等過程進行了詳細的闡述，形成了完整的街景地圖生產(chǎn)與發(fā)布流程。熊秋林等[5]基于Ajax、JavaScript 等瀏覽器技術以及百度電子地圖接口建立了一套車載全景地圖發(fā)布系統(tǒng)，并選擇北京城區(qū)部分街景數(shù)據(jù)進行了測試，結果證明該全景地圖建立方案具有較強的可行性。劉志浩[6]基于Webgl 和Soso 地圖服務搭建了面向道路養(yǎng)護的街景地圖瀏覽系統(tǒng)，對街景影像的處理和渲染進行了優(yōu)化，并實現(xiàn)漫游、視角切換等多種地圖交互方式，具有較強的真實感。朱明等[7]將天地圖與Papervision 3D引擎進行了結合，設計并實現(xiàn)了一套街景地圖系統(tǒng)，在公共服務和政務應用中發(fā)揮了很好的作用。

以上研究中所構建的系統(tǒng)基本實現(xiàn)了街景影像的展示功能，但仍有一定的缺陷。主要表現(xiàn)在：①針對街景大數(shù)據(jù)高效存儲檢索方法的研究相對較少。在進行場景漫游的過程中，需要進行頻繁的數(shù)據(jù)檢索，而街景數(shù)據(jù)量巨大，其檢索速度直接影響系統(tǒng)的性能。②針對場景內(nèi)導向箭頭快速計算方法的研究較少，導向箭頭是場景之間相互關聯(lián)的要素，其方向計算的準確性和速度也會影響到系統(tǒng)的用戶體驗。

本文綜合分析了街景影像數(shù)據(jù)量巨大、影像曝光點空間位置特性強的特點，在現(xiàn)有的技術上進行整合，對街景大數(shù)據(jù)的存儲管理和街景場景構建過程進行重點優(yōu)化，最終設計并實現(xiàn)了一款輕量級的街景影像展示系統(tǒng)，為街景影像提供了良好的發(fā)布與展示平臺，希望以此來推動街景地圖在更多行業(yè)的應用。

1 系統(tǒng)設計

1.1 總體設計

街景影像展示系統(tǒng)主要用于街景影像數(shù)據(jù)的網(wǎng)絡展示與傳播，因此系統(tǒng)在設計與開發(fā)時使用B/S 架構，由服務器統(tǒng)一進行數(shù)據(jù)管理和請求處理，用戶可以通過瀏覽器對街景場景進行查看，系統(tǒng)的總體結構設計如圖1 所示。

系統(tǒng)應用層基于vue.js 及其生態(tài)系統(tǒng)進行開發(fā)，利用vue 良好的封裝能力將街景場景展示功能封裝成單獨的組件，并提供了開放的API 接口以提高模塊嵌入能力。在服務層，系統(tǒng)的服務器端選擇采用SSM 框架進行搭建，并使用Maven 作為項目管理輔助工具，最終實現(xiàn)了完整的前后端信息流通。在數(shù)據(jù)層，由于街景影像切片數(shù)據(jù)量巨大、文件細碎，使用文件系統(tǒng)進行存儲；曝光點數(shù)據(jù)具有較強的空間位置特性，為典型的對象-空間關系型數(shù)據(jù)，存儲于空間數(shù)據(jù)庫中。平面地圖使用Geo Server 發(fā)布衛(wèi)星影像瓦片。

圖1 系統(tǒng)總體結構

1.2 技術選型

1.2.1 地圖服務引擎

平面地圖是街景地圖服務的基礎，需要在平面地圖上查看當前場景對應的真實位置、真實朝向和街景地圖的街道范圍。本系統(tǒng)開發(fā)時選取了Geo Server 作為平面地圖發(fā)布的服務器引擎，前端使用Open Layers3進行平面地圖接入。

Geo Server 是一個開元的地圖服務發(fā)布和管理平臺，是在著名的開源GIS 中間件GEO Tools 的基礎上進行開發(fā)的[8]，支持PostGIS、OSM、KML、shpfile、GeoJSON 等豐富的地圖數(shù)據(jù)源，同時能夠進行WMS、WFS 等多種地圖服務的發(fā)布，使得空間地理數(shù)據(jù)能夠通過網(wǎng)絡進行傳播。相比于傳統(tǒng)的ArcGIS Server 地圖服務器來說，其架設簡單、功能可以滿足大部分WEB地圖應用開發(fā)的需求。

Open Layers3 是一款開源的Java Script 框架[9]，提供了豐富的WebGIS 開發(fā)類庫。Open Layers 3 采用了面向對象的設計開發(fā)方式[10]，將地圖中關鍵的要素封裝成了不同的類，使開發(fā)者能夠輕易在業(yè)務系統(tǒng)中嵌入地圖模塊，并將Geo Server 發(fā)布服務接入地圖中進行展示，從而開發(fā)出高性能的WebGIS 應用程序。

1.2.2 街景顯示引擎

系統(tǒng)選擇Krpano 作為街景影像顯示引擎。Krpano是一款基于Flash 的三維全景播放器[11]，它以輕量、靈活和性能高著稱，并且具有良好的跨平臺特性[12]，受到廣泛的應用和推廣。Krpano 提供了豐富的功能插件，包括跳轉熱點、文字顯示、三維特效等功能。

Krpano 將顯示效果和場景內(nèi)部配置分開進行管理，顯示效果及響應事件使用Action Script 語言實現(xiàn)，場景及插件配置使用XML 進行控制[13]。Action Script 可以與前端開發(fā)語言Java Script 進行信息交互，使Krpano控件可以與前端網(wǎng)頁很好的進行融合。

1.2.3 數(shù)據(jù)存儲引擎

Postgresql 是一款開元的對象型關系數(shù)據(jù)庫系統(tǒng)，安裝簡便，存儲速度快，而且支持多種數(shù)據(jù)庫操作語言，包括SQL、GDBC、ODBC 等，使Postgresql可以與其他數(shù)據(jù)庫進行無縫遷移[14]。PostGIS 插件為Postgresql 提供了空間數(shù)據(jù)的擴展，將空間數(shù)據(jù)以關系型數(shù)據(jù)的形式進行存儲，并且提供了300 多個空間分析函數(shù)，使復雜的空間分析過程通過簡單的SQL 語句就可以完成，非常方便。

系統(tǒng)在開發(fā)過程中街景曝光點位置數(shù)據(jù)需要以空間數(shù)據(jù)的形式進行存儲，而且在實際應用的過程中往往需要選取距離某個位置最近的街景場景進行加載顯示，充分利用了PostGIS 良好的的空間臨近分析的功能。

1.3 功能設計

系統(tǒng)以地圖信息獲取為目的，將平面電子地圖與街景場景相結合，因此系統(tǒng)主要提供了以平面電子地圖為主體和以街景影像圖為主體兩個頁面，功能主要包括平面地圖瀏覽模塊、圖層控制模塊、地圖交互模塊、街景瀏覽模塊、跳轉聯(lián)動模塊五大模塊，如圖2 所示。

其中，平面電子地圖包含了常用的地圖瀏覽模塊和圖層控制模塊，保證系統(tǒng)具有基礎的平面地圖查看功能，通過地圖交互模塊可以打開街景場景以及切換到以街景為主體的頁面，街景瀏覽模塊可以使用戶在場景內(nèi)進行漫游查看，在場景發(fā)生變化時還能保證場景與地圖之間的聯(lián)動。

圖2 系統(tǒng)功能模塊

2 關鍵技術

2.1 數(shù)據(jù)索引技術

街景地圖服務最大的特點就是數(shù)據(jù)量巨大且檢索頻繁，因此必須建立必要的數(shù)據(jù)索引關系從而提升數(shù)據(jù)的檢索速度。在室外采集到的街景數(shù)據(jù)包括兩類：街景影像數(shù)據(jù)和曝光點信息數(shù)據(jù)，本系統(tǒng)根據(jù)兩類數(shù)據(jù)特性制定了兩種數(shù)據(jù)索引方法。

2.1.1 文件數(shù)據(jù)索引技術

街景影像數(shù)據(jù)用于構建全景場景，也是街景瀏覽時資源傳輸量最大的數(shù)據(jù)。在數(shù)據(jù)處理時使用影像瓦片技術將街景照片按照立方體的8 個方向進行分級切片，切片化后的數(shù)據(jù)較為瑣碎，選擇文件系統(tǒng)的方式進行保存。

一般的街景切片管理方式是以日期為依據(jù)劃分為不同文件夾，這種數(shù)據(jù)存儲方式?jīng)]有考慮數(shù)據(jù)的空間特性，數(shù)據(jù)檢索時需要對同一天的所有場景依次進行遍歷，直至找到目標影像數(shù)據(jù)，速度較為緩慢。

本系統(tǒng)按照片曝光的空間位置對街景照片數(shù)據(jù)構建索引，將街景切片根據(jù)“區(qū)域”、“街道”，“街景”的模式進行分層存儲，如圖3 所示。并將文件的存儲信息同時放于數(shù)據(jù)庫表中，如表1 所示。街景影像檢索過程中通過區(qū)域劃分縮小了目標數(shù)據(jù)檢索范圍，有效提高了場景的加載速度。

圖3 街景照片存儲結構圖

表1 曝光點信息表結構

2.1.2 空間數(shù)據(jù)索引技術

曝光點位置數(shù)據(jù)記錄了攝影光束在曝光瞬間的空間位置和姿態(tài)等參數(shù)，是街景場景與平面地圖關聯(lián)的重要信息。由于曝光點位置數(shù)據(jù)具有較強的空間位置特性，系統(tǒng)使用PostgreSQL 數(shù)據(jù)庫進行數(shù)據(jù)存儲，并在空間列上構建GiST 空間索引以提升數(shù)據(jù)檢索速度。在空間索引的基礎上利用空間分析函數(shù)，極大地簡化了后臺請求處理的難度。本系統(tǒng)使用的空間查詢語句如下：

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 場景內(nèi)導向箭頭角度計算

傳統(tǒng)向Krpano 場景中添加的導向箭頭熱點的方式為圖片嵌入，以這種方法添加的熱點樣式比較呆板，且不能跟隨場景的旋轉進行位置改變，在進行場景瀏覽時必須將場景視角旋轉至熱點固定的方向才能進行場景的跳轉，操作非常繁瑣。

針對該問題，系統(tǒng)引入了一種新的箭頭導向加載方式：先在獨立坐標系中得到能描述一個指向箭頭的關鍵點坐標，然后通過坐標轉換的方式將箭頭添加至場景中去，當場景發(fā)生旋轉時會根據(jù)觀察的角度實時計算并更新箭頭的位置，這樣導向箭頭可以一直存在于場景觀察視野中，方便場景的跳轉。實現(xiàn)效果如圖4 所示。

圖4 場景導向箭頭效果圖

以該種方式向場景中添加導向箭頭時，需要計算箭頭相對于當前場景的朝向角度，而在室外采集到的街景曝光點信息數(shù)據(jù)中僅記錄了照片曝光時相機的真實方位角，如圖5 所示。因此在場景構建時快速準確地計算出場景內(nèi)導向箭頭的方向也是本系統(tǒng)要解決的重要問題。

圖5 相鄰場景真實方位角與相對觀察方向對比圖

經(jīng)過分析與總結，導向箭頭朝向的計算方式可以根據(jù)相鄰場景真實方位角的矢量方向與該場景相對于當前場景的觀察方向之間的關系來確定，關系如表2所示。其中，下一場景中兩者的方向必然相同，上一場景兩者的方向必然相反。左右轉場景真實方位角的矢量方向是由車輛的行使方向來確定的，可根據(jù)場景照片拍攝的先后順序進行判斷。

表2 方位角矢量方向與相對觀察方向關系表

在對比分析的基礎上得出導向箭頭朝向的計算方法如式（1）：

圖6 系統(tǒng)總體實現(xiàn)效果圖

3 系統(tǒng)實現(xiàn)

系統(tǒng)的最終實現(xiàn)效果如圖6 所示，在系統(tǒng)功能上，系統(tǒng)實現(xiàn)了地圖瀏覽、全景加載顯示、全景漫游等功能模塊。用戶點擊街景影像采集范圍內(nèi)的任意位置，系統(tǒng)會加載距離該點最近的街景場景。此外，平面地圖中還添加了雷達標志用來標識當前場景所在的真實位置和觀察方向。系統(tǒng)將平面地圖與全景場景進行更好的結合，豐富了地圖的信息量和表現(xiàn)方式。

4 結 語

本文以Web GIS 為表現(xiàn)形式，綜合Geo Server 地圖服務引擎、PostgreSQL 數(shù)據(jù)庫引擎以及Krpano 三維全景顯示引擎，設計并實現(xiàn)了一套輕量級、嵌入能力強的街景影像展示系統(tǒng)，較好地解決了街景影像大數(shù)據(jù)高效管理和場景內(nèi)導向箭頭自動快速計算問題，為街景地圖提供了良好的數(shù)據(jù)發(fā)布與展示平臺，希望能應用于更多的領域，以此推動街景技術的廣泛應用。