李　維，樊文有，柳恒建，戴　龍

（中國地質(zhì)大學(xué)（武漢），湖北武漢430074）

基于SVG的高速公路橫斷面交互式可視化研究

李維，樊文有，柳恒建，戴龍

（中國地質(zhì)大學(xué)（武漢），湖北武漢430074）

高速公路建成后，養(yǎng)護(hù)、管理或改建時(shí)快速查看橫斷面結(jié)構(gòu)、構(gòu)造物等信息是十分重要的。本文以伊遼高速為例，通過數(shù)據(jù)提取、處理，實(shí)時(shí)生成高速公路橫斷面數(shù)據(jù)；并通過數(shù)據(jù)解析，使橫斷面數(shù)據(jù)成為SVG繪圖的數(shù)據(jù)源，進(jìn)而實(shí)現(xiàn)了Web下交互式橫斷面的繪制，從而直觀地展現(xiàn)了道路、路基、道路附屬設(shè)施、道路構(gòu)造物等信息，便于高速公路管理和養(yǎng)護(hù)決策。

SVG；橫斷面；交互可視化

高速公路的橫斷面是垂直于公路中心線方向的斷面［1］。它反映了施工區(qū)域的地形起伏狀況、施工設(shè)計(jì)信息和路面結(jié)構(gòu)屬性信息等。通常管理者在查看橫斷面信息圖時(shí)，要根據(jù)查看的樁號(hào)，在大量的紙質(zhì)圖幅中尋找相應(yīng)的圖紙，費(fèi)時(shí)又費(fèi)力。因此，需要找到一種方法以便在Web上快速查看橫斷面圖形信息。

對(duì)橫斷面圖的可視化，范東明［2］利用AutoLisp語言實(shí)現(xiàn)了對(duì)AutoCAD的二次開發(fā)；徐亞楠［3］運(yùn)用GPS-RTK技術(shù)，實(shí)現(xiàn)了內(nèi)外業(yè)一體化操作繪圖；楊宏志等［4］基于DOM集成框架，將路線CAD系統(tǒng)與GIS集成。但利用以上方法所得到的橫斷面圖均不適合在Web上應(yīng)用。

本文采用SVG來實(shí)現(xiàn)高速公路交互式橫斷面的繪制。這樣繪制的橫斷面是矢量的，不僅具有縮放不失真的效果，而且具有交互顯示信息的功能。這在網(wǎng)絡(luò)應(yīng)用高度發(fā)達(dá)的今天，已成為必然的趨勢(shì)。

一、SVG簡介與原理

可縮放矢量圖形（SVG）是面向網(wǎng)絡(luò)應(yīng)用的可視化工具［5］，用XML語言描述，以保留的模式［6］生成高質(zhì)量的矢量圖，其文檔占用空間小，在Web上顯示速度快［7］，交互性強(qiáng)，縮放不失真［8］。SVG可以是獨(dú)立的文件，可以在網(wǎng)頁中被引用，還可以嵌入到另一個(gè)SVG的文件中［9］。

SVG繪圖時(shí)利用各種圖形標(biāo)簽搭建文本，每一個(gè)圖形被記作一個(gè)對(duì)象，結(jié)合JS語言，為每一個(gè)元素增加事件處理器來實(shí)現(xiàn)圖形縮放和交互。

二、SVG實(shí)現(xiàn)橫斷面可視化過程

1.體系結(jié)構(gòu)

基于SVG的橫斷面可視化體系結(jié)構(gòu)分為3層，如圖1所示。

圖1　SVG繪圖體系結(jié)構(gòu)

2.斷面數(shù)據(jù)處理

橫斷面一般由原地面線、路基設(shè)計(jì)、模坡、路面結(jié)構(gòu)層、邊坡組成［10］。在數(shù)據(jù)庫的路基集、路面集和主要構(gòu)造物集中讀取相關(guān)尺寸信息。

（1）坐標(biāo)轉(zhuǎn)換

①ViewBOX坐標(biāo)與視口坐標(biāo)轉(zhuǎn)換

