基于Html5的Web Map矢量渲染技术研究

摘要

当下主流平台(即桌面PC,Android,IOS等)上Web浏览器都支持Html5标准.Html5的到来让Web应用的性能和易用性明显提升,其中Canvas元素是Html5标准中新增的技术之一,被JavaScript用来进行图形图像的绘制和矢量渲染.针对传统切片式Web Map存在的不足,文中以Web地图矢量渲染为研究切入点,分析一种基于JSON的地理信息数据传输格式,并使用Html5 Canvas构建矢量Web Map,即在浏览器中地理数据矢量渲染的设计和实现,兼具自定义渲染风格而无需重新请求加载图层,减少瓦片请求所需的带宽,改善Web Map实时显示的性能,探索进一步直接实现Web Map空间分析能力的可行性.%Now the web browsers (such as PC, IOS, Android, etc.) support Html5, which promotes deeply the performance and the usability of web.The canvas element is one of the new technologies in Html5, which can be used to draw graphical images and render vector data by JavaScript.In view of the shortcomings of traditional title map, this paper takes the vector rendering technology of web map as the research point, analyzing JSON-formatted GIS data and using Html5 canvas to construct vector Web Map.The geographic vector data is real-time rendered in the browser, the customized style needs no reloaded map layers which can lighten the pressure on bandwidth and improve the real-time performance of Web Map.So the ability of spatial analysis of Web Map can be further achieved.