一款輕量級街景影像展示系統的設計與實現

李靜澤，岳建偉*，錢 歡

（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 三維全景顯示引擎，設計并實現了一套輕量級、嵌入能力強的街景影像展示系統，較好地解決了街景影像大數據高效管理和場景內導向箭頭自動快速計算問題，為街景地圖提供了良好的數據發布與展示平臺，希望能應用于更多的領域，以此推動街景技術的廣泛應用。