基于Html5的Web Map矢量渲染技術研究

丁立國，周 斌，熊 偉

(1．信息工程大學，河南 鄭州 450000; 2．68029部隊，甘肅 蘭州 730000)

基于Html5的Web Map矢量渲染技術研究

丁立國1，周 斌2，熊 偉1

(1．信息工程大學，河南 鄭州 450000; 2．68029部隊，甘肅 蘭州 730000)

當下主流平臺(即桌面PC，Android,IOS等)上Web瀏覽器都支持Html5標準。Html5的到來讓Web應用的性能和易用性明顯提升，其中Canvas元素是Html5標準中新增的技術之一，被JavaScript用來進行圖形圖像的繪制和矢量渲染。針對傳統切片式Web Map存在的不足，文中以Web地圖矢量渲染為研究切入點，分析一種基于JSON的地理信息數據傳輸格式，并使用Html5 Canvas構建矢量Web Map，即在瀏覽器中地理數據矢量渲染的設計和實現，兼具自定義渲染風格而無需重新請求加載圖層，減少瓦片請求所需的帶寬，改善Web Map實時顯示的性能，探索進一步直接實現Web Map空間分析能力的可行性。

Html5 Canvas；Web Map；矢量數據渲染

隨著互聯大數據的快速發展，地圖服務與應用愈發普遍。在線地圖服務不僅成為實時交互、動態環境中的一種重要工具，而且地圖也開始成為人們研究地理空間數據及與其相聯接的應用平臺數據的橋梁，如軌跡服務、出行服務，商業地理分析等。Web環境下地圖數據通常以兩種形式呈現：柵格形式和矢量形式。傳統Web頁面不能直接支持矢量圖形渲染，只有通過安裝第三方插件來完成客戶端矢量數據的可視化與操作，在網絡上傳遞地圖數據的方式通常是以瓦片形式的柵格圖像格式(PNG或JPEG圖像)繪制的傳統方法[1]，矢量數據在后臺服務器上渲染成分級的瓦片圖像，當用戶進行Web請求時將這些圖像數據提供給終端訪問瀏覽。這項技術已被眾多Web地圖應用服務所使用，它可以通過預設渲染樣式創建固化的底圖，如百度地圖、天地圖、高德、OpenStreetMap、谷歌地圖等。

現在智能硬件設備與網絡高速發展，推動了Web新技術的普及應用，越來越多的桌面應用轉到Web平臺或者移動APP，其中移動APP大都也采用了基于Web服務模式開發的，屬于Hybrid App(混動)類型。新一代的Html5標準已正式定稿，Html5為Web應用增加Canvas API、WebSocket和本地數據存儲等各種新的特性，其中全新的Canvas API繪圖方法就是為Web瀏覽器端矢量圖形繪制而設計的，利用該API可以實現無插件的矢量數據繪制與渲染[2]。將Html5技術運用到在線地圖(Web Map)服務，將為實現地圖數據的矢量渲染提供了技術基礎，WebSocket技術能解決Http協議下圖形數據信息的網絡傳輸瓶頸，這些Web新技術將會使在線地圖服務與應用在性能和功能方面獲得極大地改善，其跨平臺優勢將在移動互聯網時代得到進一步顯現。

1 Html5新特性Canvas簡介

作為Html的新一代技術標準，Html5引入了一套全新的元素和屬性，其中Canvas元素是專門為在繪制矢量圖形而設置的繪圖元素，Canvas為瀏覽器提供了一個繪圖的API接口，JavaScript語言調用這個接口獲得瀏覽器的繪圖上下文環境(context)，將想要繪制的內容繪制到這塊畫布上顯示在瀏覽器中，可動態實時繪制點、線、面、文字和柵格圖像等內容，有部分瀏覽器甚至可支持3D繪制顯示[3]。就Web Map而言，Html5的新功能在于可以在瀏覽器中實時矢量繪圖，通過使用這種繪圖方式數據渲染在客戶端直接完成，而不需要在服務器上預加工，極大的減輕服務器的運算負擔；通過Html標簽屬性和幾十種內置事件響應，還支持定義JavaScript監聽函數實現多種復雜操作[4]，這種操作方式將瀏覽器在脫離第三方插件且不需要服務器端API的支持下實現桌面客戶端程序所有指令操作。

