于 佳，仇建偉

基于瀏覽器的二三維一體標(biāo)圖技術(shù)研究與實(shí)現(xiàn)

于 佳，仇建偉

（華北計算技術(shù)研究所，北京 100083）

為了實(shí)現(xiàn)在Web環(huán)境下進(jìn)行二三維標(biāo)圖的需求，在研究了基于HTML5新特性的二三維圖形繪制技術(shù)后，提出了一種面向瀏覽器的二三維一體標(biāo)圖應(yīng)用的實(shí)現(xiàn)方案。基于MVC架構(gòu)模式，使用HTML5的Canvas特性作為標(biāo)圖應(yīng)用二維視圖呈現(xiàn)，以開源三維GIS引擎Cesium作為輔助手段實(shí)現(xiàn)標(biāo)圖應(yīng)用中三維場景渲染。以事件驅(qū)動方式實(shí)現(xiàn)標(biāo)繪過程中圖形的更改處理。后臺通過REST式服務(wù)接口提供服務(wù)器端數(shù)據(jù)訪問。

標(biāo)圖系統(tǒng)；二三維一體；MVC；瀏覽器

0 引言

標(biāo)圖應(yīng)用是圖形數(shù)據(jù)處理和要圖標(biāo)繪平臺，是作戰(zhàn)指揮人員必備的作業(yè)工具。自20世紀(jì)80年代初我軍第一個標(biāo)圖系統(tǒng)誕生以來，基于桌面環(huán)境的二三維圖形標(biāo)繪系統(tǒng)已發(fā)展得較為成熟。隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展和互聯(lián)網(wǎng)產(chǎn)品的普遍應(yīng)用，Web應(yīng)用在靈活性和易操作性上越來越顯示出其較于桌面應(yīng)用的優(yōu)勢。在作戰(zhàn)方面，標(biāo)圖處理系統(tǒng)朝著網(wǎng)絡(luò)化方向發(fā)展將會在日益復(fù)雜的戰(zhàn)場環(huán)境中使得作戰(zhàn)指揮人員更易于使用?；贖TML5的畫布（Canvas）特性，現(xiàn)已開發(fā)出基于瀏覽器的二維標(biāo)圖系統(tǒng)，但基于瀏覽器的三維標(biāo)圖系統(tǒng)正處于應(yīng)用的技術(shù)可行性驗證階段。傳統(tǒng)的用以實(shí)現(xiàn)瀏覽器中三維場景Web技術(shù)如Flash、Java3D、X3D等，通常需要加載組件或安裝相應(yīng)的瀏覽器插件，這不可避免地帶來可移植性和兼容性上的問題。誕生于2011年WebGL技術(shù)，使得無需安裝任何插件也可以在Web頁面上繪制和渲染復(fù)雜的三維圖形，為實(shí)現(xiàn)瀏覽器三維標(biāo)繪提供了新的技術(shù)途徑。

本文在研究相關(guān)技術(shù)的基礎(chǔ)上，結(jié)合瀏覽器二維標(biāo)圖技術(shù)和WebGL技術(shù)，設(shè)計并實(shí)現(xiàn)了基于瀏覽器的二三維一體標(biāo)圖系統(tǒng)。

1 瀏覽器繪圖技術(shù)

1.1瀏覽器二維繪圖技術(shù)

典型的瀏覽器二維繪圖技術(shù)主要有以下幾種：

（1）VML（Vector Markup Language）矢量標(biāo)記語言是一種基于XML語法的矢量繪圖語言。VML中定義了許多圖形元素，如代表任何形狀的shape元素、代表直線的Line元素、代表多邊形的Polyline元素、代表矩形的Rect元素等等。此外，VML定義了Group容器標(biāo)簽用來包含一組圖形元素，以實(shí)現(xiàn)這組圖形元素的動態(tài)放大和縮小。VML語法簡單、易于擴(kuò)展且與HTML兼容，因而可以通過Java-Script腳本語言操作VML圖形元素實(shí)現(xiàn)網(wǎng)頁上的圖形交互繪制。