采用SVG的ViewBOX來實(shí)現(xiàn)圖形縮放，SVG的視口坐標(biāo)和ViewBOX坐標(biāo)的比例關(guān)系如下

式中，δ表示縮放系數(shù)；Ws和Hs表示視口的寬和高；Wv和Hv表示ViewBOX的寬和高。

則ViewBOX內(nèi)某點(diǎn)的坐標(biāo)（xv，yv）與對(duì)應(yīng)視口坐標(biāo)（xs，ys）的關(guān)系如下

式中，x0和y0代表ViewBOX的起始坐標(biāo)。

②ViewBOX坐標(biāo)與經(jīng)緯度坐標(biāo)轉(zhuǎn)換

經(jīng)緯度坐標(biāo)與ViewBOX坐標(biāo)的縱軸方向是相反的，如圖2所示。

圖2　SVG坐標(biāo)和經(jīng)緯度坐標(biāo)

坐標(biāo)轉(zhuǎn)換公式如下

式中，x和y表示橫斷面坐標(biāo)；xmin和ymax表示 View-BOX的x坐標(biāo)最小值和y坐標(biāo)最大值；exv和eyv表示橫斷面坐標(biāo)跨越ViewBOX像素?cái)?shù)。

（2）橫斷面數(shù)據(jù)處理

根據(jù)繪制的不同結(jié)構(gòu)，采用不同的標(biāo)簽與橫斷面數(shù)據(jù)組合。

設(shè)計(jì)線的數(shù)據(jù)存儲(chǔ)形式為路基每一要素的寬度Δx、該要素外邊緣與中樁設(shè)計(jì)高的高差Δy。

采用SVG的line標(biāo)簽繪制。繪圖數(shù)據(jù)計(jì)算見式（4）。設(shè)x0、y0是設(shè)計(jì)線中樁坐標(biāo)，x0值取0，y0值為設(shè)計(jì)線中樁設(shè)計(jì)標(biāo)高。

地面線數(shù)據(jù)存儲(chǔ)形式為觀測(cè)點(diǎn)相對(duì)于上一觀測(cè)點(diǎn)之間的平距Δx、觀測(cè)點(diǎn)相對(duì)于上一觀測(cè)點(diǎn)之間的高差Δy。

采用SVG的path相對(duì)距離繪制。繪圖數(shù)據(jù)計(jì)算見式（5）。設(shè) x0、y0為設(shè)計(jì)線中樁坐標(biāo)，x0值取0，y0值為地面線中樁標(biāo)高。

路面數(shù)據(jù)的存儲(chǔ)形式為路面尺寸參數(shù)和路面結(jié)構(gòu)參數(shù)。采用SVG的polygon標(biāo)簽，繪圖數(shù)據(jù)為路面尺寸值、結(jié)構(gòu)厚度值和坡度值，按繪圖要求計(jì)算得到的坐標(biāo)對(duì)。

橫斷面各要素?cái)?shù)據(jù)計(jì)算完成后，按照繪圖方案組合標(biāo)簽和數(shù)據(jù)。若采用path相對(duì)距離繪制左路基設(shè)計(jì)線，則選擇M和1組合，String zsjx="M"+ "x0"+""+y0+""+"1"+zzfdk+""+zzfdg+""+…，以此類推。意義是起點(diǎn)從（x0，y0）開始，下一點(diǎn)與上一點(diǎn)的相對(duì)距離值是（zzfdk，zzfdg）。zsjx為左設(shè)計(jì)線，zzfdk為左半幅中分帶寬度，zzfdg為左半幅中分帶外邊緣高差。

3.斷面可視化

用JavaScript+SMIL（同步多媒體集成語言）實(shí)現(xiàn)斷面可視化。

1）在前臺(tái)用JS解析數(shù)據(jù)處理得到字符串，使之成為SVG繪圖數(shù)據(jù)源。如左路基設(shè)計(jì)線繪制時(shí)的結(jié)構(gòu)為〈path d="Mxxlxx"/〉，則設(shè)置屬性hzsjx. setAttribute（′d′，zsjx）。