Canvas在Web頁面上進行的繪圖操作時，單獨的一個Canvas標記只是在頁面中定義了一塊矩形區域，并無特別之處，只有配合使用JavaScript腳本，才能夠完成各種圖形、線條、以及復雜的圖形變換操作。它的工作過程：首先創建一個指定大小的Canvas，并為其指定一個id，方便在JavaScript腳本中獲取該DOM實例對象。聲明一個Canvas節點的方式：。通過Canvas id獲得對應的DOM對象，該對象調用getContext()方法獲得渲染上下文。Canvas元素與渲染上下文一一對應，同一個Canvas id不管何時調用getContext()方法都只返回唯一的上下文對象。Canvas原生圖形繪制只支持一種圖形，就是矩形，至于所有其他的圖形繪制則都是通過繪制路徑的方法實現的，路徑是一系列的點連接組成的，這樣繪制的多條路徑就構成了各種圖形。如圖1所示為Canvas基本要素及多種圖形繪制方法。

圖1 Canvas基本要素及繪制方法

要使用Canvas繪制Web Map中的地理要素時，就要使用其提供的路徑繪制函數。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀點的集合，這個合集包含在一個路徑列表中。本質上，路徑是由很多子路徑構成，所有的子路徑(直線、圓弧或圓、貝塞爾曲線等)構成圖形。繪制路徑時使用beginPath()新建一條路徑，圖形繪制命令被指向到該路徑上，然后可以使用moveTo()、lineTo()繪制直線、arc()繪制圓弧或者圓、bezierCurveTo()等繪制曲線等等，完畢后調用closePath()結束圖形繪制,最后調用fill()、stroke()進行填充或者設置邊框等完成圖形屬性繪制。Canvas在圖形繪制方面是像素級管理，Canvas的路徑繪制方法能充分滿足矢量數據中的點要素、線要素、面要素以及符號的表達要求。

2 地理要素數據格式編碼

地理實體對象根據OGC的要素規范和一般性地理要素研究通常分為：點狀要素、線狀要素、面狀要素、標注要素[5]。矢量化地圖就是由這一系列的點線面對象構成的，因此在Web傳輸與客戶端解析矢量數據時，需要使用地理要素的數據模型或數據結構來描述這些點、線、面(多邊形)對象。這些對象由一系列有順序的坐標描述，這些對象具有地理要素屬性。在Web應用中，常用的數據傳輸格式有：二進制，文本，JSON，XML等。考慮數據格式規范性、地理要素編碼以及客戶端解析等因素，二進制、文本無法滿足數據表達以及規范性要求，不予以考慮。JSON與XML都是為Web應用開發提供的一種數據交換格式[6]，JSON與XML都可以編碼地理信息數據，兩者之間的差異是JSON數據能被客戶端腳本JavaScript操作直接解析成可識別的地理信息數據，不需要設計專門的解析方法進行解碼，而XML則需要針對編碼設計專門的解碼操作。因此，本文選擇JSON格式作為Html5 Canvas展現地理信息的數據格式。

