一种找房工具的纸质地图导出方法

技术领域

本发明涉及找房工具技术领域，尤其涉及一种找房工具的纸质地图导出方法。

背景技术

纸质地图——字母意思理解为在纸质上可以看得到地理位置图，所以这个项目实现功能点也是把一个城市一个地方可单独导出成一张图片，即可打印出所谓的纸质。

实现功能为在导出这个城市之前，可以前期在地图上进行一些数据任意拖拽标注，标记，以便于帮助咨询师主管在给内部咨询师讲解当前所在城市现有的楼盘，及楼盘区域具体位置，以便于咨询师快速的了解所在城市的房源信息。然而，该功能不能根据区域换算出地图指定层级下边界像素，不能实现地图标记覆盖物拖拽功能，不能定位覆盖物具体位置。

发明内容

基于背景技术存在的技术问题，本发明提出了一种找房工具的纸质地图导出方法。

本发明提出的一种找房工具的纸质地图导出方法，包括如下步骤：

S1换算地图指定层级下边界最大尺寸：

创建实例对象并传入当前城市，返回行政区域的边界，创建Polygon多边形覆盖物，把行政边界传入可得出覆盖物的西南角与东北角经纬度，将西南角与东北角经纬度转化为像素坐标，根据像素坐标计算出容器的宽与高；；

S2加载地图和导出地图：

点击相对应的楼盘,地图容器手动赋值计算得出宽高，然后加载完成事件，加载完成事件之后进行截图，在之前需要对地图组件下的img标签添加自定义属性crossorigin值为anonymous，为了设置跨域，Html2canvas内useCORS设置为true，Html2canvas回调出一个canvas，可使用toDataURL()得出base64码，创建a标签，使用a标签进行导出()得出base64码，创建a标签，使用a标签进行导出；

S3覆盖物拖拽：

根据返回经纬度创建覆盖物，监听事件mousedown开启document的mousemove及mouseup事件，mouseup时删除原有覆盖物创建根据pixelToPoint得出新经纬度创建新遮盖物，通过原有点与现有点，再绘制一条折线；

S4定位覆盖物：

点击相对应的楼盘,点击定位获取到经纬度，这是需要判断是否有新创建覆盖物若有则定位新创建点，若无则定位原有点。

优选的，所述步骤S2当导出图片不成功，是由于超出浏览器限制，需要进行递归往下导出，直到导出位置。

优选的，所述步骤S2当导出图片不成功，是由于超出浏览器限制，需要进行递归往下导出，直到导出位置。

优选的，所述步骤S1使用地图内部方法Boundary创建实例对象。

优选的，所述步骤S1中通过get方法将实例对象传入当前城市。

优选的，所述步骤S1使用地图对象上的pointToPixel转化成像素坐标。

优选的，所述步骤S2使用addEventListener监听tilesloaded加载完成事件。

优选的，所述步骤S2使用html2canvas插件进行截图。

优选的，所述步骤S4使用setViewport进行定位。

本发明中，所述一种找房工具的纸质地图导出方法，根据区域和层级换算范围边界，导出地图最大瓶颈处理，进行向下递归直到导出为止，地图上追加覆盖物拖拽事件，正确显示拖拽物标记点。

具体实施方式

下面将对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。

一种找房工具的纸质地图导出方法，包括如下步骤：

S1换算地图指定层级下边界最大尺寸：

创建实例对象并传入当前城市，返回行政区域的边界，创建Polygon多边形覆盖物，把行政边界传入可得出覆盖物的西南角与东北角经纬度，将西南角与东北角经纬度转化为像素坐标，根据像素坐标计算出容器的宽与高；；

S2加载地图和导出地图：

点击相对应的楼盘,地图容器手动赋值计算得出宽高，然后加载完成事件，加载完成事件之后进行截图，在之前需要对地图组件下的img标签添加自定义属性crossorigin值为anonymous，为了设置跨域，Html2canvas内useCORS设置为true，Html2canvas回调出一个canvas，可使用toDataURL()得出base64码，创建a标签，使用a标签进行导出()得出base64码，创建a标签，使用a标签进行导出；

S3覆盖物拖拽：

根据返回经纬度创建覆盖物，监听事件mousedown开启document的mousemove及mouseup事件，mouseup时删除原有覆盖物创建根据pixelToPoint得出新经纬度创建新遮盖物，通过原有点与现有点，再绘制一条折线；

S4定位覆盖物：

点击相对应的楼盘,点击定位获取到经纬度，这是需要判断是否有新创建覆盖物若有则定位新创建点，若无则定位原有点。

本发明中，所述步骤S2当导出图片不成功，是由于超出浏览器限制，需要进行递归往下导出，直到导出位置。

本发明中，所述步骤S2当导出图片不成功，是由于超出浏览器限制，需要进行递归往下导出，直到导出位置。

本发明中，所述步骤S1使用地图内部方法Boundary创建实例对象。

本发明中，所述步骤S1中通过get方法将实例对象传入当前城市。

本发明中，所述步骤S1使用地图对象上的pointToPixel转化成像素坐标。

本发明中，所述步骤S2使用addEventListener监听tilesloaded加载完成事件。

本发明中，所述步骤S2使用html2canvas插件进行截图。

本发明中，所述步骤S4使用setViewport进行定位。

本发明：换算地图指定层级下边界最大尺寸：创建实例对象并传入当前城市，返回行政区域的边界，创建Polygon多边形覆盖物，把行政边界传入可得出覆盖物的西南角与东北角经纬度，将西南角与东北角经纬度转化为像素坐标，根据像素坐标计算出容器的宽与高；；加载地图和导出地图：点击相对应的楼盘,地图容器手动赋值计算得出宽高，然后加载完成事件，加载完成事件之后进行截图，在之前需要对地图组件下的img标签添加自定义属性crossorigin值为anonymous，为了设置跨域，Html2canvas内useCORS设置为true，Html2canvas回调出一个canvas，可使用toDataURL()得出base64码，创建a标签，使用a标签进行导出()得出base64码，创建a标签，使用a标签进行导出；覆盖物拖拽：根据返回经纬度创建覆盖物，监听事件mousedown开启document的mousemove及mouseup事件，mouseup时删除原有覆盖物创建根据pixelToPoint得出新经纬度创建新遮盖物，通过原有点与现有点，再绘制一条折线；定位覆盖物：点击相对应的楼盘,点击定位获取到经纬度，这是需要判断是否有新创建覆盖物若有则定位新创建点，若无则定位原有点。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护范围之内。