基于三維GIS的大屏可視化策略①

羅琪斯

(廣西壯族自治區地圖院,南寧 530023)

隨著大數據時代的到來和地理信息系統(GIS)行業應用的不斷深入,GIS 大屏可視化成為了面向多用戶群體的嶄新空間信息展示方式.數據可視化旨在借助圖形化手段,清晰有效地傳達與溝通信息[1].與二維GIS 相比,三維GIS 在數據結構、空間維度、視覺直觀性上都大為不同.當前,不乏從 GIS 界面形式、元素等方面出發,對界面設計進行闡述,但研究主要停留在對其性質的概括和設計方法的簡述,缺少對用戶界面具體設計方案的和設計經驗的全面總結[2-4].而很多大屏可視化方案也已借助于三維GIS,例如DataV、RayData 平臺,但模板式的大屏界面布局和設計風格趨于同質化,缺少對大屏本身特性和視覺認知習慣的包容和適應性的研究[5].如何將多維、多時態、多源異構的空間地理信息與高分辨率、大交互界面的大屏展示相結合,實現即可滿足海量信息的表達需求,確保大屏媒介服務于地理信息的表達,又可提升地理信息系統界面的視覺傳達效果,符合大屏媒介下的視覺傳輸規律[6]是本文的主要研究內容.本研究以大屏為展示載體,專題內容、表達方式都相對全面的南寧市三維綜合展示平臺為例,從可視化表達指標、頁面布局、色彩、符號、圖表等方面入手,構建了平臺設計策略框架,并闡述實現的方式與關鍵技術,最終完成以南寧市為城市數字孿生還原展示樣例的綜合展示平臺的成果建設.

1 表達指標

在基于三維GIS的可視化平臺中,二三維電子地圖是信息傳遞的主要區域,類比傳統地圖設計的流程,包括地理場景配置及地圖要素選取,根據展示內容及業務需求提取關鍵指標,抽象為平臺場景及具體的表達對象.

1.1 空間信息場景設計

利用二三維地圖及空間信息的視覺關系架構,根據認知規律,將展示場景設計為隨著空間尺度變化的5 個層次.宏觀尺度主要把控整體展示風貌,中觀尺度強化意向空間,微觀尺度細化景觀場景[6],進而形成地球單位、地形地貌單元、現代都市單元、城市新區單元、信息小鎮單元5 個展示場景,如圖1所示.實現物理世界在數字世界的映射,突破時空限制,多維度展現.

圖1 空間信息場景架構

每種場景均提供360°視角的互動旋轉,上一層場景與下一層場景間采用下鉆的切換方式,實現視覺上的無縫銜接,無級縮放.地球單元提供全球視野的專題展示平臺;地形地貌單元將衛星影像、數字高程模型、矢量數據等GIS 數據與專題數據相融合,將三維地圖與二維矢量數據進行聯動;城市新區單元設計白天與黑夜兩種光照模式下的大場景三維渲染,并對重點區域進行高亮顯示,使用戶置身場景中,滿足直觀、定位迅速的需求;信息小鎮單元,構建高精度3D 建筑模型,與周邊三維場景進行融合,場景效果如圖2所示.

圖2 場景效果設計

1.2 表達對象選取

展示平臺的各個場景對應所需呈現的各專題,專題與專題之間并非割裂的獨立個體,內容框架應具有一定的連續性.需根據平臺定位與業務需求,制定可串聯所有場景的敘事腳本和展示思路.如選取“全球-國省-都市-城市新區-科技園區”作為一鏡到底的故事性脈絡,層層遞進,讓平臺信息具有完整性、一體化的瀏覽效果,表達對象的選取一般可分為3 級.

