一种基于Canvas的在线地图保存方法技术

本发明专利技术公开了一种基于Canvas的在线地图保存方法，主要针对当前简单的地图保存功能无法满足复杂的应用需求的问题。该方法主要技术路线是通过地图交互确定需要保存的地图区域，然后根据所确定的区域获取地理底图和地理要素，再利用Canvas的特点将获取的地理底图和地理要素根据指定的级别进行重绘并保存；该方法主要分为四个模块：瓦片获取模块、要素获取模块、Canvas渲染模块以及地图保存模块，其中瓦片获取模块负责根据所选范围生成瓦片请求，要素获取模块负责根据所选范围找出所需要素,Canvas渲染模块负责将瓦片以及要素进行渲染,地图保存模块负责将最终结果保存为图片。

【技术实现步骤摘要】
一种基于Canvas的在线地图保存方法
本专利技术属于地理信息系统领域，具体涉及一种基于Canvas的在线地图保存方法。
技术介绍
随着互联网的快速发展和迅速普及，地理信息系统(GIS)在互联网上的应用也越来越多，由此衍生的需求也越来越多样化，而实现在线地图按指定级别将指定区域保存为图片就是其中之一。用户想要在在线地图环境下保存特定区域范围的地图，同时因为保存的结果有某种特定的应用，需要在保存的同时控制保存的地图大小，且地图上显示的要素与当前保存的大小适配，这时传统的保存方法就无法实现这样的应用功能，例如当前选中的地图区域屏幕范围大小为256*256像素，但因为保存的结果需要打印在A1甚至更大的图幅上，需要将结果放大处理，如果只是简单将地图所选范围直接存为同样大小的图片然后在进行放大处理，则会造成最终得到的结果模糊不清，且地图显示的要素也与放大后的地图不适配，这时就需要通过其他的方法来实现该应用功能了。当前有不少浏览器自带了截图功能，然而自带的截图功能仅能做到将所选区域的屏幕内容简单复制保存，这显然无法满足复杂的需求。因此研究一种可以实现在线地图按指定级别将指定区域保存为图片的方法就显得极为必要了。
技术实现思路
专利技术目的：针对目前的技术以及工具无法满足复杂的在线地图保存应用功能需要，本专利技术提出一种借助Canvas的特性从而实现在线地图按指定级别将指定区域保存为图片的应用功能的方法，其中Canvas是在HTML5(超文本标记语言)中标准化的一种标签，用于在网页中实时生成图像，并且可以操作图像内容。技术方案：本专利技术提出了一种基于Canvas的在线地图保存方法，包括瓦片获取模块、要素获取模块、Canvas渲染模块以及地图保存模块；所述瓦片获取模块用于获取瓦片渲染队列；所述要素获取模块用于获取要素渲染队列；所述Canvas渲染模块用于对瓦片渲染队列和要素渲染队列进行Canvas渲染，得到渲染好瓦片和要素的Canvas对象；所述地图保存模块用于将Canvas对象转换为图片地址，并进行地图保存。所述瓦片获取模块执行如下步骤：步骤a1：在地图上选取好需要保存的区域和级别，设区域左下角坐标为[extent[0],extent[1]]，右上角为[extent[2],extent[3]]，级别为n；步骤a2：计算地图在指定级别的像素分辨率，计算方法为：设定第1级的像素分辨率r为resolution，则第n级的像素分辨率rN为resolution/(2^(n-1))，n>＝1；步骤a3：根据区域和分辨率的大小，计算出所需瓦块的行列号，计算方法为：设定每块瓦片的像素宽度为tileSize，地图的左上角即瓦片的行列号起算点坐标为[origin[0],origin[1]]；区域左上角距离地图左上角的像素跨度为xFromOrigin＝(extent[0]-origin[0])/rN；区域左上角所在瓦片的行号为tileCoord[0]＝Math.floor(xFromOrigin/tileSize)，其中Math.floor为向下取整函数；同样的方法获取区域左上角所在瓦片的列号为tileCoord[1]，区域右下角所在的瓦片行列号为tileCoord[2]，tileCoordY[3]；则区域所需瓦片行号范围为：tileCoord[0]<＝H<＝tileCoord[2]，H表示行号；所需瓦片列号范围为：tileCoord[1]<＝L<＝tileCoord[3]，L表示列号；步骤a4：根当前地图对象所自带的服务获取接口获取当前地图上所加载的所有服务；步骤a5：通过循环的方法遍历所有服务，如果服务图层属性为不显示，则其不会出现在地图上，放弃生成瓦片请求；如果服务图层属性为显示，则判断是否为网络地图服务WMS(WebMapService)服务类型，若是网络地图服务WMS，则根据行列号生成瓦片范围，然后根据所得到的瓦片范围生成瓦片请求，若不是网络地图服务WMS则直接根据行列号生成瓦片请求地址URL，并将瓦片放入渲染队列，得到瓦片渲染队列。步骤a5中，网络地图服务WMS瓦片范围计算规则为：设定瓦片行号、列号分别为tileCoord[0],tileCoord[1]；则瓦片左上角坐标为：[origin[0]+tileCoord[0]*tileSize*rN,origin[1]-tileCoord[1]*tileSize*rN]；瓦片右下角坐标为：[origin[0]+(tileCoord[0]+1)*tileSize*rN,origin[1]-(tileCoord[1]+1)*tileSize*rN]。所述要素获取模块执行如下步骤：步骤b1：根据步骤a1得到区域左下角坐标为[extent[0],extent[1]]，右上角为[extent[2],extent[3]]，级别为n；步骤b2：调用当前地图对象所自带的获取要素的接口获取地图上所有的要素；步骤b3：通过循环的方法遍历所有要素，获取其显隐属性，若其显隐属性为不可见，则放弃保存，若为可见，则判断该要素的最小外接框与所选区域是否有交集，若无交集，则放弃保存，若有交集，则判断该要素与所选区域是否有交集，若无交集，则放弃保存，若有交集，则将该要素放入保存队列，得到要素渲染队列。所述Canvas渲染模块执行如下步骤：步骤c1：根据瓦片获取模块和要素获取模块，获得瓦片渲染队列和要素渲染队列，对于瓦片渲染队列，执行步骤c2～c5；对于要素渲染队列，执行步骤c6～c7；步骤c2：通过循环的方法遍历瓦片渲染队列中的瓦片，每个瓦片对应的创建一个image对象；步骤c3：将瓦片的请求地址对应的赋值给image对象的url属性；步骤c4：根据瓦片获取模块中的步骤a5得到区域左上角瓦片的左上角顶点坐标为[origin[0]+tileCoord[0]*tileSize*rN,origin[1]-tileCoord[1]*tileSize*rN]，简记为[x,y]，而区域左上角顶点的坐标为[extent[0],extent[1]]，简记为[x0,y0]，则得到偏移量为[(x-x0)/rN,(y-y0)/rN]；步骤c5：根据步骤c4所得的瓦片偏移量在瓦片下载回调函数里调用Canvas自带的drawImage()接口，逐一将瓦片绘制在Canvas中；步骤c6：通过循环的方法遍历要素渲染队列中所有要素，获取其要素的属性信息，包括位置、填充、边线、颜色、文字信息；步骤c7：根据要素的属性信息调用Canvas自带的绘制基本图元的接口，如moveTo()、lineTo()、stroke()等，将要素逐一对应的绘制在Canvas中；所述地图保存模块执行如下步骤：步骤d1：由Canvas渲染模块得到已经渲染好瓦片和要素的Canvas对象；步骤d2：调用Canvas自带的toDataURL()接口将Canvas对象转为图片编码；步骤d3：调用前端开发语言JavaScript自带的接口atob()和Uint8Array()将图片编码转为二进制流数据，然后调用前端开发语言JavaScript自带的接口File()接口将二进制流数据转为文件对象；步骤d4：调用前端开发语言JavaScript自带的URL.c本文档来自技高网...

