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

于 佳，仇建偉

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

于 佳，仇建偉

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

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

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

0 引言

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

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

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

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

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

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

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

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

（4）Canvas是HTML5增加的2D繪圖API，它允許人們?cè)诓皇褂萌魏螢g覽器插件的前提下直接在瀏覽器中繪制2D圖形。目前，除IE8及以下版本瀏覽器之外，其他主流瀏覽器都提供對(duì)Canvas的支持[1]。

Canvas具有一套完整的2D圖形繪制API。用戶可以通過(guò)JavaScript腳本語(yǔ)言操作這些API將2D圖形繪制到網(wǎng)頁(yè)中的畫(huà)布上[2]。在Canvas中，圖形對(duì)象一旦被繪制完成就不會(huì)得到瀏覽器關(guān)注，若要對(duì)其進(jìn)行更改，需要重新繪制整個(gè)場(chǎng)景。使用canvas進(jìn)行網(wǎng)頁(yè)上2D圖形繪制之前，需先在HTML文檔中創(chuàng)建canvas標(biāo)簽，獲取canvas對(duì)象的上下文環(huán)境，然后就可以通過(guò)JavaScript腳本語(yǔ)言調(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ù)通過(guò)不同的方式實(shí)現(xiàn)了三維場(chǎng)景和模型在瀏覽器中的展示，但它們的發(fā)展受到多個(gè)方面的限制[3]。3D模型的網(wǎng)絡(luò)傳輸對(duì)帶寬提出了較高要求；不同的Web3D技術(shù)都是由不同公司自行開(kāi)發(fā)，采用不同的格式和方法，并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)； 幾乎每種Web3D技術(shù)都需要自己的插件支持，這些插件的安裝不可避免地會(huì)影響到一些人的使用熱情。

WebGL（Web-based Graphics Language）是一個(gè)跨平臺(tái)、開(kāi)放的技術(shù)，用于在瀏覽器中繪制三維圖形并與之進(jìn)行交互的技術(shù)。它基于OpenGL ES 2.0標(biāo)準(zhǔn)，并使用OpenGL著色語(yǔ)言GLSL，還提供了類似于標(biāo)準(zhǔn)的OpenGL的程序開(kāi)發(fā)接口。在WebGL出現(xiàn)以前，三維圖形的渲染需要依賴高配置的計(jì)算機(jī)或者專用游戲機(jī)。而現(xiàn)在，WebGL使得在瀏覽器中繪制三維場(chǎng)景成為可能。它將HTML5和JavaScript結(jié)合在一起，允許開(kāi)發(fā)人員借助系統(tǒng)顯卡為HTML5 Canvas直接提供3D加速渲染，使得瀏覽器中的3D場(chǎng)景和模型得以更流暢地展示。此外，由于WebGL是內(nèi)嵌在瀏覽器中的，所以無(wú)需安裝任何插件和庫(kù)就可以直接使用它。目前已實(shí)現(xiàn)對(duì)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)用開(kāi)發(fā)的復(fù)雜性，提高系統(tǒng)的可伸縮性[5]。REST Web服務(wù)是以系統(tǒng)資源為中心的服務(wù)，它將網(wǎng)絡(luò)上的所有事物抽象為資源，并且每個(gè)資源都由一個(gè)唯一的資源標(biāo)識(shí)符（Uniform Resource Identifier，URI）標(biāo)識(shí)。標(biāo)準(zhǔn)REST 式Web服務(wù)的實(shí)現(xiàn)應(yīng)該遵循以下基本設(shè)計(jì)原則：1）顯示地使用HTTP方法；2）無(wú)狀態(tài)；3）公開(kāi)目錄結(jié)構(gòu)式的URI[6]。

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

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

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

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

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

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

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

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

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

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

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

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

3.3二維符號(hào)繪制方法

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

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

圖3 二維符號(hào)繪制流程圖

3.4三維符號(hào)繪制方法

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

圖4 三維符號(hào)繪制流程圖

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

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

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

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

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

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

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

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

圖7 二三維一體效果圖

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

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

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

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

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

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

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

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

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

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

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

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

[11] 魏麗, 王玉玫, 聶穎. 基于win7多點(diǎn)觸控的標(biāo)繪技術(shù)設(shè)計(jì)與實(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ì)算機(jī)圖形應(yīng)用；仇建偉，男，研究院級(jí)高級(jí)工程師，主要研究方向：網(wǎng)絡(luò)與分布式多媒體協(xié)同技術(shù)。

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