api zoom 实现自动预定_一种基于Web端API的网络地图图片自动截取拼接的方法与流程...

本发明属于网络应用技术领域，具体涉及一种基于Web端API的网络地图图片自动截取拼接的方法。

背景技术：

网络地图图片的自动截取拼接是一种重要的网络应用技术。对于交通规划工作者而言，他们经常需要截取某一个城市的地图作为底图，然后衬在TransCAD中用于道路的校准，周围地标的显示，以及公交物理站点的标定等。网络地图是公共资源，能够准确无偏地截取网络地图，并将之应用于交通领域当中，这对于GIS运用以及网络应用来说都具有重要的意义。

早期没有网络地图或者网络地图还不够成熟时，为了得到电子版的地图，通常的做法是直接扫描纸质的旅游地图，然后将其转化为TIF格式的图片衬在TransCAD中做底图；2008年，手持GPS开始盛行，使用手持GPS记录轨迹和所需的物理点，然后将数据用Excel导出，直接用TransCAD打开使用。相比市面上流通的地图，这种方法记录的道路信息十分准确，不过对于大面积的道路信息采集来说，该方法人工成本太大；近年来，也出现了大量的电子地图下载器，如BIGEMAP、水经注、GOGOMAP，但一般都需要购买或者授权，不然会有限制下载地图的大小或者增加水印。而现在网络地图，如高德、百度等已经发展的比较成熟，各平台大都开放其API(Application Programming Interface，应用程序编程接口)以供用户开发。本发明基于高德地图的API实现网络地图图片自动截取拼接。

技术实现要素：

本发明的目的是提供一种Web端API的网络地图图片的自动截取拼接的方法，以解决在交通规划中道路路网，各个物理地标等信息获取的问题。

本发明为解决上述技术问题提供了一种基于Web端API的网络地图图片的自动截取拼接的方法，该方法包括以下步骤：

步骤1)，依据所需图片的大小利用鼠标在网络地图上点选截取图片的范围，确定取图范围后，用户选择取图时地图的缩放级别；

步骤2)，在Python中确定截取图片的大小，根据缩放级别以及点选范围，计算整张图片高度及宽度的像素值；

步骤3)，使用JavaScriptAPI的map类的setZoomAndCenter()函数，按照截取前设置的缩放比例，移动到点选范围的左上角，开始截取初始位置；

步骤4)，通过Python进行截图，利用PIL库中的new函数对截取的整张图片进行初始化，建立整张地图的底板，并计算截取图片的像素坐标；

步骤5)，在图块移动的过程中，会触发Moveend事件，计算整张图片所需截图的行和列的块数；

步骤6)，利用JavaScript的map类的panBy()函数将获取的多个图块按照像素依次进行循环平移和拼接。

进一步，所述步骤1)利用鼠标在网络地图上点选截取图片的范围，使用“事件绑定”场景的代码，给鼠标绑定点击事件，获取截图范围的四个角坐标，确定取图范围后，使用HTML中的select控件来选取所需图片的缩放级别。

进一步，所述“事件绑定”场景的代码为http://lbs.amap.com/api/javascript-api/example/event/custom-event。

进一步，所述步骤2)将Python与JavaScript联合实现截图，通过selenium库实现Python与Web端的交互。

进一步，所述步骤2)在Python中确定截取图片的大小是根据截取图片的四个角坐标以及取图范围，计算整张图片高度及宽度的像素值。

进一步，所述步骤6)地图移动后触发Moveend事件，计算图块行和列的个数以及图块高和宽的像素大小。

进一步，所述计算图块行和列的个数以及图块高和宽的像素大小是通过find_element_by_id().get_attribute()函数传入Python中实现。

进一步，所述步骤5)中计算截取图片的像素坐标的过程为：利用PIL库中的grab()函数进行截图，利用JavaScript获取电脑屏幕的可工作区域和整个屏幕的尺寸，再配合浏览器最大化的设置，从而计算截取图片的像素坐标。

进一步，所述步骤6)中循环平移时，会触发JS中的Moveend事件，在该事件中设置截取进度显示。

本发明的有益效果是：本发明首先通过给鼠标绑定的获取四个角坐标的事件来确定所需截图范围，选取缩放比例；接下来，在实现Python和JavaScript交互的条件下确定所截图的大小，以及截图区域内图块的行列个数；然后在map函数下自动循环地抓取并平移每一个图块，完成整张截图的拼接。本发明在实现Python和web端交互的基础上，对电子地图进行截取，实现了对网络电子地图功能的二次开发；并且满足了交通规划、GIS应用等领域中，对于不同地区的大范围电子地图的需求，能够大幅度提高交通工作者的研究效率，对交通行业的发展具有推动性意义。

附图说明

图1是基于Web端API的网络地图图片自动截取拼接的方法流程示意图；

图2是本发明实施例中的截图操作界面示意图；

图3是本发明实施例中的范围选取的结果示意图；

图4是本发明实施例中鼠标点选截图区域示意图；

图5是本发明实施例中的截图成功提示框图。

具体实施方式

下面结合附图对本发明的具体实施方式作进一步说明。

