基于浏览器的二三维一体标图技术研究与实现

于 佳，仇建伟

基于浏览器的二三维一体标图技术研究与实现

于 佳，仇建伟

（华北计算技术研究所，北京 100083）

为了实现在Web环境下进行二三维标图的需求，在研究了基于HTML5新特性的二三维图形绘制技术后，提出了一种面向浏览器的二三维一体标图应用的实现方案。基于MVC架构模式，使用HTML5的Canvas特性作为标图应用二维视图呈现，以开源三维GIS引擎Cesium作为辅助手段实现标图应用中三维场景渲染。以事件驱动方式实现标绘过程中图形的更改处理。后台通过REST式服务接口提供服务器端数据访问。

标图系统；二三维一体；MVC；浏览器

0 引言

标图应用是图形数据处理和要图标绘平台，是作战指挥人员必备的作业工具。自20世纪80年代初我军第一个标图系统诞生以来，基于桌面环境的二三维图形标绘系统已发展得较为成熟。随着互联网技术的快速发展和互联网产品的普遍应用，Web应用在灵活性和易操作性上越来越显示出其较于桌面应用的优势。在作战方面，标图处理系统朝着网络化方向发展将会在日益复杂的战场环境中使得作战指挥人员更易于使用。基于HTML5的画布（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式的标图系统以符号处理库、符号库以及地理信息系统作为底层支撑服务，在支撑服务基础上建立符号绘制服务和符号数据服务，地理信息服务直接继承自底层。客户端浏览器通过网络请求标图应用系统REST服务可以进行以下几方面操作：

（1）访问地理信息服务，操作二维地图和三维地球；

（2）访问符号数据服务，在符号面板中加载符号库中符号数据；

（3）点击标绘面板中某个符号，通过鼠标交互实现在二维地图和三维地球上绘制相应符号的功能。

每个符号都具有描述信息，描述信息是一个访问符号绘制服务后返回的字符串，其中记录了绘制相应符号所用的数据和需要遵守的规则。浏览器绘制符号前需要对描述信息进行解析，分离出所需数据并按照约定的规则才能够将符号正确的绘制出来。

3.2基于MVC模式的二三维标图应用设计

本系统采用MVC架构模式实现应用系统软件，系统软件分为模型（Model）、视图（View）和控制器（Controller）三个模块。模型是应用的数据核心部分，为视图和控制器提供数据支持；视图是应用的显示层，用于展现应用界面；控制器是应用的控制中心，它从视图获取用户输入，将其转发给模型以对用户请求进行处理，最后将模型处理的结果反馈给视图进行展示。MVC架构实现了数据与视图相互分离，且一份数据能够支持多个视图的显示，视图之间互不影响。这种架构模式为实现二三维一体的标图系统提供了有力支撑[9]。

在本系统中，视图模块分别对应浏览器中二维、三维标绘页面，用于符号的二维和三维显示和用户交互。模型模块由两部分组成，包括绘制在浏览器中的符号对象和后台REST服务。控制器模块负责接收符号绘制、移动、编辑等一系列操作，并将操作请求发送给后台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实现地球展现与符号绘制。客户端浏览器在二维或三维场景下向服务器请求符号数据，服务器根据请求参数通过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