2）定義變量:var hzsjx=makeSVG（′path′，｛stroke:′red′，′stroke-width′:2，fill:′none′｝）；表示用path繪制邊框?qū)挒?px、紅色、無填充的路徑。

3）實(shí)現(xiàn)可視化:document.getElementById（′svgElement′）.appendChild（hzsjx）；通過 SVG的id，知道此標(biāo)簽繪在哪一個(gè)SVG里。

4.SVG實(shí)現(xiàn)斷面交互

交互是SVG實(shí)現(xiàn)橫斷面可視化的重要功能，只有交互的橫斷面才能滿足Web的需求。

（1）實(shí)現(xiàn)縮放功能

1）計(jì)算當(dāng)前 ViewBOX的中心點(diǎn)，即用View-BOX的左上角坐標(biāo)（xvb/yvb），加上ViewBOX的當(dāng)前寬度（Wvb）或高度（Hvb）的一半，可以得到中心點(diǎn)的坐標(biāo)（xc，yc）

2）設(shè)置ViewBOX最大與最小放大比例（maxS-ca/minSca），計(jì)算當(dāng)前縮放系數(shù)（scaFactor）。用函數(shù)zoomTo的參數(shù)"value"參與計(jì)算

scaFactor=value·（maxSca-minSca）/100+minSca

3）計(jì)算新的ViewBOX寬和高。值為SVG的寬和高與計(jì)算當(dāng)前縮放系數(shù)的比。

4）計(jì)算新的ViewBOX的左上角坐標(biāo)（x，y）

經(jīng)過上述過程后，使用函數(shù)setAttributeNS設(shè)置ViewBOX屬性新的4個(gè)參數(shù)值:HDM.SetAttributeNS（null，"viewBox"，x+""+y+""+W+""+H）；

（2）實(shí)現(xiàn)標(biāo)注功能

數(shù)據(jù)標(biāo)注方便更好地理解圖上的圖形含義，當(dāng)把鼠標(biāo)懸停在圖上某個(gè)要素時(shí)，就會(huì)出現(xiàn)一個(gè)信息提示框來顯示該要素的屬性信息。

①設(shè)置提示框

function showinfo（evt，info）｛/*顯示提示框*/｝

∥鼠標(biāo)移動(dòng)時(shí)，獲得鼠標(biāo)當(dāng)前的位置信息；

var xc=evt.clientX；

var yc=evt.clientY；

∥獲得矩形框與文本元素引用；

var rectObj=inforect；

var txtObj=infotxt；

∥根據(jù)鼠標(biāo)位置設(shè)置矩形框與文本位置；

var txtObj.getAttributeNS（null，"x"，xc+3）；

var txtObj.getAttributeNS（null，"y"，yc-5）；

∥計(jì)算文本元素的文本長度，重新設(shè)置矩形框的寬度。

var txtlen=txtObj.getComputedTextLength（）+10；

tectObj.setAttribute（"width"，txtlen）；

②數(shù)據(jù)標(biāo)注

向數(shù)據(jù)庫發(fā)送請(qǐng)求，成功獲得xml字符串，解析計(jì)算后，得到每一繪圖要素的名稱和數(shù)值，進(jìn)而實(shí)現(xiàn)數(shù)據(jù)的標(biāo)注功能。

∥設(shè)置文本對(duì)象的文本內(nèi)容；

txtObj.getFirstChild（）.setData（info）；

∥鼠標(biāo)移入調(diào)用提示框，添加信息；

onmousemove=′showinfotip（evt， ext""）′；

∥遍歷標(biāo)注中的所有〈text〉元素；

var nodes=HDM.getElementsByTagName（"text"）；

三、應(yīng)用實(shí)例

選取伊遼高速新家互通段的 ID4835和ID12357來驗(yàn)證本文方法的可行性。從數(shù)據(jù)庫中提取ID4835的xml數(shù)據(jù)如圖3所示，包含地面線、設(shè)計(jì)線、路基結(jié)構(gòu)、邊坡等數(shù)據(jù)信息。

圖3　ID4835橫斷面的xml數(shù)據(jù)