如图1所示，一种基于Web端API的网络地图图片自动截取拼接的方法，包括步骤：

步骤(1)，依据自己所需图片的大小用鼠标在网络地图上点选截取图片的范围，确定取图范围后，用户选择取图时地图的缩放级别；

用鼠标点选目标区域的左上角位置，然后光标向右下方移动，点选第二点，两点连线作为取图矩形的对角线；使用“事件绑定”场景的代码，给鼠标绑定点击事件，获取截图范围的四个角坐标；确定取图范围后，使用HTML中的select控件来选取所需图片的缩放级别；“事件绑定”场景的代码为http://lbs.amap.com/api/javascript-api/example/event/custom-event。

步骤(2)，使用selenium库将Python与JavaScript联合实现截图，在python确定图片的大小，根据缩放级别以及点选范围，计算整张图片高度以及宽度的像素值；将Python与JavaScript联合实现截图，通过selenium库实现Python与Web端的交互，实际上是Python通过selenium库来和浏览器中的HTML交互。

在Python中确定图片的大小，PyQt5的QtWebEngineWidgets组件来模拟浏览器运行JavaScript，根据四个角坐标以及取图范围，计算整张图片的像素值。本发明是使用Python与JavaScript联合进行图片的截取以及拼接，在selenium库中实现Python与JavaScript的交互，使用PyQt5的QtWebEngineWidgets组件来模拟浏览器运行JavaScript。此外，selenium还需要对应浏览器的驱动(一个exe可执行文件)，下载驱动后，需要设置环境变量的path路径。

步骤(3)，利用JavaScriptAPI的map类的setZoomAndCenter()函数，按照截取前设置的缩放比例，移动到点选范围的左上角，开始截取初始位置。

步骤(4)，在移动截屏的过程中，会触发Moveend事件，计算整张图片所需截图的行和列的块数；

利用JavaScriptAPI的map类的setZoomAndCenter()函数，按照取图缩放比例，开始抓取初始位置。地图移动后触发Moveend事件，计算截取图片的大小，截取图块的行和列，以及图块的高和宽的像素大小。上述参数通过find_element_by_id().get_attribute()函数都传入Python中。

步骤(5)，使用Python进行截图，利用PIL库中的new函数对截取的整张图片进行初始化，建立整张地图的底板，并计算截取图片的像素坐标；

Python截取图片，用PIL库中的new函数对截取的图片进行初始化，建立整张地图的底板，计算截取图块的像素坐标。利用PIL库中的grab()函数进行截图，截图区域要避开浏览器的工具栏，菜单栏以及地址栏，并且让开电脑屏幕的任务栏，利用JavaScript获取电脑屏幕的可工作区域和整个屏幕的尺寸，从而计算截图区域的范围。

步骤(6)，利用JavaScript的map类的panBy()函数将获取的图块按照像素进行平移拼接；

图块进行像素平移，利用JavaScript获取图块的行和列的个数，做循环；每个循环中，先进行截图，再利用map类的panBy()函数平移地图；每次平移后，会触发JavaScript中的Moveend事件，可以在该事件中设置截取进度显示；每次截取的图块，粘贴到整个底板上的坐标要即时计算，根据循环的行列序号，以及平移地图的次序，动态的计算粘贴坐标。一直到循环完毕，利用PIL库的save函数保存图片。

和用户的交互、截图界面都是在HTML中实现，从Python的程序中用selenium的get()函数打开该HTML文件，就可以执行截图操作。实例选取的区域为江苏大学本部校区，截图后打开HTML文件后，在地图的左下角，会出现图2所示的控件。

“点选范围”按钮是用来确定截图矩形范围的左上角坐标和右下角坐标；“取图时缩放级别”从3到18，选择级别为18时，每个电脑屏幕像素约为0.5米，该值越大，截取后的图像素越大；本实施例选择级别为18；“y偏移”是指每次屏幕截图时，在浏览器中HTML可见区域的下方舍去的高度，在这个高度内，会有进度条或进度百分比，如果不舍去，就无法实现无缝拼接本实施例y偏移为25。

点击“开始取图”后，立刻把鼠标移动到任务栏上去，不然会被截取下来，最后出现在地图上。

在打开HTML后，地图的右上角会有截取范围的信息显示(见图3)，缩放级别指当前可见的级别，用户可以通过鼠标滚轮来实现地图缩放，测试地图显示信息的详尽程度；因为选取范围限定为矩形，所以选点个数最多为2个；确定选取范围，就是给出了左上角和右下角坐标，同时最后给出选定范围的面积。实例选取的左上角坐标为119.507491,32.209548，右下角坐标为119.517575,32.192589，此两点对应的矩形面积为3.57km2。

截图成功后显示此次拼接的图块个数为28个(见图5)。

以上实施例仅用于说明本发明的设计思想和特点，其目的在于使本领域内的技术人员能够了解本发明的内容并据以实施，本发明的保护范围不限于上述实施例。所以，凡依据本发明所揭示的原理、设计思路所作的等同变化或修饰，均在本发明的保护范围之内。