要： 在WebGIS的浏览器端存在绘图效率差、不能直接支持矢量绘图等问题。为提高客户端的交互性和实时性，在解决浏览器不支持矢量绘图和渲染速度慢、存储空间小、传输速率慢这些问题的基础上，结合HTML5中的Canvas、WebSocket、WebStorage技术，构建了WebGIS实时客户端，有效地改善了客户端存在的问题，改善用户的体验。

0 引言

WebGIS是GIS技术与Internet的结合体，是对网络GIS的发展，它将GIS从一种使用计算机的处理地理信息的系统工具，变为一种网络共享资源，提高了地理信息的使用效率，使地理信息的价值得以充分体现[1]。WebGIS的实现手段主要是基于Web技术的多级B/S体系结构，即浏览器、GIS服务器、数据库等。B/S模式的构架简化了客户端系统的部署，降低了用户使用难度，同时也极大提高了系统的可维护性[2]。但是这种被动的工作模式无法满足用户实时性的需求。对于WebGIS的架构研究，以前主要是对服务器端技术的改进，如使用CGI、Server API等服务端技术，但是这些技术对于服务器及网络的要求较高。随着客户端技术的发展，Java Applet技术、Plug-in技术、Ajax技术的出现扩展了客户端的功能，但是用户需要预先安装这些插件，安装插件带来了一定的安全隐患和不方便性。对比这两种形式，使用HTML5的新技术实现的功能并不需要插件支持，且其本地存储功能和高效率的双向通信功能，还有动态快速绘图功能的提出，使实时客户端的实现成为可能。

1 实时客户端的WebGIS系统结构

HTML5是W3C推出的新标准，其强大功能已经被大部分的浏览器支持，同时，相对于以前的版本，HTML5的改变不仅仅是使用更方便。第一，它新增了更具有语义化的标签和使用更智能化的表单；第二，HTML5还新增了许多JavaScript API，如实时绘图（Canvas和SVG）、离线存储（WebStorage）、实时通信（WebSocket）API等，这些API为实现实时客户端提供了可能。用HTML5来实现WebGIS有地图无限缩放而图不失真，地图的显示渲染效果逼真的优势；且支持JavaScript脚本实现地图的漫游、缩放、查询等功能，这些功能都无需插件支持并可在不同平台与设备上运行[3]。根据这些特性，本文在传统架构的基础上，构建了图1所示的WebGIS实时客户端。

在客户端这些模块中使用HTML5和JavaScript技术，实现数据地图的绘制、本地存储、数据传输等功能，将部分简单的功能交给客户端完成，增加了WebGIS客户端的交互能力，减少了服务器的传输压力，也增加了数据传输的效率，实现了客户端的实时性。

2 WebGIS客户端的具体设计

2.1 数据实时更新与传输设计

空间数据格式有栅格数据和矢量数据。栅格数据交互性能差，可用来展示空间数据，矢量数据交互性较好，可用来表示空间对象，但是客户端不能直接支持矢量数据的二进制格式传输，所以数据在传输中就要进行格式编码，目前使用的比较多的数据传输格式是GeoJSON（基于JSON数据格式的地理要素表示格式）。JSON（JavaScript Object Notation）是轻量级数据交换格式，适合于服务器与浏览器（通过JavaScript）交互[4]，在浏览器端JSON能够简单快速地解析成可以被客户端操作的JavaScript地理信息，不需要使用专门的文本解析API进行操作。空间数据传输大多使用Ajax的异步传输方式，但Ajax轮询方式的时延较长，传输的实时性不高，因此将Ajax用于地图数据的推送。实时性方面还是需要HTML5的WebSocket API实现。WebSocket使浏览器具有客户机/服务器（C/S）模式下应用程序的实时通信能力[5]。WebSocket的优势有：（1）为浏览器和服务器之间建立的更高效的双向通信提供支持。其连接本质为TCP连接，因此浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，onopen事件接收消息，连接建立以后，客户端和服务器端就可通过TCP连接直接交换数据。（2）WebSocket有更为轻量级的Header，除了首次建立链接时需要发送头部与普通Web链接类似的数据之外，连接建立后，相互沟通的Header就会很简洁，大大减少了冗余的数据传输[6]；通过新建WebSocket实例建立握手并完成与服务器的连接，建立好连接之后数据就可以以全双工模式在客户端与服务器之间进行双向传输，并一直保持连接，直到用户主动关闭[3]。图2是传统传输方式与WebSocket传输方式数据量的对比，从结果可以看出，当传输数据量增大时，WebSocket的效率更高。

