羅琪斯

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

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

1 表達(dá)指標(biāo)

在基于三維GIS的可視化平臺中,二三維電子地圖是信息傳遞的主要區(qū)域,類比傳統(tǒng)地圖設(shè)計的流程,包括地理場景配置及地圖要素選取,根據(jù)展示內(nèi)容及業(yè)務(wù)需求提取關(guān)鍵指標(biāo),抽象為平臺場景及具體的表達(dá)對象.

1.1 空間信息場景設(shè)計

利用二三維地圖及空間信息的視覺關(guān)系架構(gòu),根據(jù)認(rèn)知規(guī)律,將展示場景設(shè)計為隨著空間尺度變化的5 個層次.宏觀尺度主要把控整體展示風(fēng)貌,中觀尺度強(qiáng)化意向空間,微觀尺度細(xì)化景觀場景[6],進(jìn)而形成地球單位、地形地貌單元、現(xiàn)代都市單元、城市新區(qū)單元、信息小鎮(zhèn)單元5 個展示場景,如圖1所示.實現(xiàn)物理世界在數(shù)字世界的映射,突破時空限制,多維度展現(xiàn).

圖1 空間信息場景架構(gòu)

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

圖2 場景效果設(shè)計

1.2 表達(dá)對象選取

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

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

表1 表達(dá)對象選取

2 頁面布局

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

圖3 頁面布局

3 風(fēng)格設(shè)計

確保界面設(shè)計與風(fēng)格語言相統(tǒng)一,利用色彩象征和聯(lián)想引發(fā)主題意向與記憶,或簡潔、清晰,或科技、權(quán)威.

南寧市為聯(lián)合國宜居城市和東盟博覽會永久舉辦地,根據(jù)展示城市性質(zhì),將白天場景基調(diào)定義為綠水青山的淡雅山水風(fēng),夜晚則定義為體現(xiàn)年輕都市的暗黑科技風(fēng).

3.1 色彩設(shè)計

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

表2 色彩體系

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

3.2 符號系統(tǒng)

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

表3 符號系統(tǒng)

3.3 可視化圖表

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

圖4 統(tǒng)計圖表

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

3.4 動效設(shè)計

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

4 成果實現(xiàn)

4.1 系統(tǒng)架構(gòu)

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

圖5 系統(tǒng)架構(gòu)

4.2 關(guān)鍵技術(shù)

4.2.1 多維時空數(shù)據(jù)自適應(yīng)可視化

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

圖6 多維時空數(shù)據(jù)自適應(yīng)可視化流程

4.2.2 地形金字塔構(gòu)建

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

圖7 金字塔構(gòu)建原理

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

圖8 高程瓦片數(shù)據(jù)結(jié)構(gòu)

5 應(yīng)用案例

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

圖9 地形地貌場景

圖10 現(xiàn)代都市白日場景

圖11 現(xiàn)代都市夜景場景

6 結(jié)語與展望

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