摘 要： 目前，主流的客户端缓存地图切片技术都是基于C/S结构，这种技术在移动设备的地图APP程序中应用较广泛。B/S结构由于安全机制的限制，不能够在客户端存储大容量的文件，这一特点严重阻碍了基于WebGIS技术的地图应用程序的发展。最新的HTML5文件系统API技术能够实现在客户端存储大批量文件，可以将海量地图切片缓存到用户的电脑硬盘或者移动设备中，在需要访问地图时从客户端调出使用。基于该功能，用户在B/S结构下将地图切片缓存到客户端，在离线环境中浏览预先存储好的地图数据，缩短系统的响应时间，改善用户体验。
关键词： HTML5技术; 网络地理信息系统;地图切片预存储;离线浏览;客户端缓存;B/S结构
0 引言
近年来随着移动设备的快速普及，出现了很多基于C/S模式的地图应用程序，并实现了下载离线地图数据的功能，方便了人们的生活。离线浏览地图切片功能是指把事先下载好的地图切片放在离线环境中使用[1]。离线情况大致可以分为以下几种：笔记本电脑或手机在“飞行模式”时、Web应用无法与服务器正常通信、野外移动设备网络信号弱或不稳定等。有两种形式在离线情况下存储地图：第一种是在网速正常的情况下预先下载地图切片，地图切片被存储到客户端，当用户在野外网络信号弱时，系统会从客户端取出地图切片的信息，供用户浏览地图 [2]。还有一种是在浏览地图的过程中，程序自发地存储浏览过的地图，被保存过的地图可以重复浏览，不需要与服务器端交互，系统反应的时间变短，节省了用户大量的宽带流量[3]。后者使用更加普遍，这种被动智能化存储，可以增强用户体验，让浏览地图变得更加快捷[2]。
上述离线浏览地图切片功能都是基于C/S模式的开发技术，运行在B/S模式中的WEB应用程序由于受到安全因素的限制[2]，不能进行大容量文件的本地存储。与同类产品相比，离线情况下无法使用地图已经成为了Web程序的一大缺陷，使WebGIS的发展受到了极大的限制[4]。
HTML5有关文件系统标准的出现，填补了Web应用程序不能在客户端上存储大文件的空白[1]。尽管处于安全的考虑，HTML5对这一功能有一定的限制，不能自由地去访问客户端的文件系统，但是文件API标准已经足以解决在客户端缓存地图切片的难题[5]。
1 系统原理
1.1 地图切片主要参数
自Google Maps推出地图切片以来，WebGIS得到了空前的发展[4]。地图切片主要是指按照分辨率等级的不同，将原先动态生成的地图图片提前保存为静态图片，存储在服务器上，等到用户浏览地图时，服务器将静态图片传送到客户端浏览器中。地图切片有效缩短了服务器端动态生成地图的时间和网络传送图片的时间，提高系统响应速度[5]。
在用户与地图进行交互的那一片区域（简单称为地图窗口[6]）有几个重要的参数，包括：当前窗口的宽高、中心点坐标和zoom值，这些参数的变化决定地图切片的选取。
1.2 系统流程
典型的WebGIS系统如图1所示，通常由两部分组成[7]，即客户端地图操作和服务器端数据返回。当用户进行浏览操作时，客户端程序会判断用户的操作，把当前窗口的宽高、中心点坐标和zoom值发送给服务器端。地图服务器根据传送过来的参数值计算出所有地图切片的编号，返回给客户端，客户端程序根据地图编号，以异步的方式访问地图切片的URL，浏览器绘制出图片给用户。上述流程中，客户端与服务器发生了两次交互，一次是请求地图切片编号，还有一次是获取地图图片。这两步过程都决定了传统WebGIS系统无法在离线环境中使用，并且经过实验得知，服务器端获取图片这一过程，对网络速度的要求极高，当该系统在网络信号不好的移动端使用时，地图操作的响应速度极慢，网页加载地图时间漫长，由此可以得出结论，传统WebGIS在网速较差的环境中几乎无法使用。
本项目中改变了传统WebGIS系统中地图操作后系统响应的方式，即在客户端增加了地图切片预存储功能，如图2所示。客户端的浏览器不再把地图窗口参数发送给服务器，而是直接在前端计算出地图切片的编号信息，根据编号信息从文件沙箱中取出相应图片的内容，所有过程在前端脚本中完成，实现了离线方式操作地图，使用这种方式将会使系统响应速度变得更快。根据实验得知，地图切片交互时所需的宽带数据量占整个系统中的绝大部分，所以当地图切片放在离线环节时，即使在网络速度不佳的野外，当请求数据量适中的矢量图形或者打开网页图片时，也不会影响系统的整体运行，经过改变系统响应方式的新系统在网速不佳的情况下也能正常使用[8]。
2 系统实现
2.1 地图切片预存储
本项目用到的地图切片为上海市航拍影像图，按分辨率的不同共分为6个等级，这里把文件系统的目录结构分成6个主目录。而每一级切片下，又细分出了A、B、C、D 4个子文件夹。在非离线情况下系统访问地图切片时的文件夹管理结构如图3所示。文件API具有特殊管理机制，保存文件前需要设定虚拟的文件夹结构来管理本机上的文件对象，文件对象中的文本信息具有严格的编码格式，可以防止数据的意外泄露。本系统所创建虚拟文件夹路径与真实路径保持统一，减少中间过程的转换计算，具体可设定为Map/A1/A/A001_002.jpg。具体的路径加上文件名，构成了唯一的键名，保证了离线系统中地图信息的准确性[9]。
文件API支持文字信息的存储，单个图片信息以Base64的文字编码方式保存下来。根据用户的需求针对某个乡镇进行下载，利用本系统中的geoserver平台可以查询到指定区县或乡镇下所有切片的名称tileName和切片等级Level，根据文件夹结构可计算出该切片的文件路径Path。返回的Path代表了文件存放的具体位置，使用PHP技术将名称为tileName的切片颜色信息提取出来，通过网络传输到客户端以文件API形式保存[10]。下载地图切片信息的过程如图4所示。
2.2 地图切片离线浏览
本项目所使用到的WebGIS系统是基于实验室自主研发的Geoserver平台，所有后台数据以及地图信息的交互都是基于该平台，并非市场上流行的ArcGIS Server平台[3]。在调用地图切片环节中，地图切片的编号都是使用Geoserver平台计算，具有较强的创新性和自主性[6]。在离线浏览切片地图时，系统得到的地图切片编号也就是存放在服务器中的静态图片的URL地址，可以根据原来的URL地址，使用文件API来访问具有相同文件结构的客户端地图切片[7]。保存在文件系统的格式为Base64编码的文本信息，直接将切片容器中的src指向这段编码信息，浏览器就能绘制出正确图片。文件系统可以保存硬盘容量内的任意大小的文件，保证了海量切片的批量存储，并且单个切片信息存取速度快，操作简单，这些特点为离线切片的存取创造了良好的条件。
3 系统性能
为了测试离线模式给系统交互有效性带来的提高，现在对离线和在线两种模式的地图响应速度进行测试。测试所使用的电脑硬件配置为Intel 3.30 GHz双核CPU和4 GB内存。
网络情况正常的情况下，在PC端进行1 000次的地图操作，并对30张和100张不同数量级的切片进行比较，把缩放和平移之后系统响应切片的等待时间记录下来，此过程由专门开发的程序实现，测试结果如表1所示。从表1中可以看出，30张切片时离线中的切片等待时间大约为在线情况下的1/15，而当切片增加到100张时，系统的响应速度得到了极大的提高[8]。
由此可见，地图简单操作时，系统响应切片花费在网络上的时间过多，而通过预存切片的方式可以减少网络的通信时间，并且可预知在野外当网络速度缓慢时使用系统，在线模式的响应时间可令系统无法使用或浏览器崩溃。
4 总结
本系统是一个基于B/S结构的多功能系统，旨在结合遥感照片人工采集上海市农业信息的数据。离线浏览地图切片的难题是本文探讨的重点，Web浏览器对用户本地文件读写的支持，极大地促进了WebGIS系统的发展，有助于方便地开发出更丰富的应用，许多只能在C/S结构上才能完成的功能，如今在Web应用程序上也能够完成[11]。
离线浏览地图切片以及地图切片预存储这两大功能，很好地促进了WebGIS的发展，在今后富客户端的趋势下，许多工作都可以放到前端来完成，这样带来的好处是，地图的交互速度将会更快，同时，这种方式还可以消除周围环境的影响，例如网速的强弱和稳定性，甚至在完全没有网络的情况下，如在野外、海上远行、飞机起降时，用户可以照常工作，等到有需要时再将电脑或移动设备中的数据进行上传或更新。
参考文献
[1] 陆凌牛. HTML5与CSS3权威指南[M]. 北京:机械工业出版社, 2013.
[2] 刘琦,潘瑜春,王雪峰，等. 基于B/S模式的WebGIS应用系统研究[J].计算机工程与应用, 2004（20）:177-179.
[3] 李治洪. WebGIS原理与实践[M].北京：高等教育出版社， 2009.
[4] 李学俊,王尊亮,李晓欢，等. 基于地图切片预取的WebGIS系统[J].计算机应用研究,2009,26(10):3849-3851.
[5] 陈方圆,李治洪,谢文明，等. 基于Linux的能源与环境监测WebGIS[J].计算机工程,2011,37(24):247-250.
[6] 周牧,谈晓军,左翔，等. 基于AJAX和XML的WebGIS系统研究[J].计算机工程,2009,35(13):271-273.
[7] 黄祥志,刘南,刘仁义，等. 适用于可编辑WebGIS的动态缓存策略[J].计算机工程,2011,37(5):285-287.
[8] 毕建涛,王雷,池天河，等.基于Web Service的地理信息服务研究[J].计算机科学,2004,31(1):69-71.
[9] Thein T, Park J S. Availability analysis of application servers using software rejuvenation and virtualization[J]. Journal of Computer Science and Technology,2009,24(2):339-346.
[10] Silva L M, Alonso J, Torres J, et al. Using virtualization to improve software rejuvenation[J]. IEEE Transactions on Computers,2009,58(11):1525-1538.
[11] 罗英伟,汪小林,许卓群，等.层次化WebGIS构建系统的设计与实现[J].计算机学报,2004,27(2):177-185.
[12] Yang Chaowei, Michael G, Huang Qunying, et al. Spatial cloud computing: how can the geospatial sciences use and help shape cloud computing[J]. International Journal of Digital Earth, 2011,4(4):305-329.