基于HTML5的WebGIS前端要素绘制性能优化研究

传统地，客户端矢量绘图技术采取插件机制的形式实现，但需要承担浏览器禁用插件的风险，针对这种弊端，文中提出现代浏览器中的绘图技术即HTML5 Canvas绘图技术，利用HTML5 Canvas实现WebGIS中地理要素的展示与交互，给出绘制矢量要素以及复杂岛洞要素的实现过程，并进一步对Canvas绘图性能的影响因素进行分析，主要是从不同要素数量、要素结点数、要素绘制样式、不同浏览器四个方面对比绘图性能，并利用性能分析工具找出绘制性能的瓶颈，对绘图性能进行优化。最后，将此绘图技术成功运用在两个案例中，具有良好的绘图效果。

随着互联网技术的快速发展， 在客户端进行数据的图形化展示与交互也受到越来越多的关注。

其中， WebGIS [1]中的地理要素的可视化显示，也需要在客户端对点、线、面、以及复杂地理要素进行绘制与编辑等交互操作。现有WebGIS 系统中在客户端实现矢量绘图技术根据其底层实现机制，主要分为两类[2]：一种是外部代码载入方式如Flash、Applet、SilverLight 等， 一种是浏览器原生支持的方式如Canvas、SVG、VML 等。第一种方式因为要导入外部执行环境，通常要安装插件，而在浏览器禁用插件后，相关的功能也会受到影响，有一定风险。相比较而言，后一种方式则直接由浏览器原生支持，但在浏览器支持性以及绘图效率等方面也有较大差异。

VML (Vector Markup Language，矢量可标记语言)是一种基于XML 描述的矢量图形，支持高质量的图形显示。

在WebGIS 客户端引入VML， 可以弥补WebGIS 中绘图的诸多不足， 它作为IE 浏览器内置的绘制工具， 无需任何额外的组件，不仅提高了开发进度，而且增强了系统的适用性[3]。但它仅被IE 支持，存在很大的兼容性问题，并且在高版本的IE 浏览器(IE10)中也逐渐淡化VML，开始使用SVG 替代VML 进行矢量绘图。

SVG 指可缩放矢量图形(Scalable Vector Graphics)， 也是基于XML 的， 支持DOM 事件模型， 具有良好的交互性。但在绘制对象数量较多时，DOM 操作会严重影响性能。并且它不支持绘制png、jpg 等格式的图片，绘制的图形也无法导出成图片。

HTML5 Canvas [4]是W3C 推出的新一代浏览器端绘图API， 它是基于像素级的绘图技术， 支持图像像素操作，能够绘制路径和栅格图像，绘制后的对象可以转成base64 编码，在前端保存为png、jpg 图片。目前， 主流浏览器都支持Canvas， IE8 之前的版本也可通过ecxcanvas.js 插件实现。

许多客户端图表也是基于Canvas实现的[5] [6]，如一些插件echarts、CanvasXPress、AwesomeChartJS、RGraph 等都是基于Canvas 实现的。而且随着HTML5 标准的规范化，HTML5 技术日趋成熟，使用Canvas 进行前端矢量绘图也成为一种趋势。

Canvas 除了用于基本的图形展示外，还可用于WebGIS 中空间要素的显示与表达[7]，实现地图数据的显示和交互， 尤其是在要素量较大的情况， 绘制效率远高于SVG。

对基本的点、线、面的表达， Canvas API 中提供了相关的接口，但对复杂地理要素诸如多线、多面、岛洞多边形等并没有提供绘图接口。而