JSON在地理數據表達方面有特定的子類格式為GeoJSON，GeoJSON是結合各種地理要素數據特點而設計的一種JSON編碼。它支持以下幾何類型：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon和GeometryCollection[7]。GeoJSON不僅具有JavaScript原生支持、表達地理數據語義完整等特點，而且可讀性高、可擴展性強，可以根據原有數據語義進行自定義要素。GeoJSON數據編碼格式中沒有對圖層進行描述，而在地圖設計中通常采用以圖層為單位的對不同的地理要素分層分類組織，因此在原有編碼格式的基礎上增加了圖層元素的描述，既便于對每一層地理要素繪制設計具有共性的繪圖方法，也便于數據渲染后對不同的要素層進行顯示控制。圖2展示了文中基于GeoJSON表達線狀地理要素的數據結構，圖中描述了包含邊界范圍、要素序號、所在圖層、連續的坐標值等多種屬性信息。

圖2 GeoJSON表達地理要素數據結構

3 Web Map矢量渲染方法

Canvas在客戶端地圖渲染是實時的，因此在顯示速度上明顯的優勢；展現地理數據可以分層顯示具有一定的靈活性；客戶端數據是原始矢量文件，基于數據分析互操作性高。客戶端實時繪圖的流程：從服務器獲取GeoJSON數據，客戶端對數據格式進行解析，將矢量實體的地理要素從GeoJSON解析為JavaScript對象，根據該對象中包含的數據信息，調用坐標轉換對象，將地理坐標轉換成Canvas顯示區域里的屏幕坐標，最后調用Canvas API以及設計的符號類庫函數實現地圖的繪制與顯示。

3.1 Canvas地理坐標轉換

坐標轉換原理，將要顯示的地理區域的中心點和瀏覽器中視圖中心點進行配對，繪圖時先計算地理要素坐標與地理中心點的偏移差值，將該差值換算到對應顯示比例尺的距離，根據該距離計算實際的屏幕坐標，最后將屏幕坐標交給Canvas進行繪制。據上所述得到地理坐標轉換到屏幕坐標公式：

ptWnd.x=View_center.x+(long)((ptGeo.x-geo_center.x)/scale);

ptWnd.y=View_center.y-(long)((ptGeo.y-geo_center.y)/scale );

上述公式中ptWnd代表屏幕坐標，View_center代表屏幕中心點坐標，ptGeo代表地理要素的坐標，geo_center是地理中心的坐標，scale是當前比例尺。當要顯示的地理范圍和窗口的比例不一致時，需要分別計算水平和垂直的比例尺，然后數值較大的作為比例尺，也就是說比例尺的調整向著地理區域更小的方向進行調整，讓地理區域和繪圖視口的比例一致。經過上述計算，可以將任意一點的地理數據編碼中的地理坐標轉換為視口的屏幕坐標，再調用下文所述的繪圖類庫函數進行繪制。

3.2 Canvas實現地圖繪制API設計

針對自定義的GeoJSON地理數據格式編碼結構設計了地圖繪制類庫，以實現對GeoJSON文件在瀏覽器端的快速繪制與顯示，核心設計包括兩部分，圖層、地圖類(mapLayer)與地理要素繪制類，圖3為Canvas實現地圖繪制類庫設計圖，其中圖層與地圖類(mapLayer)構造地圖顯示區域，是地圖渲染與繪制的基礎，主要功能：設置畫布尺寸與繪圖比例、圖層控制，調整控制地理要素疊置順序等。mapLayer類中實現多個繪制函數，如管理和控制圖層、坐標轉換、重繪視口刷新等，當對地圖進行了縮放、平移等操作時引起地圖需要重繪時，就調用圖層中繪制函數drawGraphic()將實體重新渲染在地圖顯示區域中。

