丁立國(guó)，周 斌，熊 偉

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

基于Html5的Web Map矢量渲染技術(shù)研究

丁立國(guó)1，周 斌2，熊 偉1

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

當(dāng)下主流平臺(tái)(即桌面PC，Android,IOS等)上Web瀏覽器都支持Html5標(biāo)準(zhǔn)。Html5的到來(lái)讓W(xué)eb應(yīng)用的性能和易用性明顯提升，其中Canvas元素是Html5標(biāo)準(zhǔn)中新增的技術(shù)之一，被JavaScript用來(lái)進(jìn)行圖形圖像的繪制和矢量渲染。針對(duì)傳統(tǒng)切片式Web Map存在的不足，文中以Web地圖矢量渲染為研究切入點(diǎn)，分析一種基于JSON的地理信息數(shù)據(jù)傳輸格式，并使用Html5 Canvas構(gòu)建矢量Web Map，即在瀏覽器中地理數(shù)據(jù)矢量渲染的設(shè)計(jì)和實(shí)現(xiàn)，兼具自定義渲染風(fēng)格而無(wú)需重新請(qǐng)求加載圖層，減少瓦片請(qǐng)求所需的帶寬，改善Web Map實(shí)時(shí)顯示的性能，探索進(jìn)一步直接實(shí)現(xiàn)Web Map空間分析能力的可行性。

Html5 Canvas；Web Map；矢量數(shù)據(jù)渲染

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

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

1 Html5新特性Canvas簡(jiǎn)介

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

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

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

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

2 地理要素?cái)?shù)據(jù)格式編碼

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

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

圖2 GeoJSON表達(dá)地理要素?cái)?shù)據(jù)結(jié)構(gòu)

3 Web Map矢量渲染方法

Canvas在客戶端地圖渲染是實(shí)時(shí)的，因此在顯示速度上明顯的優(yōu)勢(shì)；展現(xiàn)地理數(shù)據(jù)可以分層顯示具有一定的靈活性；客戶端數(shù)據(jù)是原始矢量文件，基于數(shù)據(jù)分析互操作性高?？蛻舳藢?shí)時(shí)繪圖的流程：從服務(wù)器獲取GeoJSON數(shù)據(jù)，客戶端對(duì)數(shù)據(jù)格式進(jìn)行解析，將矢量實(shí)體的地理要素從GeoJSON解析為JavaScript對(duì)象，根據(jù)該對(duì)象中包含的數(shù)據(jù)信息，調(diào)用坐標(biāo)轉(zhuǎn)換對(duì)象，將地理坐標(biāo)轉(zhuǎn)換成Canvas顯示區(qū)域里的屏幕坐標(biāo)，最后調(diào)用Canvas API以及設(shè)計(jì)的符號(hào)類庫(kù)函數(shù)實(shí)現(xiàn)地圖的繪制與顯示。

3.1 Canvas地理坐標(biāo)轉(zhuǎn)換

坐標(biāo)轉(zhuǎn)換原理，將要顯示的地理區(qū)域的中心點(diǎn)和瀏覽器中視圖中心點(diǎn)進(jìn)行配對(duì)，繪圖時(shí)先計(jì)算地理要素坐標(biāo)與地理中心點(diǎn)的偏移差值，將該差值換算到對(duì)應(yīng)顯示比例尺的距離，根據(jù)該距離計(jì)算實(shí)際的屏幕坐標(biāo)，最后將屏幕坐標(biāo)交給Canvas進(jìn)行繪制。據(jù)上所述得到地理坐標(biāo)轉(zhuǎn)換到屏幕坐標(biāo)公式：

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代表屏幕坐標(biāo)，View_center代表屏幕中心點(diǎn)坐標(biāo)，ptGeo代表地理要素的坐標(biāo)，geo_center是地理中心的坐標(biāo)，scale是當(dāng)前比例尺。當(dāng)要顯示的地理范圍和窗口的比例不一致時(shí)，需要分別計(jì)算水平和垂直的比例尺，然后數(shù)值較大的作為比例尺，也就是說(shuō)比例尺的調(diào)整向著地理區(qū)域更小的方向進(jìn)行調(diào)整，讓地理區(qū)域和繪圖視口的比例一致。經(jīng)過(guò)上述計(jì)算，可以將任意一點(diǎn)的地理數(shù)據(jù)編碼中的地理坐標(biāo)轉(zhuǎn)換為視口的屏幕坐標(biāo)，再調(diào)用下文所述的繪圖類庫(kù)函數(shù)進(jìn)行繪制。

3.2 Canvas實(shí)現(xiàn)地圖繪制API設(shè)計(jì)

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

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

3.3 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

