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

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

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

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

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

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

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

SVG；橫斷面；交互可視化

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

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

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

一、SVG簡介與原理

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

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

二、SVG實現橫斷面可視化過程

1.體系結構

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

圖1　SVG繪圖體系結構

2.斷面數據處理

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

（1）坐標轉換

①ViewBOX坐標與視口坐標轉換

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

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

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

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

②ViewBOX坐標與經緯度坐標轉換

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

圖2　SVG坐標和經緯度坐標

坐標轉換公式如下

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

（2）橫斷面數據處理

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

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

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

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

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

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

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

3.斷面可視化

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

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

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

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

4.SVG實現斷面交互

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

（1）實現縮放功能

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

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

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

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

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

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

（2）實現標注功能

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

①設置提示框

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

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

var xc=evt.clientX；

var yc=evt.clientY；

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

var rectObj=inforect；

var txtObj=infotxt；

∥根據鼠標位置設置矩形框與文本位置；

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

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

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

var txtlen=txtObj.getComputedTextLength（）+10；

tectObj.setAttribute（"width"，txtlen）；

②數據標注

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

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

txtObj.getFirstChild（）.setData（info）；

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

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

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

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

三、應用實例

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

圖3　ID4835橫斷面的xml數據

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

圖4　ID4835的橫斷面

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

圖5　ID4835的交互橫斷面

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

圖6　ID12357的交互橫斷面

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

四、結束語

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

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

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

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

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

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

［5］ 王喚良，朱建軍.基于DOM與SVG的WebGIS地圖操作原理與實現［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］ 徐婧，張天宮，車曉東.基于SVG的WebGIS的設計與實現［J］.現代電子技術，2013，36（17）:137-139.

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

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

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

Interactive Visualization Research on Cross Section of Highway Based on SVG

LI Wei，FAN 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.