CN109542987A - 一种基于Canvas的在线地图保存方法 - Google Patents

Abstract

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

Description

一种基于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(Web Map Service)服务类型，若是网络地图服务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.createObjectURL()接口，将文件对象再次转为图片地址；

步骤d5：利用前端的超链接下载功能，将图片地址赋值给下载链接，模拟点击超链接操作即能够将地图保存到本地。

本发明方法主要流程如为：本发明方法可以实现基于Canvas将在线地图按指定级别将指定区域保存为图片的应用需求，保存下来的图片可以用于打印或者其他用途。该方法根据当前所选的区域以及级别，计算所需的地理底图瓦片，同时根据所计算出来的瓦片实际的范围计算出左下角相对于所选区域的像素偏移量，按照计算得到的偏移量将瓦片逐一利用Canvas的接口drawImage将瓦片绘制在Canvas中；根据当前所选的区域以及级别，计算地图上所绘制的要素，计算的要素类型可以概括为三类：点、线、面，利用点、线、面的交并计算算法计算得到所有与所选区域有交集的要素，然后在指定级别将要素绘制在创建的Canvas中，最终将渲染好的canvas转为文件保存至本地。

本发明的原理是：基于当前热门应用Canvas的基本功能特性实现了图片输出，而且采用Canvas-dataurl-file-url的技术路线解决了Web端当Canvas范围过大无法下载保存的问题了，为大幅地图保存奠定了技术基础，并且结合了在线地图的特点实现了在线地图按指定级别将指定区域保存为图片，使得本专利不但可以一次性操作就实现在线地图的简单屏幕复制保存，而且可以根据保存结果的用途对在线地图指定范围内地图内容设定需要保存的级别进行输出保存，并且保存的地图精度与地图要素的详细程度与所设定的级别均适配。

本发明与现有技术相比，显著优点是：

1、利用Canvas的特性实现在线地图按指定级别将指定区域保存为图片，并且保存后的地图清晰度和地图要素均与图片大小匹配；

2、瓦片获取中网络地图服务WMS服务类型采用瓦片化模式请求，能更好的使用多线程等技术，同时也能更好的利用网络带宽等资源，提升瓦片请求速度；

3、要素获取采用二次筛选机制，提高了获取效率，避免了大量不必要的计算量；

4、地图保存采用Canvas-dataurl-file-url的技术路线，从而实现大幅地图的保存。

附图说明

下面结合附图和具体实施方式对本发明做更进一步的具体说明，本发明的上述或其他方面的优点将会变得更加清楚。

图1是本发明的瓦片获取模块流程示意图。

图2是本发明的要素获取模块流程示意图。

图3是本发明的Canvas渲染模块流程示意图。

图4是本发明的地图保存模块流程示意图。

图5为本发明流程图。

具体实施方式

下面结合附图及实施例对本发明做进一步说明。

如图5所示，本发明提供了一种基于Canvas的在线地图保存方法，

包括瓦片获取模块、要素获取模块、Canvas渲染模块以及地图保存模块；

所述瓦片获取模块用于获取瓦片渲染队列；

所述要素获取模块用于获取要素渲染队列；

所述Canvas渲染模块用于对瓦片渲染队列和要素渲染队列进行Canvas渲染，得到渲染好瓦片和要素的Canvas对象；

所述地图保存模块用于将Canvas对象转换为图片地址，并进行地图保存。

如图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(Web Map Service)服务类型，若是网络地图服务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]。

如图2所示，所述要素获取模块执行如下步骤：

步骤b1：根据步骤a1得到区域左下角坐标为[extent[0],extent[1]]，右上角为[extent[2],extent[3]]，级别为n；

步骤b2：调用当前地图对象所自带的获取要素的接口获取地图上所有的要素；

步骤b3：通过循环的方法遍历所有要素，获取其显隐属性，若其显隐属性为不可见，则放弃保存，若为可见，则判断该要素的最小外接框与所选区域是否有交集，若无交集，则放弃保存，若有交集，则判断该要素与所选区域是否有交集，若无交集，则放弃保存，若有交集，则将该要素放入保存队列，得到要素渲染队列。

如图3所示，所述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中；

如图4所示，所述地图保存模块执行如下步骤：

步骤d1：由Canvas渲染模块得到已经渲染好瓦片和要素的Canvas对象；

步骤d2：调用Canvas自带的toDataURL()接口将Canvas对象转为图片编码；

步骤d3：调用前端开发语言JavaScript自带的接口atob()和Uint8Array()将图片编码转为二进制流数据，然后调用前端开发语言JavaScript自带的接口File()接口将二进制流数据转为文件对象；

步骤d4：调用前端开发语言JavaScript自带的URL.createObjectURL()接口，将文件对象再次转为图片地址；

步骤d5：利用前端的超链接下载功能，将图片地址赋值给下载链接，模拟点击超链接操作即能够将地图保存到本地。

本发明提供了一种基于Canvas的在线地图保存方法，具体实现该技术方案的方法和途径很多，以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。本实施例中未明确的各组成部分均可用现有技术加以实现。

Claims (6)

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]+1)*tileSize*rN,origin[1]-(tileCoord[1]+1)*tileSize*rN]。

4.根据权利要求3所述的方法，其特征在于，所述要素获取模块执行如下步骤：

步骤b1：根据步骤a1得到区域左下角坐标为[extent[0],extent[1]]，右上角为[extent[2],extent[3]]，级别为n；

步骤b2：调用当前地图对象所自带的获取要素的接口获取地图上所有的要素；

步骤b3：通过循环的方法遍历所有要素，获取其显隐属性，若其显隐属性为不可见，则放弃保存，若为可见，则判断该要素的最小外接框与所选区域是否有交集，若无交集，则放弃保存，若有交集，则判断该要素与所选区域是否有交集，若无交集，则放弃保存，若有交集，则将该要素放入保存队列，得到要素渲染队列。

5.根据权利要求4所述的方法，所述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自带的绘制基本图元的接口，将要素逐一对应的绘制在Canvas中。

6.根据权利要求5所述的方法，所述地图保存模块执行如下步骤：

步骤d1：由Canvas渲染模块得到已经渲染好瓦片和要素的Canvas对象；

步骤d2：调用Canvas自带的toDataURL()接口将Canvas对象转为图片编码；

步骤d3：调用前端开发语言JavaScript自带的接口atob()和Uint8Array()将图片编码转为二进制流数据，然后调用前端开发语言JavaScript自带的接口File()接口将二进制流数据转为文件对象；

步骤d4：调用前端开发语言JavaScript自带的URL.createObjectURL()接口，将文件对象再次转为图片地址；

步骤d5：利用前端的超链接下载功能，将图片地址赋值给下载链接，模拟点击超链接操作即能够将地图保存到本地。