基于HTML5的WebGIS前端要素绘制性能优化研究
Research on the Performance Optimization of Drawing Front-End Vector Features Based on WebGIS of HTML5

作者: 李翠 , 李治洪 * , 周力杰 :华东师范大学地理科学学院,地理信息科学教育部重点实验室,上海;

关键词: HTML5 CanvasWebGIS岛洞要素绘图性能性能优化HTML5 Canvas WebGIS Island or Hole Features Drawing Performance Performance Optimization

摘要: 传统地,客户端矢量绘图技术采取插件机制的形式实现,但需要承担浏览器禁用插件的风险,针对这种弊端,文中提出现代浏览器中的绘图技术即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.

文章引用: 李翠 , 李治洪 , 周力杰 (2016) 基于HTML5的WebGIS前端要素绘制性能优化研究。 计算机科学与应用, 6, 9-20. doi: 10.12677/CSA.2016.61002

参考文献

[1] 李治洪. WebGIS原理与实践[M]. 北京: 高等教育出版社, 2011: 269-292.

[2] 廖明, 潘媛芳. WebGIS矢量地图绘制方法的性能分析与比较WebGIS的技术方案[C]. 《测绘通报》测绘科学前沿技术论坛摘要集, 2008.

[3] 蔡锦辉, 陆明典. 用VML构建基于WebGIS的交通气象服务系统[J]. 气象研究与应用, 2014, 35(2): 60-62.

[4] Fulton, S. HTML5 Canvas开发详解[M]. 任旻, 王洋, 等, 译. 北京: 人民邮电出版, 2014: 17-165.

[5] 龚丽. HTML5中的Canvas绘图研究[J]. 软件导刊, 2014, 13(4): 151-153.

[6] 谷伟. 基于HTML5 Canvas的客户端图表技术研究[J]. 信息技术, 2013(9): 107-110.

[7] 徐莎, 杨帆, 徐昌庆. 基于HTML5的WebGIS的研究与应用[J]. 信息技术, 2012(4): 149-151.

[8] 陆凌牛. HTML5与CSS3权威指南[M]. 北京: 机械工业出版社, 2013: 49-205.

[9] Zakas, N.C. (2010) High Performance JavaScript. O’Reilly Media, Sebastopol, 61-80.

[10] 丁扬. 上海市农用地数据在线采集系统研究[D]: [硕士学位论文]. 上海: 华东师范大学, 2015.

[11] 地理大数据协同创新平台[DB/OL]. https://ccgis.cn/mapb/, 2015-7.

[12] 朱文. 基于HTML5的2D动画的设计与实现[D]: [硕士学位论文]. 广州: 中山大学, 2013.

分享
Top