本文構(gòu)建了Web Map系統(tǒng)驗(yàn)證前述基于Html5矢量地圖渲染技術(shù)，該實(shí)現(xiàn)平臺(tái)采用Html+JavaScript編程實(shí)現(xiàn)，不依賴第三方插件。實(shí)驗(yàn)平臺(tái)運(yùn)行環(huán)境為L(zhǎng)AN內(nèi)網(wǎng)，在Windows 2008 Server上搭建服務(wù)，客戶端的Http訪問(wèn)請(qǐng)求服務(wù)由IIS提供，主要實(shí)現(xiàn)了地理要素?cái)?shù)據(jù)傳輸，客戶端數(shù)據(jù)解析，矢量地圖數(shù)據(jù)渲染。地理要素?cái)?shù)據(jù)采用GeoJSON格式Unicode編碼文件儲(chǔ)存，測(cè)試數(shù)據(jù)為鄭州地區(qū)局部數(shù)據(jù)，客戶端對(duì)數(shù)據(jù)解析后，直接調(diào)用上述設(shè)計(jì)的API方法繪制，繪制后有明暗兩種顯示風(fēng)格可以切換。與傳統(tǒng)Web Map相比，實(shí)驗(yàn)系統(tǒng)的跨平臺(tái)能力明顯提高，能充分利用現(xiàn)在客戶端硬件的優(yōu)勢(shì)，一次請(qǐng)求后再客戶端實(shí)時(shí)繪制，在可視化效果相當(dāng)?shù)那闆r下，實(shí)驗(yàn)系統(tǒng)的客戶端一些本地化操作，無(wú)需頻繁發(fā)送數(shù)據(jù)請(qǐng)求直接在本地進(jìn)行數(shù)據(jù)分析或提取，加載效率明顯高于傳統(tǒng)方法，同時(shí)減少了對(duì)網(wǎng)絡(luò)帶寬的占用，減輕了服務(wù)器的負(fù)載，具體性能指標(biāo)還需進(jìn)一步研究與分類對(duì)比測(cè)試。圖4和圖5所示，明暗配色兩種風(fēng)格矢量地圖渲染效果。

圖3 Web Map矢量繪制方法類結(jié)構(gòu)

圖4 Web Map矢量數(shù)據(jù)渲染明亮風(fēng)格

圖5 Web Map矢量數(shù)據(jù)渲染深色風(fēng)格

4 結(jié)束語(yǔ)

本文對(duì)Html5 canvas技術(shù)進(jìn)行分析的基礎(chǔ)上，探討了使用GeoJSON格式對(duì)地理要素?cái)?shù)據(jù)進(jìn)行分類與編碼，根據(jù)點(diǎn)、線、面狀、標(biāo)注地理要素的特點(diǎn)，設(shè)計(jì)了客戶端數(shù)據(jù)解析與渲染方法，實(shí)現(xiàn)了風(fēng)格可配置的矢量Web Map實(shí)時(shí)繪制。通過(guò)基于Html5的Web Map的實(shí)現(xiàn)，驗(yàn)證了Html5技術(shù)在地理信息中的應(yīng)用價(jià)值，無(wú)需依賴第三方插件便可以兼容多平臺(tái)多系統(tǒng)，實(shí)時(shí)矢量數(shù)據(jù)傳輸與動(dòng)態(tài)繪制技術(shù)將有效改善目前柵格在線地圖的不足，為下一步實(shí)現(xiàn)在瀏覽器端進(jìn)行地理空間分析提出了可行性，將會(huì)是瀏覽器或移動(dòng)終端實(shí)現(xiàn)地理定位與導(dǎo)航的有效手段，豐富在線地圖瀏覽器端的應(yīng)用，這樣技術(shù)的普及極有可能創(chuàng)造出改變現(xiàn)有網(wǎng)絡(luò)地圖的商業(yè)應(yīng)用模式，具有一定的理論和實(shí)際研究?jī)r(jià)值。

基于Html5的Web Map進(jìn)行了初步探討和實(shí)驗(yàn)階段，還有待于下一步繼續(xù)深入研究，本文實(shí)驗(yàn)系統(tǒng)實(shí)現(xiàn)的矢量繪圖區(qū)域范圍較小，在地理要素選擇上經(jīng)過(guò)優(yōu)化和精簡(jiǎn)，在線傳輸?shù)氖噶繑?shù)據(jù)文件也相對(duì)較小。如果矢量數(shù)據(jù)文件較大時(shí)，會(huì)涉及到矢量數(shù)據(jù)漸進(jìn)式傳輸，就需要分級(jí)、分塊、分批次緩沖傳輸，系統(tǒng)渲染速度也會(huì)受到一定程度的影響，繪制效率將降低，如何提高大范圍內(nèi)的數(shù)據(jù)傳輸以及渲染繪制將是下一步研究的方向與內(nèi)容。

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

[2] 岳鵬磊,李連民,李昌清,等.基于Html5的網(wǎng)絡(luò)地圖研究與實(shí)現(xiàn)[J].無(wú)線互聯(lián)科技,2015,1(2):38-40.

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

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

[5] 周愛(ài)武,于亞飛.基于WebSocket和GeoJSON的WebGIS的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展,2011,21(2):62-65.

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

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

[責(zé)任編輯：李銘娜]

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

國(guó)家自然科學(xué)基金資助項(xiàng)目(41271393);地理信息工程國(guó)家重點(diǎn)實(shí)驗(yàn)室重點(diǎn)基金資助項(xiàng)目(SKLGIE2014-Z-4-1)

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

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

10.19349/j.cnki.issn1006-7949.2017.08.013

P231

A

1006-7949(2017)08-0062-06