【技术保护点】
1.一种基于Canvas的在线地图保存方法，其特征在于，包括瓦片获取模块、要素获取模块、Canvas渲染模块以及地图保存模块；所述瓦片获取模块用于获取瓦片渲染队列；所述要素获取模块用于获取要素渲染队列；所述Canvas渲染模块用于对瓦片渲染队列和要素渲染队列进行Canvas渲染，得到渲染好瓦片和要素的Canvas对象；所述地图保存模块用于将Canvas对象转换为图片地址，并进行地图保存。

【技术特征摘要】
1.一种基于Canvas的在线地图保存方法，其特征在于，包括瓦片获取模块、要素获取模块、Canvas渲染模块以及地图保存模块；所述瓦片获取模块用于获取瓦片渲染队列；所述要素获取模块用于获取要素渲染队列；所述Canvas渲染模块用于对瓦片渲染队列和要素渲染队列进行Canvas渲染，得到渲染好瓦片和要素的Canvas对象；所述地图保存模块用于将Canvas对象转换为图片地址，并进行地图保存。2.根据权利要求1所述的方法，其特征在于，所述瓦片获取模块执行如下步骤：步骤a1：在地图上选取好需要保存的区域和级别，设区域左下角坐标为[extent[0],extent[1]]，右上角为[extent[2],extent[3]]，级别为n；步骤a2：计算地图在指定级别的像素分辨率，计算方法为：设定第1级的像素分辨率r为resolution，则第n级的像素分辨率rN为resolution/(2^(n-1))，n>＝1；步骤a3：根据区域和分辨率的大小，计算出所需瓦块的行列号，计算方法为：设定每块瓦片的像素宽度为tileSize，地图的左上角即瓦片的行列号起算点坐标为[origin[0],origin[1]]；区域左上角距离地图左上角的像素跨度为xFromOrigin＝(extent[0]-origin[0])/rN；区域左上角所在瓦片的行号为tileCoord[0]＝Math.floor(xFromOrigin/tileSize)，其中Math.floor为向下取整函数；同样的方法获取区域左上角所在瓦片的列号为tileCoord[1]，区域右下角所在的瓦片行列号为tileCoord[2]，tileCoordY[3]；则区域所需瓦片行号范围为：tileCoord[0]<＝H<＝tileCoord[2]，H表示行号；所需瓦片列号范围为：tileCoord[1]<＝L<＝tileCoord[3]，L表示列号；步骤a4：根据当前地图对象所自带的服务获取接口获取当前地图上所加载的所有服务；步骤a5：通过循环的方法遍历所有服务，如果服务图层属性为不显示，则其不会出现在地图上，放弃生成瓦片请求；如果服务图层属性为显示，则判断是否为网络地图服务WMS服务类型，若是网络地图服务WMS，则根据行列号生成瓦片范围，然后根据所得到的瓦片范围生成瓦片请求，若不是网络地图服务WMS则直接根据行列号生成瓦片请求地址URL，并将瓦片放入渲染队列，得到瓦片渲染队列。3.根据权利要求2所述的方法，其特征在于，步骤a5中，网络地图服务WMS瓦片范围计算规则为：设定瓦片行号、列号分别为tileCoord[0],tileCoord[1]；则瓦片左上角坐标为：[origin[0]+tileCoord[0]*tileSize*rN,origin[1]-tileCoord[1]*tileSize*rN]；瓦片右下角坐标为：[origin[0]+(tileCoord[0...

【专利技术属性】
技术研发人员：陈辉，蒉露超，范伟，李瑞昶，丁茜，
申请(专利权)人：中国电子科技集团公司第二十八研究所，
类型：发明
国别省市：江苏,32