以南寧市的數字城市展示為例,表達對象的選取如表1所示.全球單元選取可體現南寧市在全國乃至全球范圍的區位特征專題“一帶一路”或“西部陸海新通道”為表達對象,進而細化為線路、節點城市等3 級表達對象.地形地貌單元選取建設區域的仿真三維地形,疊加河流水系等地理信息要素,體現南寧市的自然生態.現代都市單元以自然下墊面為基地,保留交通水系等要素,與上一層級場景保持延續性,并以城區建筑的盒子模型作為大場景的定調,輔以白天、黑夜兩種模式加以渲染.白天,選取空氣質量熱力圖專題,結合藍天、綠水、青山,體現 “綠城”南寧的城市意象;黑夜,勾勒都市商圈,選取地鐵線路和5G 站點、新能源充電樁分布等新基建專題,凸顯夜經濟下的城市活力.城市新區單元,選取南寧市五象新區為表達對象,以傾斜攝影測量的三維建模和無人機全景航拍數據來進行展現,廣角全景熱點以動態無人機飛行路線進行串聯.科技園區單元的表達對象選取位于五象新區的地理信息小鎮,體現小鎮的數字樓宇管理,外部全視角展示建筑整體狀況,在展示內部結構時,對墻體進行透明化處理,烘托空間立體感.針對大屏模式,表達對象的選取應考慮拓展地理信息元素的多元化設計和表達[5],滿足視覺及認知上的雙重需求.

表1 表達對象選取

2 頁面布局

頁面布局的設計以大屏尺寸及長寬比為基礎,長寬比大于4:3的大屏采用左-中-右的布局方式更為協調、直觀,同時能充分利用空間.中部為主要信息展示區域,左、右為次要信息展示區域.如圖3所示,基于三維GIS的大屏可視化策略中,無邊際二三維地圖場景為主要視覺傳達區,用于展示地理信息、熱力圖、視頻流、全景圖像等.而不隨區域切換、全局性、常駐顯示的信息,和可輪播、與響應區域切換、顯示局部的詳細統計圖表信息置于左右兩側.在中部地圖的全局導覽下,左下角可設置與主地圖聯動的導航小地圖,幫助用戶定位,使瀏覽路徑、方位更清晰可辨.菜單欄與控制臺分別位于屏幕上下方.

圖3 頁面布局

3 風格設計

確保界面設計與風格語言相統一,利用色彩象征和聯想引發主題意向與記憶,或簡潔、清晰,或科技、權威.

南寧市為聯合國宜居城市和東盟博覽會永久舉辦地,根據展示城市性質,將白天場景基調定義為綠水青山的淡雅山水風,夜晚則定義為體現年輕都市的暗黑科技風.

3.1 色彩設計

大屏通常整體面積大,亮度高,為避免視覺疲勞,讓畫面保持平穩,主題色、背景色選用低飽和度,低亮度的暗色系,不喧賓奪主,視覺感受靠后;專題色,點綴色選用亮色系,以突出重點,視覺感受靠前.南寧市綜合展示平臺的色彩設計體系如表2所示.

表2 色彩體系

主題色、背景色,體現整體風格;基調色,用于色彩控制片區;輔調色,多為色彩控制帶;點綴色,體現色彩景觀節點.根據不同場景進行差異化色彩系列組織,白日場景,根據地域色彩文化內涵,選取莫蘭迪色系,體現自然風光的柔美.黑夜場景設計為光線對比、明度比、純度比都較高的色系,從暗色主體、背景環境中跳脫出屏幕,實現不同視覺層次色彩相互作用、協同.

3.2 符號系統

采用藝術符號與三維場景渲染相結合的表達方式.符號系統如表3所示.符號類型可分為點狀符號、線狀符號和面狀符號3 類,其中點狀符號屬性包括形狀、尺寸、色彩,線狀符號屬性包括形狀、尺寸、色彩,面狀符號屬性包括色彩、紋理.符號又可分為抽象型、半具象型、具象型3 種.因三維主場景已具備空間感,在符號系統設計上,不采用具象型符號,僅通過形狀、色彩、結構體現意向性,通過抽象型、半具象型符號分類,區分符號所代表要素的重要程度和不同的視覺層次.