地理要素繪制類設計根據地理要素進行分類設計，以適應不同的地理要素繪制方法，主要包括點狀實體類、線狀實體類、面狀實體類和標注實體類，采用面向對象設計方法。抽象實體類主要用于表示地理要素四類實體的公共屬性與方法，不能實例化但可以被實體類繼承。在抽象實體類設計時為每一個實體聲明了渲染樣式，用于地圖風格配置稱為MCSS文件，該樣式文件參照Html頁面的CSS文件結構以及定義方式，讀取該自定義的樣式用于初始化各個地理要素的配色風格。該樣式文件內定義：道路線型的顏色(RGB)、粗細(lineWidth)、透明度(opacity)，內部填充樣式(fillStyle)等。點狀實體類繪制對象為點狀要素，其繪制過程只需根據點狀符號的基本屬性信息將其變換為地圖顯示所需要的大小、方向和位置即可，調用Canvas函數進行繪制顯示。線狀實體類用來繪制具有方向性延伸的線狀地理要素，線狀要素的坐標是經過合理的抽象而得到的離散坐標點的合集。在地圖應用中通過使用不同線型來表達各種線狀要素，因此，在線狀實體類中增加數組(dashArray)，用于描述按照數組中定義的規律將要素繪制成不同的線形。各段線型繪制的連接部需要進行接頭處理，為保證整條線狀的光滑度接頭處采用的方法是，先算出接頭處兩個點的中點，然后將該中點分別與兩個連接點計算中點，將兩個中點分別與兩個連接點交叉連接，計算兩條線段的延長線的交點，將該交點作為控制點，使用Canvas貝塞爾曲線函數繪制曲線，這樣就實現了接頭處的光滑處理。線狀實體類的繪制函數drawLines()是主要實現是由Canvas路徑繪制函數組成，其他屬性以及繪制樣式都是繼承于抽象實體類。面狀實體類是繪制地理空間上占用一部分區域的實體。在Canvas中面狀實體和線狀實體的實現方法有部分相似，線狀要素類在線型繪制完畢后只是調用stroke()函數進行描邊，而面狀實體則需要對線型包含的區域調用fill()函數進行樣式填充。填充分為單色填充、漸變填充、圖案填充。單色填充在fillStyle屬性設定顏色值調用函數直接填充；圖案填充與漸變填充相似，先使用linearGradient()函數創建線性漸變對象或者圖案填充對象，然后將創建的對象作為過渡屬性設定到樣式文件中，調用fill()函數填充。標注實體類是使用的文字或者數字標示地圖要素的名稱和屬性特征，標注實體類也是從抽象實體類中繼承而來的，除了通用屬性和操作之外，增設了字體font、字號fontSize、對齊方式textAlign等屬性信息。標注實體類和點狀實體繪制實現步驟基本相同，在圖層類上增加標注圖層，調用drawFonts()函數向圖層上增加標注，該函數對實現增設的屬性信息進行了封裝，文本描邊使用strokeTexts()函數，文本填充使用fillTexts()函數。

3.3 系統設計與實現

本文構建了Web Map系統驗證前述基于Html5矢量地圖渲染技術，該實現平臺采用Html+JavaScript編程實現，不依賴第三方插件。實驗平臺運行環境為LAN內網，在Windows 2008 Server上搭建服務，客戶端的Http訪問請求服務由IIS提供，主要實現了地理要素數據傳輸，客戶端數據解析，矢量地圖數據渲染。地理要素數據采用GeoJSON格式Unicode編碼文件儲存，測試數據為鄭州地區局部數據，客戶端對數據解析后，直接調用上述設計的API方法繪制，繪制后有明暗兩種顯示風格可以切換。與傳統Web Map相比，實驗系統的跨平臺能力明顯提高，能充分利用現在客戶端硬件的優勢，一次請求后再客戶端實時繪制，在可視化效果相當的情況下，實驗系統的客戶端一些本地化操作，無需頻繁發送數據請求直接在本地進行數據分析或提取，加載效率明顯高于傳統方法，同時減少了對網絡帶寬的占用，減輕了服務器的負載，具體性能指標還需進一步研究與分類對比測試。圖4和圖5所示，明暗配色兩種風格矢量地圖渲染效果。

圖3 Web Map矢量繪制方法類結構

圖4 Web Map矢量數據渲染明亮風格

圖5 Web Map矢量數據渲染深色風格

4 結束語