（2）SVG（Scalable Vector Graphics）可擴(kuò)展矢量圖形也是一套基于XML語言的二維矢量圖形繪制語言，支持顯示矢量圖形對象、嵌入式對象和文字對象。SVG提供多種圖形元素，如根元素svg、矩形、圓形、多邊形、路徑等。類似于VML，SVG提供了g元素用于把簡單圖形組合成復(fù)雜圖形，同時也支持JavaScript腳本操作修改SVG文檔中的DOM節(jié)點(diǎn)。

（3）像Flex、Java Applet和ActiveX一類的組件也可以實(shí)現(xiàn)瀏覽器二維繪圖。Flex提供二維圖形繪制和事件交互接口，方便在瀏覽器頁面上進(jìn)行圖形的繪制與編輯操作。Java Applet作為可以直接運(yùn)行在客戶端的程序，通過調(diào)用二維圖形繪制接口實(shí)現(xiàn)在瀏覽器頁面上的圖形繪制。微軟的ActiveX具有訪問本地資源并將資源嵌入到網(wǎng)頁中的能力，以此實(shí)現(xiàn)瀏覽器中的圖形繪制。這幾類通過組件實(shí)現(xiàn)瀏覽器二維繪圖的技術(shù)存在的弊端就是使用前需要下載并安裝相應(yīng)控件，且某些情況下不能實(shí)現(xiàn)跨平臺。這無疑為用戶操作增加了不便性。

（4）Canvas是HTML5增加的2D繪圖API，它允許人們在不使用任何瀏覽器插件的前提下直接在瀏覽器中繪制2D圖形。目前，除IE8及以下版本瀏覽器之外，其他主流瀏覽器都提供對Canvas的支持[1]。

Canvas具有一套完整的2D圖形繪制API。用戶可以通過JavaScript腳本語言操作這些API將2D圖形繪制到網(wǎng)頁中的畫布上[2]。在Canvas中，圖形對象一旦被繪制完成就不會得到瀏覽器關(guān)注，若要對其進(jìn)行更改，需要重新繪制整個場景。使用canvas進(jìn)行網(wǎng)頁上2D圖形繪制之前，需先在HTML文檔中創(chuàng)建canvas標(biāo)簽，獲取canvas對象的上下文環(huán)境，然后就可以通過JavaScript腳本語言調(diào)用canvas的繪圖API進(jìn)行路徑、直線、圓弧、圖片等圖形的繪制。

本文采用HTML5 Canvas實(shí)現(xiàn)原型系統(tǒng)中二維標(biāo)圖部分。

1.2瀏覽器三維繪圖技術(shù)

在瀏覽器三維繪圖方面，有傳統(tǒng)的Web3D技術(shù)，如VRML技術(shù)、X3D技術(shù)、Java3D技術(shù)等，這些技術(shù)通過不同的方式實(shí)現(xiàn)了三維場景和模型在瀏覽器中的展示，但它們的發(fā)展受到多個方面的限制[3]。3D模型的網(wǎng)絡(luò)傳輸對帶寬提出了較高要求；不同的Web3D技術(shù)都是由不同公司自行開發(fā)，采用不同的格式和方法，并沒有一個統(tǒng)一的標(biāo)準(zhǔn)； 幾乎每種Web3D技術(shù)都需要自己的插件支持，這些插件的安裝不可避免地會影響到一些人的使用熱情。

WebGL（Web-based Graphics Language）是一個跨平臺、開放的技術(shù)，用于在瀏覽器中繪制三維圖形并與之進(jìn)行交互的技術(shù)。它基于OpenGL ES 2.0標(biāo)準(zhǔn)，并使用OpenGL著色語言GLSL，還提供了類似于標(biāo)準(zhǔn)的OpenGL的程序開發(fā)接口。在WebGL出現(xiàn)以前，三維圖形的渲染需要依賴高配置的計算機(jī)或者專用游戲機(jī)。而現(xiàn)在，WebGL使得在瀏覽器中繪制三維場景成為可能。它將HTML5和JavaScript結(jié)合在一起，允許開發(fā)人員借助系統(tǒng)顯卡為HTML5 Canvas直接提供3D加速渲染，使得瀏覽器中的3D場景和模型得以更流暢地展示。此外，由于WebGL是內(nèi)嵌在瀏覽器中的，所以無需安裝任何插件和庫就可以直接使用它。目前已實(shí)現(xiàn)對WebGL支持的瀏覽器有Firefox 4+、Google Chrome 9+、Opera 12+、Safari 5.1+以及IE 11+[4]。