表3 符號系統

3.3 可視化圖表

在可視化設計中,信息圖表的選擇對于信息傳達的效率與準確性起著至關重要的作用.信息圖表作為一個可讀、可視化的復合體系,由文字、數字和圖像組成,從表現形式上包括:圖解、圖表、表格、名單、地圖、圖形6 類[7].統計圖表體系如圖4所示.

圖4 統計圖表

圖表應具備以下要素:高吸引度與視覺亮點、可讀性與條理性共存、視覺導向與秩序、象征圖釋,要以受眾廣為前提[8].因三維GIS 展示平臺的數據具有多源化特征,二維與三維相輝映,統計圖表整體以簡約整潔為主,并輔以增強效果來修飾重點數據,以期達到視覺統一又突出重點,既能呈現數據源特性,又符合科技感風格.依據平臺展示場景粒度,可視化圖表體系也呈總-分式思路,同一圖表形式根據統計指標的不同作相應變換,如可通過交互點擊三維地圖查看廣西、南寧至地市、縣域的統計數值.圖表整體采用扁平化設計,根據統計指標,包含柱狀圖、折線圖、餅狀圖、異形圖和統計面板5 類,并采用輪播效果,實現輕量化設計.

3.4 動效設計

為配合科技感的平臺可視化定位,采用光影散射設計及靈動跳躍的科技元素,為整體呈現注入活力,助力交互體驗.地球以自旋轉開場,核心場景以3D 鏡頭運動(鼠標滾輪控制)展現,普通場景以靜態烘托為主,避免對主場景的干擾,增加體驗舒適感,讓用戶認知過程更為自然,也可體現地理元素之間的層級與空間關系.同時,統計圖表賦予數據自動生長動畫,增加數據表達的生動性.城市本身的生命力通過跳動的點位、交通流線和商圈由中心點外擴的光效體現.大屏整體底色為深色,具有方向性的線路流光動效來回穿行,線路的粗細反應車流量的多少,使畫面更具活力,烘托“智慧城市”的氛圍感.在智慧樓宇的呈現上,除了外部建筑大場景的交互,還把整個樓層以抽屜推進拉出的動效進行展示,使用戶能以全局獨立視角對樓宇內部的樓層布局、信息和局部細節進行把控.

4 成果實現

4.1 系統架構

GIS 平臺與普通展示系統最大的不同在于其具有空間信息可量測性,具備真實世界的坐標體系.因此,本研究中平臺三維引擎不選用常規可視化效果良好的游戲引擎,而以開源Cesium 框架為基礎進行二次開發,在保留GIS 平臺的特性前提下滿足大屏可視化炫酷特征.平臺三維引擎包括核心層、渲染器層、場景層和動態場景層4 個部分.結合三維GIS的展示需求,通過GIS 渲染引擎和服務器構建即拿即用的地圖服務與GIS 工具服務.Web 界面應用層主要以JavaScript/Flex技術開發,采用OGC 標準服務,無縫集成各種在線空間處理和位置服務,構建Web 服務器上的應用層和服務層,系統架構如圖5所示.提供包括場景節點管理、視域判斷、場景裁剪、遮擋剔除、多細節層次控制、基于粒子系統的特效模擬、文字控制、陰影控制、反射控制、渲染控制、多線程渲染加速、消息響應等多種服務.

圖5 系統架構

4.2 關鍵技術

4.2.1 多維時空數據自適應可視化

