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

Research on the Performance Optimization of Drawing Front-End Vector Features Based on WebGIS of HTML5

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

Abstract: Traditionally, the client vector graphics technology is implemented via plug-ins, but at the risk of the browser disabling the plug-ins. To solve this problem, this paper puts forward the HTML5 Canvas drawing technology based on modern browsers, achieves visualization and interaction of geographical features in WebGIS based on HTML5 Canvas, gives the realization process of drawing vector features and complex island or hole features, and further analyzes the influence factors of Canvas graphics performance mainly from four aspects: the amount of features, features’ nodes, drawing style and browser difference. And then the performance analysis tool is used to find the bottleneck and make the performance optimizations of drawing features. Finally, this technology is applied to two cases successfully with good drawing effects.