需要在服务器端安装开源的WebSocket支持数据库，如Node.js、LibWebSockets、PHP WebSocket Server等，以调用接口使用。具体传输过程是：GIS服务器从空间数据库获取数据，将空间数据解析成JSON的格式，然后发送到已经与WebSocket服务器连接的客户端，客户端WebSocket实例的onmessage事件接收数据并使用JSON.parse函数将JSON字符串解析成JavaScript对象，再根据对象的内容在WebGIS的地图中解析显示。WebSocket API一个显著特点是，连接建立后，服务器可主动推送消息。支持WebSocket协议的服务端接受请求和处理WebSocket任务，在客户端可用WebStorage存储模块缓存传输过来的数据，WebSocket的中间传输机制就实现了数据实时更新。

2.2 客户端空间数据缓存设计

客户端缓存功能主要是由WebStorage API来实现，WebStorage API是以Key-Value形式来进行数据的持久性存储。传统客户端一般是使用Cookie存储数据，但是它效率低，存储空间小，不能满足大量矢量数据的存储。WebStorage提供的两种存储方式可以改善这个状况，一种是SessionStorage，它是一种会话级别的存储方式，存储的数据只在当前页面有效，当页面关闭时，数据也会随之删除，据此SessionStorage可以用在矢量图绘制的缓存方面，即让SessionStorage自动缓存解析好的JSON格式的矢量层数据，当需要数据时直接从SessionStorage中提取JSON数据，这比从空间数据库中获取再解析效率明显更高，数据显示模块可以直接从中获取数据进行绘制。另一种方式是LocalStorage，它是一个跨多窗口且数据永久存储的方式，只有使用清除函数clear、removeItem或手动删除数据时数据才会从浏览器中清除，同时它的数据可以在同源的窗口或标签共享使用。因此它可以用来永久存储空间分析后的数据或服务器发送的数据和用户数据，下次用户打开浏览器可直接使用这些数据。图3是具体矢量数据本地存储过程。将数据缓存到本地，不用与服务器发生交互，客户端存储的数据可以由JavaScript访问。

WebStorage存储技术和WebSocket技术可结合使用并与JavaScript一起实现数据的实时更新，减轻服务器压力。用户发送数据请求后，WebSocket建立连接，将得到的数据解析后存储在WebStorage预先定义好的空间中，等待用户提取。对于常须更新地图数据的操作采用这种预先存储的方式，可以加快数据的渲染效率。为了提高图3的实时更新效果，可以设定异步存储机制，过程如下：（1）创建并初始化WebStorage对象，设置缓存区大小（缓存区分段）；（2）用户发出消息，触发onopen事件；（3）为WebSocket对象的信息添加侦听器；（4）服务器调用received函数处理事件；（5）客户端接收服务器发送的消息，触发缓存判断函数，判断缓存大小，如果超出，设置缓存片段的编号，对象异步sends数据请求服务器处理；（6）服务器将片段编号入队（服务端设置），直到传输完成，清除编号。这种传输方式将进一步减少网络流量，减少服务器的负载，提升传输效率。

2.3 数据显示设计

HTML5现提供了Canvas API，它可以解决传统开发浏览器支持度差、跨平台性不强和绘制矢量图形需要插件的问题，通过JavaScript在浏览器不依赖任何插件的情况下高效地绘制动态图形[7]，避免了安装插件带来安全风险。

2.3.1 绘制方法

Canvas API使用比较简单，像其他HTML标签一样，只需在HTML5的页面中添加一个<canvas>元素即可。Canvas绘图首先要获得上下文（context），因为Canvas自己本身并没有绘图能力，所以所有的绘图工作要由JavaScript完成。它的工作过程为：先定义Canvas元素的id，然后通过getElementById函数找到自己前面创建好的Canvas元素，最后用JavaScript调用绘图API接口得到上下文绘图环境后就可在画布上绘制任何的图形了。但Canvas只支持一种基本图形——矩形，想使用Canvas绘制其他的图形，就要使用其提供的路径（Path）绘制函数[8]，使用beginPath开始绘制，使用moveTo、lineTo绘制直线，绘制完毕后调用fill、stroke进行填充或者设置边框，最后调用closePath结束图形绘制。Canvas在矢量数据方面是像素级管理，Canvas的路径操作能充分满足矢量数据中的点要素、线要素、面要素以及符号的表达要求。

2.3.2 数据显示过程

用Canvas与JavaScript技术实现地图实时绘制。地理实体对象可以根据OGC的简单要素规范和GIS界的研究将其分为：点状实体、线状实体、面状实体、标注实体和栅格实体[3]。Canvas可直接使用这些实体，对于栅格实体，可以用JavaScript对象表示，通过API drawImage直接在HTML5 Canvas中绘制。矢量实体的地理要素从GeoJSON文本转化为JavaScript对象，根据该对象的信息，调用坐标转换对象，将坐标转换成Canvas元素里的屏幕坐标来对应显示要素。实现实时绘图的流程为：（1）服务器从数据库获取数据；（2）数据进行JSON格式解析；（3）浏览器加载地图，调用Canvas画布及函数实现绘图和地图的显示；（4）地图操作由自定义脚本实现地图渲染。Canvas在客户端展现地理数据的灵活性与互操作性要优于传统的切片技术，并且在地图加载速度方面有明显的优势[8]，因此将Canvas和WebStorage结合起来，可以提高实时性能，将要显示或者要存储的数据先经过缓存，再进行显示或存储，这种机制效率明显更高。图4说明了从数据推送到显示的流程。

