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

羅琪斯

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

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

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

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

1.1 空間信息場(chǎng)景設(shè)計(jì)

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

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

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

圖2 場(chǎng)景效果設(shè)計(jì)

1.2 表達(dá)對(duì)象選取

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

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

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

2 頁面布局

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

圖3 頁面布局

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

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

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

3.1 色彩設(shè)計(jì)

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

表2 色彩體系

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

3.2 符號(hào)系統(tǒng)

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

表3 符號(hào)系統(tǒng)

3.3 可視化圖表

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

圖4 統(tǒng)計(jì)圖表

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

3.4 動(dòng)效設(shè)計(jì)

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

4 成果實(shí)現(xiàn)

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

GIS 平臺(tái)與普通展示系統(tǒng)最大的不同在于其具有空間信息可量測(cè)性,具備真實(shí)世界的坐標(biāo)體系.因此,本研究中平臺(tái)三維引擎不選用常規(guī)可視化效果良好的游戲引擎,而以開源Cesium 框架為基礎(chǔ)進(jìn)行二次開發(fā),在保留GIS 平臺(tái)的特性前提下滿足大屏可視化炫酷特征.平臺(tái)三維引擎包括核心層、渲染器層、場(chǎng)景層和動(dòng)態(tài)場(chǎng)景層4 個(gè)部分.結(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所示.提供包括場(chǎng)景節(jié)點(diǎn)管理、視域判斷、場(chǎng)景裁剪、遮擋剔除、多細(xì)節(jié)層次控制、基于粒子系統(tǒng)的特效模擬、文字控制、陰影控制、反射控制、渲染控制、多線程渲染加速、消息響應(yīng)等多種服務(wù).

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

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

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

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

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

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

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

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

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

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

5 應(yīng)用案例

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

圖9 地形地貌場(chǎng)景

圖10 現(xiàn)代都市白日?qǐng)鼍?/p>

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

6 結(jié)語與展望

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