我们将在线地图连接到智能手机上的导航器。 第1部分-标准栅格地图

网上卡是什么样的? 如何找出您感兴趣的卡的服务器地址? 如何创建允许智能手机上的导航器连接到此地图的设置文件?


内容:


1-简介。 标准栅格图
2- 继续。 为矢量地图编写一个简单的光栅化器
3- 特例。 我们连接了OverpassTurbo卡


参赛作品


在智能手机的导航应用程序中,有一些是专为旅游业和各种郊区活动设计的。 其中最著名的是OsmAnd,Locus和GuruMaps。 所有这些功能均以大量专用功能为特色,这些功能可以在使用过程中派上用场。 而且还有更多种类的(有时非常令人困惑)设置。 但是现在,我们对一件事最感兴趣:添加其他卡并在它们之间快速切换的能力。


我注意到这是一个非常有用的功能。 毕竟,可以在不同类型的地图上以不同的方式绘制地形的同一区域。 因此,在克服困难区域之前,能够对每个区域进行检查很有用。 但是,如果为此需要在智能手机上运行多个单独的应用程序,则将非常不便。 性能变差,电池消耗更快。 因此,很高兴有机会仅使用一个应用程序:一种具有便捷接口的制图汇总器,专门设计用于在卡之间快速切换。


所以在这里。 通常,添加新卡相对简单。 应用程序文件夹有一个带有预设的子文件夹。 即,对于保存文件,其中指示了用于下载特定卡的设置。 让我们看看它们是什么。


我注意到,对于所有应用程序,预设或多或少都相似。 因此,作为示例,我们将考虑GuruMaps,因为它同时适用于Android和iOS。 因此,让我们想象一下,我们进入带有预设的文件夹,在其中找到一个名为openstreetmaps.ms的文件,然后使用常规文本编辑器将其打开。


<?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>OpenStreetMaps</name> <minZoom>0</minZoom> <maxZoom>18</maxZoom> <url>http://{$serverpart}.tile.openstreetmap.org/{$z}/{$x}/{$y}.png</url> <serverParts>ab c</serverParts> </customMapSource> 

实际上,我们只有几个值的列表。 让我们按顺序考虑它们:


name-将在应用程序中显示的地图名称
minZoom-将以何种缩放级别显示此地图
maxZoom-最多可显示此地图的缩放级别
url-用于访问地图文件的模板
serverParts-如果存储映射文件的服务器具有多个镜像,则需要列出其名称


在继续之前,我注意到为了存储在服务器上,大卡被分成小块。 通常,这些是尺寸为256x256像素的png图像。 这些碎片称为图块



现在,让我们仔细看看url模板。


http://{$serverpart}.tile.openstreetmap.org /{$z}/{$x}/{$y}.png


导航器会自动将大括号中的单词替换为当前所需的地图片段的“坐标”。 以下是将完全替换存根的内容:


{$ serverpart} -此处将替换serverParts值之一。
{$ z} -您要为其下载地图片段的缩放级别
{$ x} -地图片段的水平编号
{$ y} -垂直地图片段的数量


替换值后,导航器将收到一个链接,该链接随后将下载具有所需地图片段的文件。 例如,这:


http://a.tile.openstreetmap.org /12/2478/1265.png


下载完成后,下载的图块将显示在智能手机屏幕上。


添加您的卡


因此,假设您在互联网上发现了一张您感兴趣的卡,并且您确实希望连接到智能手机。 让我们尝试一下。 首先,使用计算机上的浏览器,转到带有查看此地图的窗口的站点。 例如这个



使用开发者工具打开面板(对于Chrome浏览器,为Ctrl + Alt + I)


在打开的面板中,转到“源”选项卡。


我们按顺序打开所有文件夹,直到找到包含显示地图切片图像的文件夹。


右键单击文件名。 在打开的菜单中,选择“复制链接地址”



例如,我们有这样的链接
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11


您需要了解这些数字的确切含义。 我们从参考卡-OpenStreetMaps中进行检查。


http://a.tile.openstreetmap.org/1242/639/11.png


未加载。 让我们尝试交换数字。
http://a.tile.openstreetmap.org/11/1242/639.png


已加载! 现在比较第一个和第二个链接获得的图块:



我们确保这两个卡的图块显示相同的位置。 而且,最重要的是,没有偏移量。 因此,我们发现的地图以标准投影制成,并且适合连接。


好了,现在,知道OpenStreetMaps的坐标以什么顺序排列-z,x,y-我们可以放心地说出它们在地图上的位置。


http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}


现在,在视口中的地图上放大和缩小。 因此我们发现该卡仅从第0和15缩放加载。


此外,如果url以单个字母或数字开头,则可以在那里替换其他值。 但通常有a,b,c0,1,2,3


因此,现在我们已经找到了所有必要的参数,并可以为我们的新地图进行预设。


 <?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>.   </name> <minZoom>0</minZoom> <maxZoom>15</maxZoom> <url>http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}</url> </customMapSource> 

仍然可以使用新名称保存文件并将其添加到导航应用程序中。 对于iOS-只需将文件拖放到应用程序文件夹中(通过iTunes)。 对于Android-将文件复制到以下目录:


Android\data\com.bodunov.GalileoPro\files\Imported


现在,当您打开导航器时,所做的工作将显示在地图列表中。 恭喜你!



如您所见,这非常简单。 最重要的是,上述所有导航器的整个过程或多或少都相似。 快速,通用,跨平台。


当然,有一些非标准投影卡。 或使用非标准编号。 在本文中,我描述了如何解决此问题。 但是,Internet上找到的绝大多数卡都可以轻松连接,而不会带来其他麻烦。


顺便说一下,您可以在我的AnyGIS网站上下载现成的预设。 它们是根据我收集的数据库以上述所有导航器的格式自动生成的。 并定期更新。 因此,如有必要,请下载并使用。


好了,介绍已经结束。 在下一篇文章中,我将告诉您如何连接在线矢量地图。

Source: https://habr.com/ru/post/zh-CN461031/


All Articles