基于瀏覽器的二三維一體標圖技術研究與實現

于 佳，仇建偉

基于瀏覽器的二三維一體標圖技術研究與實現

于 佳，仇建偉

（華北計算技術研究所，北京 100083）

為了實現在Web環境下進行二三維標圖的需求，在研究了基于HTML5新特性的二三維圖形繪制技術后，提出了一種面向瀏覽器的二三維一體標圖應用的實現方案?；贛VC架構模式，使用HTML5的Canvas特性作為標圖應用二維視圖呈現，以開源三維GIS引擎Cesium作為輔助手段實現標圖應用中三維場景渲染。以事件驅動方式實現標繪過程中圖形的更改處理。后臺通過REST式服務接口提供服務器端數據訪問。

標圖系統；二三維一體；MVC；瀏覽器

0 引言

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

本文在研究相關技術的基礎上，結合瀏覽器二維標圖技術和WebGL技術，設計并實現了基于瀏覽器的二三維一體標圖系統。

1 瀏覽器繪圖技術

1.1瀏覽器二維繪圖技術

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

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

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

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

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

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

本文采用HTML5 Canvas實現原型系統中二維標圖部分。

1.2瀏覽器三維繪圖技術

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

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

本文采用WebGL實現原型系統中三維標圖部分。

2 REST架構的圖形服務

表示性狀態轉化（Representational State Transfer，REST）是由Roy Fielding于2000年提出的一種體系架構風格，旨在降低Web應用開發的復雜性，提高系統的可伸縮性[5]。REST Web服務是以系統資源為中心的服務，它將網絡上的所有事物抽象為資源，并且每個資源都由一個唯一的資源標識符（Uniform Resource Identifier，URI）標識。標準REST 式Web服務的實現應該遵循以下基本設計原則：1）顯示地使用HTTP方法；2）無狀態；3）公開目錄結構式的URI[6]。

REST式Web應用程序（或客戶端）在HTTP請求頭和請求正文中包含了服務器端組件用于生成響應結果所需要的所有信息，而不要求服務器在處理請求時檢索任何類型的應用程序上下文或狀態。服務器只負責生成響應，并以接口的形式提供給客戶端獨立維護應用程序狀態所需的資源。這種無狀態的特點不僅改善了服務器性能，還簡化了服務器端組件的設計和實現。由于以上優點，本文采用REST方式設計實現服務端接口[7]。

標圖應用以地理信息系統、符號庫和符號處理庫作為基礎支撐[8]。其中地理信息系統為標圖系統提供二維地圖服務和三維地球服務，符號庫存儲所有應用領域符號的標識信息，符號處理庫提供符號在繪制和修改時實時計算符號數據的功能。這三者共同作為REST圖形服務端的基礎支撐服務。

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

3 系統結構及關鍵功能設計

3.1系統結構

瀏覽器標圖應用系統的整體結構如圖1所示。

圖1 系統層次結構圖

REST式的標圖系統以符號處理庫、符號庫以及地理信息系統作為底層支撐服務，在支撐服務基礎上建立符號繪制服務和符號數據服務，地理信息服務直接繼承自底層?？蛻舳藶g覽器通過網絡請求標圖應用系統REST服務可以進行以下幾方面操作：

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

（2）訪問符號數據服務，在符號面板中加載符號庫中符號數據；

（3）點擊標繪面板中某個符號，通過鼠標交互實現在二維地圖和三維地球上繪制相應符號的功能。

每個符號都具有描述信息，描述信息是一個訪問符號繪制服務后返回的字符串，其中記錄了繪制相應符號所用的數據和需要遵守的規則。瀏覽器繪制符號前需要對描述信息進行解析，分離出所需數據并按照約定的規則才能夠將符號正確的繪制出來。

3.2基于MVC模式的二三維標圖應用設計

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

在本系統中，視圖模塊分別對應瀏覽器中二維、三維標繪頁面，用于符號的二維和三維顯示和用戶交互。模型模塊由兩部分組成，包括繪制在瀏覽器中的符號對象和后臺REST服務?？刂破髂K負責接收符號繪制、移動、編輯等一系列操作，并將操作請求發送給后臺REST服務。后臺對請求進行處理后得出當前被操作符號的最新狀態并返回給控制器。最終由控制器驅動二維和三維視圖中符號狀態更新。圖2為系統的MVC架構圖。

3.3二維符號繪制方法

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

圖2 基于MVC模式的二三維一體標圖應用結構圖

圖3 二維符號繪制流程圖

3.4三維符號繪制方法

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

圖4 三維符號繪制流程圖

3.5標圖應用一體化設計

基于MVC架構，系統實現一個模型、兩種視圖，如圖5基于MVC模式的二三維一體化所示。系統中數據模型只有一份，其中保存著已繪制符號的屬性數據。在二維和三維視圖中對已繪制符號的任何更改都會引起數據模型的改變，而數據模型的改變會驅動二維和三維視圖同時更新，從而實現二三維聯動的效果。

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

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

4 原型實現及效果評估

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

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

圖6 原型系統界面

圖7 二三維一體效果圖

5 結束語

為了滿足未來戰場環境下標圖系統的網絡化發展需求，研究了基于瀏覽器的三維標繪技術，利用瀏覽器二維標圖以及地理信息系統的現有成果，采用MVC模式設計實現了基于瀏覽器的標圖原型系統。經測試，原型系統能夠實現瀏覽器下的二三維標圖功能以及一體化顯示效果。

[1] 王川, 王玉玫. 基于Web服務的態勢標繪系統相關技術研究[J]. 計算機工程與設計, 2012, 33(9).

[2] 姜福成. 基于HTML5的網頁地圖設計和應用[J]. 軟件, 2012.

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

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

[5] 李久剛, 唐新明, 汪匯兵, 等. REST架構的WebGIS技術研究與實現[J]. 測繪科學, 2011年5月.

[6] 馮新揚, 沈建京. REST和RPC兩種Web服務架構風格比較分析[J]. 小型微型計算機系統, 2010, 31(7).

[7] 林彩霞, 仇建偉. 基于REST的圖形標繪服務系統技術研究[J]. 計算機與現代化, 2012.

[8] 劉方濤, 王鑫, 俞蔚. 二三維聯動戰場可視化系統的研究與實現[J]. 計算機工程與應用, 2014, 50(7).

[9] 朱曉宇, 聶穎. 基于Socket. io構建Web協同標繪應用[J].軟件, 2015.

[10] 張永紅. 基于Web的態勢標繪及應用技術研究[J]. 中國電子科學研究院學報, 2009.

[11] 魏麗, 王玉玫, 聶穎. 基于win7多點觸控的標繪技術設計與實現[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]. 軟件，2017，38（2）：130-135