本文對Html5 canvas技術進行分析的基礎上，探討了使用GeoJSON格式對地理要素數據進行分類與編碼，根據點、線、面狀、標注地理要素的特點，設計了客戶端數據解析與渲染方法，實現了風格可配置的矢量Web Map實時繪制。通過基于Html5的Web Map的實現，驗證了Html5技術在地理信息中的應用價值，無需依賴第三方插件便可以兼容多平臺多系統，實時矢量數據傳輸與動態繪制技術將有效改善目前柵格在線地圖的不足，為下一步實現在瀏覽器端進行地理空間分析提出了可行性，將會是瀏覽器或移動終端實現地理定位與導航的有效手段，豐富在線地圖瀏覽器端的應用，這樣技術的普及極有可能創造出改變現有網絡地圖的商業應用模式，具有一定的理論和實際研究價值。

基于Html5的Web Map進行了初步探討和實驗階段，還有待于下一步繼續深入研究，本文實驗系統實現的矢量繪圖區域范圍較小，在地理要素選擇上經過優化和精簡，在線傳輸的矢量數據文件也相對較小。如果矢量數據文件較大時，會涉及到矢量數據漸進式傳輸，就需要分級、分塊、分批次緩沖傳輸，系統渲染速度也會受到一定程度的影響，繪制效率將降低，如何提高大范圍內的數據傳輸以及渲染繪制將是下一步研究的方向與內容。

[1] 徐卓揆.基于Html5、Ajax和Web Service的WebGIS研究[J].測繪科學,2012,37(1):145-147.

[2] 岳鵬磊,李連民,李昌清,等.基于Html5的網絡地圖研究與實現[J].無線互聯科技,2015,1(2):38-40.

[3] 閔東龍.基于Html5的矢量電子海圖服務研究[D].大連：大連海事大學,2013.

[4] 周玲芳,李長云,胡淑新,等.基于Html5的WebGIS實時客戶端設計[J].微型機與應用,2015,34(16):66-69.

[5] 周愛武,于亞飛.基于WebSocket和GeoJSON的WebGIS的設計與實現[J].計算機技術與發展,2011,21(2):62-65.

[6] 吳磊,張福慶.基于Html canvas的WebGIS客戶端技術研究[J].地理信息世界,2009,6(3):78-82.

[7] 張俊濤,王蜜蜂,李曉明,等.基于Html5的HeatMap Web專題地圖研究[J].測繪與空間地理信息,2012,35(5):214-218

[責任編輯：李銘娜]

Research on vector data rendering of Web Map by using Html5

DING Liguo1，ZHOU Bin2，XIONG Wei1

(1.Information Engineering University, Zhengzhou 450000,China; 2.Troops 68029, Lanzhou 730000,China)

Now the web browsers ( such as PC, IOS, Android, etc.) support Html5, which promotes deeply the performance and the usability of web. The canvas element is one of the new technologies in Html5, which can be used to draw graphical images and render vector data by JavaScript. In view of the shortcomings of traditional title map, this paper takes the vector rendering technology of web map as the research point, analyzing JSON-formatted GIS data and using Html5 canvas to construct vector Web Map. The geographic vector data is real-time rendered in the browser, the customized style needs no reloaded map layers which can lighten the pressure on bandwidth and improve the real-time performance of Web Map. So the ability of spatial analysis of Web Map can be further achieved.

Html5 Canvas; Web Map; vector data rendering

2016-07-20

國家自然科學基金資助項目(41271393);地理信息工程國家重點實驗室重點基金資助項目(SKLGIE2014-Z-4-1)

丁立國(1983-)，男，工程師，博士研究生.

著錄：丁立國，周斌，熊偉.基于Html5的Web Map矢量渲染技術研究[J].測繪工程，2017，26(8)：62-67.

10.19349/j.cnki.issn1006-7949.2017.08.013

P231

A

1006-7949(2017)08-0062-06