本文采用WebGL實(shí)現(xiàn)原型系統(tǒng)中三維標(biāo)圖部分。

2 REST架構(gòu)的圖形服務(wù)

表示性狀態(tài)轉(zhuǎn)化（Representational State Transfer，REST）是由Roy Fielding于2000年提出的一種體系架構(gòu)風(fēng)格，旨在降低Web應(yīng)用開發(fā)的復(fù)雜性，提高系統(tǒng)的可伸縮性[5]。REST Web服務(wù)是以系統(tǒng)資源為中心的服務(wù)，它將網(wǎng)絡(luò)上的所有事物抽象為資源，并且每個資源都由一個唯一的資源標(biāo)識符（Uniform Resource Identifier，URI）標(biāo)識。標(biāo)準(zhǔn)REST 式Web服務(wù)的實(shí)現(xiàn)應(yīng)該遵循以下基本設(shè)計原則：1）顯示地使用HTTP方法；2）無狀態(tài)；3）公開目錄結(jié)構(gòu)式的URI[6]。

REST式Web應(yīng)用程序（或客戶端）在HTTP請求頭和請求正文中包含了服務(wù)器端組件用于生成響應(yīng)結(jié)果所需要的所有信息，而不要求服務(wù)器在處理請求時檢索任何類型的應(yīng)用程序上下文或狀態(tài)。服務(wù)器只負(fù)責(zé)生成響應(yīng)，并以接口的形式提供給客戶端獨(dú)立維護(hù)應(yīng)用程序狀態(tài)所需的資源。這種無狀態(tài)的特點(diǎn)不僅改善了服務(wù)器性能，還簡化了服務(wù)器端組件的設(shè)計和實(shí)現(xiàn)。由于以上優(yōu)點(diǎn)，本文采用REST方式設(shè)計實(shí)現(xiàn)服務(wù)端接口[7]。

標(biāo)圖應(yīng)用以地理信息系統(tǒng)、符號庫和符號處理庫作為基礎(chǔ)支撐[8]。其中地理信息系統(tǒng)為標(biāo)圖系統(tǒng)提供二維地圖服務(wù)和三維地球服務(wù)，符號庫存儲所有應(yīng)用領(lǐng)域符號的標(biāo)識信息，符號處理庫提供符號在繪制和修改時實(shí)時計算符號數(shù)據(jù)的功能。這三者共同作為REST圖形服務(wù)端的基礎(chǔ)支撐服務(wù)。

本標(biāo)圖應(yīng)用的REST服務(wù)在支撐服務(wù)的基礎(chǔ)上主要提供兩個功能：一個是用于提供符號數(shù)據(jù)的符號數(shù)據(jù)服務(wù)，另一個是在繪制線面符號時提供符號繪制服務(wù)。瀏覽器通過訪問這兩個服務(wù)獲得請求符號的描述信息，經(jīng)過處理后最終在頁面上繪制出來。

3 系統(tǒng)結(jié)構(gòu)及關(guān)鍵功能設(shè)計

3.1系統(tǒng)結(jié)構(gòu)

瀏覽器標(biāo)圖應(yīng)用系統(tǒng)的整體結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)層次結(jié)構(gòu)圖

REST式的標(biāo)圖系統(tǒng)以符號處理庫、符號庫以及地理信息系統(tǒng)作為底層支撐服務(wù)，在支撐服務(wù)基礎(chǔ)上建立符號繪制服務(wù)和符號數(shù)據(jù)服務(wù)，地理信息服務(wù)直接繼承自底層?？蛻舳藶g覽器通過網(wǎng)絡(luò)請求標(biāo)圖應(yīng)用系統(tǒng)REST服務(wù)可以進(jìn)行以下幾方面操作：

（1）訪問地理信息服務(wù)，操作二維地圖和三維地球；

（2）訪問符號數(shù)據(jù)服務(wù)，在符號面板中加載符號庫中符號數(shù)據(jù)；

（3）點(diǎn)擊標(biāo)繪面板中某個符號，通過鼠標(biāo)交互實(shí)現(xiàn)在二維地圖和三維地球上繪制相應(yīng)符號的功能。