圖4是根據(jù)上述過程得到的ID4835處的橫斷面。

圖4　ID4835的橫斷面

圖5是該斷面的交互顯示，包括圖像的縮放、路基結(jié)構(gòu)信息交互顯示，以及標(biāo)注響應(yīng)放大查看等功能。

圖5　ID4835的交互橫斷面

ID12357是高架橋，高架橋的結(jié)構(gòu)用polygon繪制，數(shù)據(jù)形式是按高架結(jié)構(gòu)尺寸進(jìn)行運(yùn)算得到的坐標(biāo)串。橫斷面如圖6所示。

圖6　ID12357的交互橫斷面

輸入某樁號(hào)時(shí)，就會(huì)調(diào)用相應(yīng)數(shù)據(jù)，根據(jù)程序繪制出該樁號(hào)處的橫斷面圖。

四、結(jié)束語

根據(jù)路基、路面及構(gòu)造物的結(jié)構(gòu)信息，解析、計(jì)算繪圖數(shù)據(jù)源，再根據(jù)繪圖要素形式選擇合適的SVG標(biāo)簽，之后通過JavaScript+SMIL作出響應(yīng)，這樣就像有了模具一樣，可以機(jī)械地自動(dòng)生成橫斷面圖。

此外，SVG是為滿足飛速發(fā)展的Internet Web而研定的，該技術(shù)所具有的特點(diǎn)和優(yōu)點(diǎn)在交通地理信息系統(tǒng)中具有廣闊的應(yīng)用前景。

［1］ 趙永平.公路路線CAD程序設(shè)計(jì)［M］.哈爾濱:東北林業(yè)大學(xué)出版社，2003:26.

［2］ 范東明.道路橫斷面成圖及土石方計(jì)算軟件系統(tǒng)的關(guān)鍵技術(shù)［J］.測(cè)繪通報(bào)，2004（5）:47-48，66.

［3］ 徐亞楠.基于GPS-RTK技術(shù)的道路橫斷面測(cè)量方法研究［J］.測(cè)繪通報(bào)，2013（S1）:34-36.

［4］ 楊宏志，汪波，席曉波.路線CAD系統(tǒng)與GIS集成研究［C］∥中國公路學(xué)會(huì)2004年學(xué)術(shù)年會(huì)論文集.北京:人民交通出版社，2004:13-17.

［5］ 王喚良，朱建軍.基于DOM與SVG的WebGIS地圖操作原理與實(shí)現(xiàn)［J］.測(cè)繪學(xué)報(bào)，2006，31（4）:90-91.

［6］ 陸卡普斯.如何在SVG和Canvas之間進(jìn)行選擇［EB/ OL］.（2014-01-03）［2015-01-16］.Http:∥my.oschi na. net/lujian863/blog/189803.

［7］ 徐婧，張?zhí)鞂m，車曉東.基于SVG的WebGIS的設(shè)計(jì)與實(shí)現(xiàn)［J］.現(xiàn)代電子技術(shù)，2013，36（17）:137-139.

［8］ 汪正江，曲家文.使用Raphael庫動(dòng)態(tài)操作SVG［J］.軟件，2014，35（3）:45-47.

［9］ 黃凱偉.SVG開發(fā)實(shí)踐［M］.北京:電子工業(yè)出版社，2008:2-3.

［10］ 李青岳，陳永奇.工程測(cè)量學(xué)［M］.北京:測(cè)繪出版社，2007:48.

Interactive Visualization Research on Cross Section of Highway Based on SVG

LI Wei，F(xiàn)AN Wenyou，LIU Hengjian，DAI Long

10.13474/j.cnki.11-2246.2016.0236.

P208

B

0494-0911（2016）07-0110-04

2015-06-26

李 維（1989—），女，碩士，研究方向?yàn)榭臻g信息應(yīng)用工程。E-mail:liwei55256@163.com

引文格式：李維，樊文有，柳恒建，等.基于SVG的高速公路橫斷面交互式可視化研究［J］.測(cè)繪通報(bào)，2016（7）:110-113.