基于HTML5地图呈现技术发展趋势分析.docxVIP

基于HTML5的地图呈现技术的发展趋势分析1引言互联网的应用正处在一个中间过渡时期，这主要是由于HTML5的采用将使互联网的功能由简单的文字呈现进化到丰富的用户在线应用时代。在这之前，大部分在线应用主要基于第三方商业公司开发的独占技术（proprietary technologies），这些技术的垄断不光有违HTML标准最初的开放原则，还在很大程度上分裂了互联网的开发技术。而作为起步比较晚但用户采用量较大的在线地图应用则处于更加尴尬的境地。为了零插件（Plugin-free）的用户体验，地图应用商决定不依赖任何第三方技术，然而HTML标准本身的接口局限导致了传统网络地图不光耗费服务器资源，加重网络传输的负担，还在用户体验上难以获得突破。这样的困境迫使网络地图服务开发者主动寻求新的技术革新。在HTML5规范日趋稳定并且大量浏览器开始支持的背景下，将HTML5的新特性用于网络地图呈现的技术中是水道渠成的技术演进。2 传统地图显示技术的局限性在HTML5的新标签带来技术变革之前，目前的网络地图显示技术，也就是我们在PC上进入google地图或者百度地图所看到的那样其实存在着由于自身技术导致的无法避免的缺陷。当前的网络地图服务的工作原理基本是一致的：首先由用户端的浏览器发送浏览请求，服务器在得到预加载的经纬度和地图比例等数据之后，在其数据库中找到相应地图数据，接着在服务器端通过转换机制将大部分地图数据转化成较小的地图块（通常是256*256像素的， tile），完成这些之后将地图块以png（Portable Network Graphics），jpg（Joint Photographic Experts Group image format）或GIF（Graphics Interchange Format）等图片格式的文件传回至用户的浏览器上，浏览器按照地图块的编码获取其在页面上的显示位置然后在该位置上显示地图块。当所有的地图块都从服务器端传至浏览器后，浏览器通过“贴图片”的原理，用户看到的地图是完整的，无缝的。这个通过地图块来实现的显示过程在单一的信息集下工作得很好，比如如果地图只显示地形轮廓，那么只要服务器在首次请求中传回分辨率足够高的地图块，用户之后的缩放操作并不会影响其使用体验。但是，如果更多种类的信息被添加在地图上，那么地图就会被这些信息覆盖得面目全非（见图1）。图1 传统网络地图的弱点这样的一次性加载不仅破坏了用户的使用体验，更关键的是由于实际应用中地图数据是巨大的，若由一次请求传回所有数据首先服务器的运算能力局限了其产生超高分辨率的地图块的能力，另外单次传输导致网络的传输压力过大。事实上服务器的运算能力和网络的带宽限制正是商用互联网服务的短板，所以传统网络地图的规避办法是分层加载，也就是通过地图比例分层显示地图信息，这样就要求浏览器在每次用户进行缩放操作的时候都对服务器发送重新加载的请求，而服务器通过地图比例重新生成地图块并附带上该层次上的地图信息。所以实际使用经验是，当你在看国家的版图时，你不能在地图上看到一条小巷。而这样的规避办法虽然减轻了单次传输的带宽压力，但需要服务器的多次运算，生成的地图块有时是毫无作用的。此外，由于地图块都是在服务器端生成的，所以大部分网络地图在呈现之后都是不能被用户修改的，地图的互动性不好。3 HTML5带来的新变化-Canvas元素的简单介绍Canvas元素是HTML5提出的新标签之一。开发者可以通过脚本语言，如Javascript在Canvas中画出图形[1]。这一技术最早是由苹果公司提出的，被用于Mac OS的Dashboard 和Safari浏览器。之后便被更多主流浏览器（Firefox，Opera以及Chrome）所采用。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。目前Canvas已经成为HTML 5草案中一个正式的标签 。在这之前，如果开发者需要在用户的浏览器上展示二维的图像或动画则需要为页面贴上Object标签并借助第三方占有的技术如flash，gears等。Canvas相较于之前的做法的优势除了体现在技术开放上，非常关键的是，通过使用Canvas标签，图像或者动画的渲染可以直接在客户端完成，而不需要在服务器端的预加工。这个特点恰好避开了目前商用服务器运算速度不足和带宽有限的弱点。在后文可以看到，目前利用Canvas发展起来的新技术最主要都集中在地图领域，可以说Canvas的出现直接导致了地图显示