3 客户端整体过程

Canvas实现实时绘图和快速渲染，WebSocket API在通信方面提供了支持。WebStorage提供了客户端的本地存储技术，以地图放大操作为例，用户提交请求，数据获取函数可以从SessionStorage中获取数据，然后将缓存的数据转换成JavaScript对象，最后通过Canvas直接添加在地图中，同时，缓存中的数据不断更新。WebSocket的双向通信机制和WebStorage的异步存储机制加速了数据交换效率，空间数据库也通过WebGIS服务器，在实时通信的基础上，将数据以JSON文本格式传输到客户端，存入SessionStorage中，窗口关闭后，所有数据存入LocalStorage，供用户下次直接使用。这种方式的效率很明显会比从服务器获取数据的方式高，实时性要好，如需要执行其他的交互操作，也可以基于这种方式实现。

4 结论

随着Web技术的发展，客户端的交互性和实时性要求不断提升，据此，本文将HTML5的新特性与JavaScript技术结合，在WebSocket双向通信机制和WebStorage缓存机制实现异步存储提供的数据支撑，Canvas能实现动态绘图和快速渲染的基础上，提出了一种实时性更强的WebGIS客户端，为建立实时的WebGIS客户端提供了一种方案。HTML5中的新技术虽然强大，还是有需要加强的地方，WebStorage让数据能够缓存在本地，但是由于是存储在本地，数据容易泄漏，安全性还有欠缺。未来WebGIS的发展会随着数据量的增大实现云平台化，资源更庞大，数据更易共享，用户使用起来也会更方便。

参考文献

[1] 孟令奎，史文中，张鹏林，等.网络地理信息系统原理与技术[M].北京：科学出版社，2010.

[2] 李博霏，李欣，李艳明.基于浏览器的地理信息服务客户端技术研究[J].计算机工程与设计，2011（9）：3031-3035.

[3] 龙云.基于HTML5的WebGIS研究[D].赣州：江西理工大学，2013.

[4] CROCKFORD D. The application/json media type for JavaScript Object Notation（JSON）[EB/OL]. [2006-07]. http：//tools.ietf.org/html/rfc4627.

[5] 徐卓揆.基于HTML5、Ajax和Web Service的WebGIS研究[J].测绘科学，2012，37（1）：145-147.

[6] 魏进锋，孙春华.应用HTML5的WebSocket实现BiDirection数据交换[EB/OL].[2012-12-28]（2015-02-25）.http：//www.ibm.com/developerworks/cn/web/1112_weijf_websocket/.

[7] 王晓.基于HTML5的矢量地图发布关键技术研究[D].南京：南京师范大学，2011.

[8] 梁春雨，李新通.使用HTML5 Canvas构建基于GeoJSON的轻量级WebGIS[J].计算机科学与应用，2012（2）：189-196.

TML5引入了一种新的Web SQL数据库，它允许我们在浏览器中使用SQL语言进行数据存储和管理，而无需依赖于传统的服务器端数据库。这种新方法提供了一种简单、轻量级的方式来处理客户端数据，并且在离线状态下也能正常工作。以下是一些常用的HTML5 Web SQL数据库技术及其代码示例：

1. 打开数据库

打开Web SQL数据库并指定数据库的名称和版本。如果数据库不存在，则会创建一个新的数据库。

```javascript

var db = openDatabase('myDatabase', '1.0', 'My Database', 2 * 1024 * 1024);

```

2. 创建表

使用SQL语句在数据库中创建表格。以下是一个创建用户表的示例代码：

```javascript

db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)');
});

```

3. 插入数据

使用SQL语句向表中插入数据。以下是一个向用户表插入数据的示例代码：

```javascript

db.transaction(function(tx) {
tx.executeSql('INSERT INTO users (name, email) VALUES (?, ?)', ['John Doe', 'john@example.com']);
});

```

4. 查询数据

使用SQL语句从表中查询数据。以下是一个查询所有用户数据的示例代码：

```javascript

db.transaction(function(tx) {
tx.executeSql('SELECT * FROM users', [], function(tx, result) {
var rows = result.rows;

for (var i = 0; i < rows.length; i++) {
var user = rows.item(i);
console.log(user.name, user.email);
}
});
});

```

通过使用HTML5 Web SQL数据库，我们可以在浏览器中轻松地进行数据存储和管理。无论是创建表、插入数据还是查询数据，这种新方法提供了一种简单而强大的方式来处理客户端数据。记住，在使用HTML5 Web SQL数据库时，要熟悉SQL语言，并合理管理数据库的结构和数据。

我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！