[发明专利]一种基于HTML5 Canvas的GIS栅格数据渲染方法

说明书

本发明公布了一种基于HTML5 Canvas的GIS栅格数据渲染方法，本方法采用HTML5 Canvas的像素操作接口，在浏览器中对GIS栅格数据进行渲染，可以有效解决不同比例尺下栅格数据像素边缘模糊的问题，能够辅助专业人员在实际业务中对数据进行精确的可视化、分析。并且能够在不依赖服务端渲染的情况下，进行前端自定义符号化渲染，可以在前端程序中实现山体阴影、分级渲染等高级符号化渲染效果。

技术领域

本发明涉及图像处理领域，尤其涉及一种基于HTML5 Canvas的GIS栅格数据渲染方法。

背景技术

随着浏览器技术的发展和HTML5技术的推出，浏览器的渲染能力大幅提升，因此在前端页面中可以完成诸多以往只能在桌面程序中完成的渲染效果，并保证较高的渲染效率。WebGIS是一种基于浏览器技术的GIS组件，目前主流的WebGIS组件在支持HTML的浏览器中以Canvas方式进行渲染。在运用HTML5 Canvas进行栅格数据渲染时，目前主流技术以原生图片绘制API进行渲染，在进行缩放时浏览器底层图形API会自动进行像素平滑插值并进行绘制，造成模糊的渲染效果。由于GIS栅格数据应用方式的特殊性，在水利、气象等领域中，上述方式会有以下缺陷：模糊的栅格渲染效果会造成边界判断不清晰，进而造成观察和分析误差；只能在服务端预先将栅格数据生成为图片，然后传输到前端运用浏览器图形API绘制该图片，不能在前端进行符号化渲染，缺乏灵活性。

发明内容

本发明的目的在于，实现浏览器的前端符号化渲染，提高灵活性，提供一种基于HTML5 Canvas的GIS栅格数据渲染方法。

一种基于HTML5 Canvas的GIS栅格数据渲染方法，本方法采用HTML5 Canvas的像素操作接口，在浏览器中对GIS栅格数据进行渲染，包括以下步骤:

S1:判断栅格数据空间参考与地图当前空间参考相同或者是否可以互相转换，若能，则进入S2，如不能则结束；

S2:进行空间过滤，即对地图当前坐标范围和栅格数据坐标范围求交，若相交，则读取相交部分栅格数据记为栅格数据TypedArray数组，若不相交，则结束；

S3:读取栅格数据值与颜色映射表；

S4:初始化颜色TypedArray数组，数组中的维数与步骤S2中所得的栅格数据TypedArray数组维数相等；

S5:对步骤S2中读取的栅格数据TypedArray数组进行遍历，若像素值为无效值，则映射为指定无效颜色并写入颜色TypedArray数组，否则根据步骤S3中颜色映射表获取颜色并写入颜色TypedArray数组；

S6:根据所述步骤S2中所得地图坐标范围与栅格数据坐标范围相交结果，计算颜色TypedArray数组在地图像素坐标系下的匹配坐标，并将颜色TypedArray数组传输到HTML5 Canvas上下文，调用批量像素绘制图形API进行绘制；

S7:遍历地图所有图层，根据图层顺序对每个图层的渲染结果进行融合；

S8:刷新地图。

进一步的，所述的步骤S1中的空间参考包括WGS84地理坐标系与Web墨卡托投影坐标系，其转换公式为：

由WGS 84坐标系转为Web墨卡托坐标系公式为：

由Web墨卡托坐标系转为WGS 84坐标系的公式为：

其中x、y为Web墨卡托坐标，r为地球半径，lon为经度，lat为纬度。

进一步的，所述的步骤S2中地图当前坐标范围和栅格数据坐标范围的求交公式为：