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

　　关键词： HTML5；Canvas；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实时客户端。

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.