每個符號都具有描述信息，描述信息是一個訪問符號繪制服務(wù)后返回的字符串，其中記錄了繪制相應(yīng)符號所用的數(shù)據(jù)和需要遵守的規(guī)則。瀏覽器繪制符號前需要對描述信息進(jìn)行解析，分離出所需數(shù)據(jù)并按照約定的規(guī)則才能夠?qū)⒎栒_的繪制出來。

3.2基于MVC模式的二三維標(biāo)圖應(yīng)用設(shè)計

本系統(tǒng)采用MVC架構(gòu)模式實(shí)現(xiàn)應(yīng)用系統(tǒng)軟件，系統(tǒng)軟件分為模型（Model）、視圖（View）和控制器（Controller）三個模塊。模型是應(yīng)用的數(shù)據(jù)核心部分，為視圖和控制器提供數(shù)據(jù)支持；視圖是應(yīng)用的顯示層，用于展現(xiàn)應(yīng)用界面；控制器是應(yīng)用的控制中心，它從視圖獲取用戶輸入，將其轉(zhuǎn)發(fā)給模型以對用戶請求進(jìn)行處理，最后將模型處理的結(jié)果反饋給視圖進(jìn)行展示。MVC架構(gòu)實(shí)現(xiàn)了數(shù)據(jù)與視圖相互分離，且一份數(shù)據(jù)能夠支持多個視圖的顯示，視圖之間互不影響。這種架構(gòu)模式為實(shí)現(xiàn)二三維一體的標(biāo)圖系統(tǒng)提供了有力支撐[9]。

在本系統(tǒng)中，視圖模塊分別對應(yīng)瀏覽器中二維、三維標(biāo)繪頁面，用于符號的二維和三維顯示和用戶交互。模型模塊由兩部分組成，包括繪制在瀏覽器中的符號對象和后臺REST服務(wù)?？刂破髂K負(fù)責(zé)接收符號繪制、移動、編輯等一系列操作，并將操作請求發(fā)送給后臺REST服務(wù)。后臺對請求進(jìn)行處理后得出當(dāng)前被操作符號的最新狀態(tài)并返回給控制器。最終由控制器驅(qū)動二維和三維視圖中符號狀態(tài)更新。圖2為系統(tǒng)的MVC架構(gòu)圖。

3.3二維符號繪制方法

瀏覽器端二維符號的繪制是基于HTML5 Canvas實(shí)現(xiàn)，如圖3二維符號繪制流程圖所示。當(dāng)點(diǎn)擊標(biāo)繪面板選中點(diǎn)狀符號后，瀏覽器會在本地根據(jù)選中符號的標(biāo)識符查找描述信息。當(dāng)用戶在屏幕上點(diǎn)擊鼠標(biāo)時瀏覽器會記錄下鼠標(biāo)點(diǎn)擊位置的屏幕坐標(biāo)，然后將查找到的點(diǎn)狀符號的二維描述信息和鼠標(biāo)點(diǎn)擊處屏幕坐標(biāo)相加得出符號應(yīng)出現(xiàn)在屏幕上的實(shí)際坐標(biāo)，最后通過canvas的繪圖API在屏幕上的正確位置繪制出點(diǎn)狀符號。如果在標(biāo)繪面板中選中的是線面符號，則瀏覽器會根據(jù)鼠標(biāo)在屏幕上點(diǎn)擊和移動的位置實(shí)時請求服務(wù)器[10]。服務(wù)器根據(jù)接收到的定位點(diǎn)位置調(diào)用符號處理庫計算出線面符號當(dāng)前的數(shù)據(jù)并返回給瀏覽器，然后瀏覽器使用canvas繪圖API繪制出相應(yīng)形狀的符號。

圖2 基于MVC模式的二三維一體標(biāo)圖應(yīng)用結(jié)構(gòu)圖

圖3 二維符號繪制流程圖

3.4三維符號繪制方法

