一种基于HTML5 Canvas的GIS栅格数据渲染方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN109783177A(43)申请公布日2019.05.21(21)申请号201910051463.3(22)申请日2019.01.18(71)申请人成都新橙北斗智联有限公司地址610041四川省成都市高新区高朋大道1号(72)发明人黎津豪刘飞宋宇明园(74)专利代理机构成都金英专利代理事务所(普通合伙)51218代理人袁英(51)Int.Cl.G06F9/451(2018.01)权利要求书2页说明书4页附图2页(54)发明名称一种基于HTML5Canvas的GIS栅格数据渲染方法(57)摘要本发明公布了一种基于HTML5Canvas的GIS栅格数据渲染方法，本方法采用HTML5Canvas的像素操作接口，在浏览器中对GIS栅格数据进行渲染，可以有效解决不同比例尺下栅格数据像素边缘模糊的问题，能够辅助专业人员在实际业务中对数据进行精确的可视化、分析。并且能够在不依赖服务端渲染的情况下，进行前端自定义符号化渲染，可以在前端程序中实现山体阴影、分级渲染等高级符号化渲染效果。CN109783177ACN109783177A权利要求书1/2页1.一种基于HTML5Canvas的GIS栅格数据渲染方法，其特征在于，本方法采用HTML5Canvas的像素操作接口，在浏览器中对GIS栅格数据进行渲染，包括以下步骤:S1:判断栅格数据空间参考与地图当前空间参考相同或者是否可以互相转换，若能，则进入S2，如不能则结束；S2:进行空间过滤，即对地图当前坐标范围和栅格数据坐标范围求交，若相交，则读取相交部分栅格数据记为栅格数据TypedArray数组，若不相交，则结束；S3:读取栅格数据值与颜色映射表；S4:初始化颜色TypedArray数组，数组中的维数与步骤S2中所得的栅格数据TypedArray数组维数相等；S5:对步骤S2中读取的栅格数据TypedArray数组进行遍历，若像素值为无效值，则映射为指定无效颜色并写入颜色TypedArray数组，否则根据步骤S3中颜色映射表获取颜色并写入颜色TypedArray数组；S6:根据所述步骤S2中所得地图坐标范围与栅格数据坐标范围相交结果，计算颜色TypedArray数组在地图像素坐标系下的匹配坐标，并将颜色TypedArray数组传输到HTML5Canvas上下文，调用批量像素绘制图形API进行绘制；S7:遍历地图所有图层，根据图层顺序对每个图层的渲染结果进行融合；S8:刷新地图。2.如权利要求1所述的一种基于HTML5Canvas的GIS栅格数据渲染方法，其特征在于，所述的步骤S1中的空间参考包括WGS84地理坐标系与Web墨卡托投影坐标系，其转换公式为：由WGS84坐标系转为Web墨卡托坐标系公式为：由Web墨卡托坐标系转为WGS84坐标系的公式为：其中x、y为Web墨卡托坐标，r为地球半径，lon为经度，lat为纬度。3.如权利要求1所述的一种基于HTML5Canvas的GIS栅格数据渲染方法，其特征在于，所述的步骤S2中地图当前坐标范围和栅格数据坐标范围的求交公式为：Fleft＝max(MleftRleft)；Fright＝min(MrightRright)；Fbottom＝max(MbottomRbottom)；Ftop＝min(MtopRtop)；其中M为地图坐标，R为栅格坐标，F为相交部分坐标。4.如权利要求1所述的一种基于HTML5Canvas的GIS栅格数据渲染方法，其特征在于，所述的步骤S7中所采用的融合方式为Alpha混合方式，Alpha混合的公式为：2CN109783177A权利要求书2/2页其中，C12为混合的颜色值，C1、C2为颜色值，a1、a2为颜色对应的透明度。5.如权利要求1所述的一种基于HTML5Canvas的GIS栅格数据渲染方法，其特征在于，还包括读取用于栅格渲染的栅格数据步骤。3CN109783177A说明书1/4页一种基于HTML5Canvas的GIS栅格数据渲染方法技术领域[0001]本发明涉及图像处理领域，尤其涉及一种基于HTML5Canvas的GIS栅格数据渲染方法。背景技术[0002]随着浏览器技术的发展和HTML5技术的推出，浏览器的渲染能力大幅提升，因此在前端页面中可以完成诸多以往只能在桌面程序中完成的渲染效果，并保证较高的渲染效率。WebGIS是一种基于浏览器技术的GIS组件，目前主流的WebGIS组件在支持HTML的浏览器中以Canvas方式进行渲染。在运用HTML5Canvas进行栅格数据渲染时，目前主流技术以原生图片绘制API进行渲染，在进行缩放时浏览器底层图形API会自动进行像素平滑插值并进行绘制，造成模糊的渲染效果。由于GIS栅格数据应用方式的特殊性，在水