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

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

（中國地質大學（武漢），湖北武漢430074）

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

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

（中國地質大學（武漢），湖北武漢430074）

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

SVG；橫斷面；交互可視化

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

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

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

一、SVG簡介與原理

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

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

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

1.體系結構

基于SVG的橫斷面可視化體系結構分為3層，如圖1所示。

圖1　SVG繪圖體系結構

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

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

（1）坐標轉換

①ViewBOX坐標與視口坐標轉換

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

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

則ViewBOX內某點的坐標（xv，yv）與對應視口坐標（xs，ys）的關系如下

式中，x0和y0代表ViewBOX的起始坐標。

②ViewBOX坐標與經(jīng)緯度坐標轉換

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

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

坐標轉換公式如下

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

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

根據(jù)繪制的不同結構，采用不同的標簽與橫斷面數(shù)據(jù)組合。

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

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

地面線數(shù)據(jù)存儲形式為觀測點相對于上一觀測點之間的平距Δx、觀測點相對于上一觀測點之間的高差Δy。

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

路面數(shù)據(jù)的存儲形式為路面尺寸參數(shù)和路面結構參數(shù)。采用SVG的polygon標簽，繪圖數(shù)據(jù)為路面尺寸值、結構厚度值和坡度值，按繪圖要求計算得到的坐標對。

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

3.斷面可視化

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

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

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

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

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

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

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

1）計算當前 ViewBOX的中心點，即用View-BOX的左上角坐標（xvb/yvb），加上ViewBOX的當前寬度（Wvb）或高度（Hvb）的一半，可以得到中心點的坐標（xc，yc）

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

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

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

4）計算新的ViewBOX的左上角坐標（x，y）

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

（2）實現(xiàn)標注功能

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

①設置提示框

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

∥鼠標移動時，獲得鼠標當前的位置信息；

var xc=evt.clientX；

var yc=evt.clientY；

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

var rectObj=inforect；

var txtObj=infotxt；

∥根據(jù)鼠標位置設置矩形框與文本位置；

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

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

∥計算文本元素的文本長度，重新設置矩形框的寬度。

var txtlen=txtObj.getComputedTextLength（）+10；

tectObj.setAttribute（"width"，txtlen）；

②數(shù)據(jù)標注

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

∥設置文本對象的文本內容；

txtObj.getFirstChild（）.setData（info）；

∥鼠標移入調用提示框，添加信息；

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

∥遍歷標注中的所有〈text〉元素；

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

三、應用實例

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

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

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

圖4　ID4835的橫斷面

圖5是該斷面的交互顯示，包括圖像的縮放、路基結構信息交互顯示，以及標注響應放大查看等功能。

圖5　ID4835的交互橫斷面

ID12357是高架橋，高架橋的結構用polygon繪制，數(shù)據(jù)形式是按高架結構尺寸進行運算得到的坐標串。橫斷面如圖6所示。

圖6　ID12357的交互橫斷面

輸入某樁號時，就會調用相應數(shù)據(jù)，根據(jù)程序繪制出該樁號處的橫斷面圖。

四、結束語

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

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

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

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

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

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

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

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

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

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

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

［10］ 李青岳，陳永奇.工程測量學［M］.北京:測繪出版社，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—），女，碩士，研究方向為空間信息應用工程。E-mail:liwei55256@163.com

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