使用原生WebGL進(jìn)行應(yīng)用開發(fā)較為復(fù)雜，本系統(tǒng)采用了一個封裝了WebGL的引擎Cesium作為底層GIS支撐，提供三維地球顯示。Cesium提供對多種基本圖元的繪制API和坐標(biāo)轉(zhuǎn)換API。在三維場景下繪制符號與二維類似，不同的是瀏覽器從服務(wù)器處請求到的是二維平面坐標(biāo)，但在三維場景中繪制圖形需要使用三維空間坐標(biāo)，這就需要在繪制之前對符號的二維坐標(biāo)數(shù)據(jù)進(jìn)行坐標(biāo)變換，將局部坐標(biāo)轉(zhuǎn)換成世界坐標(biāo)后再使用繪制接口將符號繪制到三維場景中。具體的實(shí)現(xiàn)流程是：當(dāng)瀏覽器獲得符號數(shù)據(jù)后，對于點(diǎn)狀符號，瀏覽器先計算得到鼠標(biāo)點(diǎn)擊位置的局部坐標(biāo)到世界坐標(biāo)的變換矩陣，然后將符號的各個位置點(diǎn)與變換矩陣相乘得到各位置點(diǎn)的世界坐標(biāo)，最后調(diào)用三維繪圖API畫出符號圖形；由于線面符號在三維地球上貼地顯示且定位點(diǎn)位置由經(jīng)緯度確定，所以不需要進(jìn)行坐標(biāo)變換。繪制時瀏覽器計算出鼠標(biāo)點(diǎn)擊位置的經(jīng)緯度坐標(biāo)并根據(jù)坐標(biāo)信息請求服務(wù)器，服務(wù)器會根據(jù)線面符號定位點(diǎn)經(jīng)緯度坐標(biāo)調(diào)用符號處理庫計算當(dāng)前符號的描述信息，然后返回給瀏覽器，最后瀏覽器根據(jù)接收到的符號圖形矢量數(shù)據(jù)運(yùn)用繪圖API繪制在三維地球上。應(yīng)用流程如圖4二維符號繪制流程圖所示。

圖4 三維符號繪制流程圖

3.5標(biāo)圖應(yīng)用一體化設(shè)計

基于MVC架構(gòu)，系統(tǒng)實(shí)現(xiàn)一個模型、兩種視圖，如圖5基于MVC模式的二三維一體化所示。系統(tǒng)中數(shù)據(jù)模型只有一份，其中保存著已繪制符號的屬性數(shù)據(jù)。在二維和三維視圖中對已繪制符號的任何更改都會引起數(shù)據(jù)模型的改變，而數(shù)據(jù)模型的改變會驅(qū)動二維和三維視圖同時更新，從而實(shí)現(xiàn)二三維聯(lián)動的效果。

圖5 基于MVC模式的二三維一體化

模型和視圖的更新變化采用事件驅(qū)動的方式實(shí)現(xiàn)。系統(tǒng)中與事件相關(guān)的類有三種：Event類、EventObject類和EventSource類。其中，Event類定義了各種事件類型；EventObject類是針對不同事件類型定義的事件類；EventSource定義了事件源類，每個事件源上可以注冊多個事件，系統(tǒng)中的事件源對象是符號對象。當(dāng)在二維或三維視圖中的事件源對象上觸發(fā)了某一事件時，事件源對象隨即執(zhí)行該事件的事件處理程序，事件處理程序會調(diào)用模型層接口對符號對象更新，符號對象的改變觸發(fā)change事件使得事件源對象在視圖層得以更新，最終在二維和三維場景中呈現(xiàn)變化后的一致效果。

4 原型實(shí)現(xiàn)及效果評估

基于上述設(shè)計開發(fā)了一個原型系統(tǒng)，實(shí)現(xiàn)了瀏覽器標(biāo)圖應(yīng)用核心業(yè)務(wù)功能。瀏覽器端二維符號采用HTML Canvas繪制，服務(wù)器端地圖服務(wù)由現(xiàn)有地理信息系統(tǒng)提供。三維場景下基于三維GIS引擎Cesium實(shí)現(xiàn)地球展現(xiàn)與符號繪制?？蛻舳藶g覽器在二維或三維場景下向服務(wù)器請求符號數(shù)據(jù)，服務(wù)器根據(jù)請求參數(shù)通過JNI調(diào)用符號庫及符號處理庫獲得符號的數(shù)據(jù)返回給瀏覽器。

在原型中，在二維地圖和三維地球中分別繪制、編輯符號后，更改后的結(jié)果會同時顯示在兩個視圖中。圖6、圖7是原型的效果圖。