地理信息數據具有范圍廣、數據量大、數據結構各異等特點.針對海量多源異構數據,采用基于數據內容的方法進行管理,按DEM、DOM、模型、屬性、矢量等數據類型進行分類組織,針對局部高分辨率區域的典型應用專題,按照工程進行獨立組織,提供各類關聯數據的組合模型,將耦合度高的數據內容緊密結合,以提高應用的效率.南寧市三維綜合展示平臺用到的數據包括GF-2 影像、SRTM的30 m 分辨率約175 km2數字高程模型數據、南寧市五象新區范圍精度為0.03 m的傾斜攝影數據、3DMax 精細化建模數據、下墊面、盒子模型等自動化建模數據及行政邊界、流域范圍等矢量數據.平臺支持多類型海量數據的集成處理,自適應可視化流程如圖6所示.通過對影像、數字高程模型進行切片,將傾斜攝影測量數據轉換為三維引擎可識別的3DTiles 格式,將精細化模型轉換為.gltf 格式,矢量數據轉換為輕量級數據傳輸格式GeoJSON,快速構建地理空間數據到 Web 端的數據轉換模型[9],使海量數據以統一標準和參考基準匯總至三維引擎,實現一張圖疊加.再通過三維引擎渲染生成場景,并實現自適應的場景動態調度、二三維場景同步聯動等可視化效果.

圖6 多維時空數據自適應可視化流程

4.2.2 地形金字塔構建

在大場景三維地形渲染時,常存在卡頓、不流暢的現象.通過對地形數據文件金字塔的快速構建算法,可有效利用計算機的性能.金字塔構建原理如圖7所示[10].首先建立整個地形范圍的虛擬DEM/DOM 對象,統計影像的基礎信息,對于多通道或單通道影像,均可計算其影像拉伸的閾值,然后在四叉樹約束下,計算該范圍內所需建庫層級的瓦片隊列,最后依據計算機的配置信息,建立并行瓦片計算隊列.

圖7 金字塔構建原理

底部層級為高分辨率影像,頂部為低分辨率影像,上一層瓦片由下一層重采樣獲得,切割過后的高程瓦片數據格式如圖8所示[11].本方法有效利用了虛擬DEM/DOM 對象快速獲取渲染三維地形的能力,又利用了計算機多核多CPU的特點,在保證可靠性的同時也提升了處理效率,實現三維地形的毫秒級渲染加載.

圖8 高程瓦片數據結構

5 應用案例

將上述三維GIS 大屏可視化設計策略與實施技術路線應用于綜合展示平臺中.案例是基于開源三維引擎的B/S 系統,運行于Chrome 瀏覽器.由三維場景管理、基礎工具、三維特效3 大部分組成.其中,三維場景管理模塊提供三維基礎的圖層管理、站點圖層管理及場景漫游控制;基礎工具模塊提供坐標拾取、模型切片、格式轉換等空間分析工具;三維特效模塊提供三維場景中的天氣特效模擬仿真,包括晴天特效、雨天特效、雪天特效等功能.平臺數據庫管理系統采用MySQL,應用服務器為Tomcat.以南寧市的數字化、智慧化展示為主題,實現了多源異構數據集成,多尺度場景的無縫銜接,融合了傳統地理信息系統和數據可視化大屏展示系統兩者的優勢.成果效果如圖9-圖11.

圖9 地形地貌場景

圖10 現代都市白日場景

圖11 現代都市夜景場景

6 結語與展望

本文提出了基于三維GIS的大屏可視化全流程設計策略理論框架.與常見三維GIS 平臺和大屏展示系統相比,本研究的創新點在于顧及三維GIS 平臺的特征和大屏展示的特性,設計方案具有一定的通用性和代表性.平臺研發技術路線從保留GIS 空間信息化屬性入手,解決了海量多源異構數據自適應可視化的問題,和傳統大場景三維地形加載卡頓的問題,具有可行性和可復制性.系統分析了以大屏展示為媒介的三維地理信息平臺表達需求,總結了各環節的設計要點和研發難點,可為同類型可視化平臺構建提供參考和技術支持,研究成果亦可服務于智慧城市、自然資源管理、應急調度等領域.然而,仍存在以下不足:所提出的可視化策略及實現未涵蓋平臺運行性能和響應速度等方面的考量;未對多應用場景下的三維GIS 大屏可視化方案進行細化研究和對比.針對這些問題,筆者將開展后續研究工作.