[發(fā)明專利]基于SVG地圖數(shù)據(jù)的三維可視化實(shí)現(xiàn)方法

在審

• 申請?zhí)枺?/td>: 201811480301.3
• 申請日: 2018-12-05
• 公開（公告）號: CN109712236A
• 公開（公告）日: 2019-05-03
• 發(fā)明（設(shè)計(jì)）人: 蘇貴民;王夢龍;王國春;李玉展;王天瑞
• 申請（專利權(quán)）人: 上海電科智能系統(tǒng)股份有限公司
• 主分類號: G06T17/05
• 分類號: G06T17/05;G06T15/00;G06T3/00
• 代理公司: 上海申匯專利代理有限公司 31001
• 代理人: 翁若瑩;柏子雵

本發(fā)明涉及一種基于SVG地圖數(shù)據(jù)的三維可視化實(shí)現(xiàn)方法，其特征在于，包括以下步驟：繪制SVG標(biāo)準(zhǔn)地圖；解析各圖層群組，解析SVG基本圖形元素；利用WebGL三維引擎構(gòu)建三維場景，添加地圖模型，添加對應(yīng)圖標(biāo)。本發(fā)明的技術(shù)方案通過以給定SVG地圖數(shù)據(jù)結(jié)構(gòu)的SVG地圖作為底層數(shù)據(jù)，對SVG各層元素進(jìn)行解析得到地理信息，通過三維引擎建模，最終實(shí)現(xiàn)SVG地圖數(shù)據(jù)的三維可視化效果。繪制SVG矢量地圖的成本較低，且地圖精確度遠(yuǎn)遠(yuǎn)大于普通位圖。把SVG地圖作為三維地圖的底層數(shù)據(jù)構(gòu)建三維地圖，能夠大大縮減開發(fā)周期，以及降低維護(hù)成本，更多維度，更具象化、多方面的表現(xiàn)地理信息。

技術(shù)領(lǐng)域

本發(fā)明涉及一種基于SVG地圖數(shù)據(jù)的三維建模以及可視化展示技術(shù)，屬于三維圖形技術(shù)領(lǐng)域。

背景技術(shù)

SVG(Scaleable Vector Graphics，可縮放矢量圖形)是一種使用XML(ExtensibleMarkup Language，可擴(kuò)展標(biāo)記語言)來描述二維圖形和繪圖程序的一種語言。SVG圖形存儲容量小，對網(wǎng)絡(luò)的輸入負(fù)載小，網(wǎng)絡(luò)傳輸延時(shí)小，支持交互和動畫，而且圖像的放大、縮小操作不會使圖像失真。SVG本身的諸多優(yōu)點(diǎn)，十分適合作為輕量級應(yīng)用的Web二維地圖的載體。

隨著WebGIS技術(shù)的飛速發(fā)展，具有立體性、方位性、直觀性和真實(shí)性特點(diǎn)的網(wǎng)絡(luò)三維地圖也開始進(jìn)入了公眾的視野。但由于目前三維地圖主要依賴于實(shí)景拍照建模或基于專業(yè)軟件建模，學(xué)習(xí)成本高，過程繁瑣，耗時(shí)較長，難以大面積推廣。

發(fā)明內(nèi)容

本發(fā)明的目的是：把常見的二維地圖方案SVG地圖和WebGL結(jié)合得到三維地圖。

為了達(dá)到上述目的，本發(fā)明的技術(shù)方案是提供了一種基于SVG地圖數(shù)據(jù)的三維可視化實(shí)現(xiàn)方法，其特征在于，包括以下步驟：

步驟1、繪制SVG標(biāo)準(zhǔn)地圖；

步驟2、通過AJAX加載SVG標(biāo)準(zhǔn)地圖文件，解析各圖層群組，解析SVG基本圖形元素，統(tǒng)一把SVG所有基礎(chǔ)圖形轉(zhuǎn)換為靈活度較高、包容性更好的路徑來表達(dá)，讀取地圖元素基本信息；

步驟3、基于步驟2得到的路徑及地圖元素基本信息利用WebGL三維引擎構(gòu)建三維場景，添加地圖模型，添加對應(yīng)圖標(biāo)。

優(yōu)選地，步驟1中，繪制SVG標(biāo)準(zhǔn)地圖時(shí)，根據(jù)SVG地圖數(shù)據(jù)結(jié)構(gòu)在AdobeIllusrator應(yīng)用中制作出SVG格式的文件，編輯地圖對象屬性，得到SVG標(biāo)準(zhǔn)地圖。

優(yōu)選地，所述SVG地圖數(shù)據(jù)結(jié)構(gòu)包括SVG地圖樓層節(jié)點(diǎn)、區(qū)域節(jié)點(diǎn)和房間節(jié)點(diǎn)，SVG地圖樓層節(jié)點(diǎn)為區(qū)域節(jié)點(diǎn)和房間節(jié)點(diǎn)的父節(jié)點(diǎn)，其中房間節(jié)點(diǎn)包含了地圖對象的地理信息和基本信息。

優(yōu)選地，步驟3中，所述WebGL三維引擎為Three.js。

優(yōu)選地，步驟3中，構(gòu)建三維場景包括：添加場景、相機(jī)、渲染器、光源，添加區(qū)域模型得到地面層，添加房間元素得到房間層，根據(jù)不同類型元素加上對應(yīng)圖標(biāo)說明。

本發(fā)明的技術(shù)方案通過以給定SVG地圖數(shù)據(jù)結(jié)構(gòu)的SVG地圖作為底層數(shù)據(jù)，對SVG各層元素進(jìn)行解析得到地理信息，通過三維引擎建模，最終實(shí)現(xiàn)SVG地圖數(shù)據(jù)的三維可視化效果。由于SVG開放的標(biāo)準(zhǔn)以及多工具的支持，繪制SVG矢量地圖的成本較低，且地圖精確度遠(yuǎn)遠(yuǎn)大于普通位圖。把SVG地圖作為三維地圖的底層數(shù)據(jù)構(gòu)建三維地圖，能夠大大縮減開發(fā)周期，以及降低維護(hù)成本，更多維度，更具象化、多方面的表現(xiàn)地理信息。

附圖說明

圖1為本發(fā)明提供的實(shí)施例中的SVG地圖數(shù)據(jù)三維可視化流程。

具體實(shí)施方式