[发明专利]一种基于Canvas的在线地图保存方法

权利要求书

1.一种基于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服务类型，若是网络地图服务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自带的绘制基本图元的接口，将要素逐一对应的绘制在Canvas中；

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

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

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

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

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

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