圖6 原型系統(tǒng)界面

圖7 二三維一體效果圖

5 結(jié)束語

為了滿足未來戰(zhàn)場環(huán)境下標(biāo)圖系統(tǒng)的網(wǎng)絡(luò)化發(fā)展需求，研究了基于瀏覽器的三維標(biāo)繪技術(shù)，利用瀏覽器二維標(biāo)圖以及地理信息系統(tǒng)的現(xiàn)有成果，采用MVC模式設(shè)計實(shí)現(xiàn)了基于瀏覽器的標(biāo)圖原型系統(tǒng)。經(jīng)測試，原型系統(tǒng)能夠?qū)崿F(xiàn)瀏覽器下的二三維標(biāo)圖功能以及一體化顯示效果。

[1] 王川, 王玉玫. 基于Web服務(wù)的態(tài)勢標(biāo)繪系統(tǒng)相關(guān)技術(shù)研究[J]. 計算機(jī)工程與設(shè)計, 2012, 33(9).

[2] 姜福成. 基于HTML5的網(wǎng)頁地圖設(shè)計和應(yīng)用[J]. 軟件, 2012.

[3] 朱麗萍, 李洪奇, 杜萌萌, 等. 基于WebGL的三維WebGIS場景實(shí)現(xiàn)[J]. 計算機(jī)工程與設(shè)計, 2014, 35(10).

[4] Andreas Anyuru著, 吳文國 譯. WebGL高級編程—開發(fā)Web 3D圖形[M]. 北京: 清華大學(xué)出版社, 2013年6月第1版.

[5] 李久剛, 唐新明, 汪匯兵, 等. REST架構(gòu)的WebGIS技術(shù)研究與實(shí)現(xiàn)[J]. 測繪科學(xué), 2011年5月.

[6] 馮新?lián)P, 沈建京. REST和RPC兩種Web服務(wù)架構(gòu)風(fēng)格比較分析[J]. 小型微型計算機(jī)系統(tǒng), 2010, 31(7).

[7] 林彩霞, 仇建偉. 基于REST的圖形標(biāo)繪服務(wù)系統(tǒng)技術(shù)研究[J]. 計算機(jī)與現(xiàn)代化, 2012.

[8] 劉方濤, 王鑫, 俞蔚. 二三維聯(lián)動戰(zhàn)場可視化系統(tǒng)的研究與實(shí)現(xiàn)[J]. 計算機(jī)工程與應(yīng)用, 2014, 50(7).

[9] 朱曉宇, 聶穎. 基于Socket. io構(gòu)建Web協(xié)同標(biāo)繪應(yīng)用[J].軟件, 2015.

[10] 張永紅. 基于Web的態(tài)勢標(biāo)繪及應(yīng)用技術(shù)研究[J]. 中國電子科學(xué)研究院學(xué)報, 2009.

[11] 魏麗, 王玉玫, 聶穎. 基于win7多點(diǎn)觸控的標(biāo)繪技術(shù)設(shè)計與實(shí)現(xiàn)[J]. 軟件, 2015.

Research and Implementation of Browser-Based 2D and 3D Integration Plotting Technology

YU Jia, QIU Jian-wei
(North China Institute of Computing Technology, Beijing 100083, China)

To fulfill the demand of plotting under Web circumstance, after researching of the HTML5-based 2D and 3D plotting technology, the author proposed one approach of implementing browser-oriented 2D and 3D plotting application. This application is based on MVC architecture. The 2D view is implemented with HTML5 Canvas attribute and the 3D scene render is based on Cesium which is a three-dimension Web GIS engine. Event driven pattern is in charge of the symbol change during plotting and the application get data through REST API of the back-end web server.

Plotting system; 2D and 3D integration; MVC; Browser

TP391

: A

10.3969/j.issn.1003-6970.2017.02.027

于佳(1991-)，女，碩士研究生，主要研究方向：計算機(jī)圖形應(yīng)用；仇建偉，男，研究院級高級工程師，主要研究方向：網(wǎng)絡(luò)與分布式多媒體協(xié)同技術(shù)。

本文著錄格式：于佳，仇建偉. 基于瀏覽器的二三維一體標(biāo)圖技術(shù)研究與實(shí)現(xiàn)[J]. 軟件，2017，38（2）：130-135