maps-api-v3_Google Maps API和自定义叠加层

孙嘉悦

2023-12-01

maps-api-v3

在上一教程中，我们研究了如何使用服务的API添加标记以及自定义Google地图的颜色和菜单。本教程进一步介绍了如何创建自己的自定义地图并将其覆盖到Google地图（例如我的1896年的朴次茅斯地图）上。

在本教程中，我们将向先前构建的地图添加“天气预报”叠加层。我使用的天气图完全是虚构的，但是所涵盖的技术将使您可以自由创建各种有趣的事物！您将能够构建历史地图，自定义绘制的地图，特定区域（例如大学校园）的特写镜头-列表无穷无尽！

开始之前，您需要了解以下几点：

谷歌地图是使用许多图像“平铺”制作的（请参见上图）。换句话说，地图被分成一个不可见的网格，每个网格正方形是一个256x256像素的单独图像文件。
每个缩放级别需要一组图像图块。缩放级别是一个数字，从零开始，随着您放大和缩小地图而改变（请参见上图）。
您的地图叠加层开始时是一个非常大的图像（jpeg或png），然后将其“切片”为图块。这是一个重复的过程，从某种意义上来说，将图像切片一次即可为第一个缩放级别创建一组图块，然后将其再次拆分为较小的片段以为下一缩放级别创建第二组图块，并且以此类推。

本教程说明了每个步骤，包括（幸运的是！）可用于使事情自动化并使生活变得更加轻松的软件工具。下载包中提供了每个步骤的源文件。

下载模板

首先，第一步是制作一个模板，您可以在其上创建自己的叠加层。

您的目标是在Photoshop（或等效的图形应用程序）中创建一个模板，该模板的大小和形状与您要在其最高缩放级别时将其叠加在其上的Google地图完全相同。（如果您不确定所需的最高缩放级别，则maptiler.org会很有用）。

为此，您可以使用maptiler的mashup保存模板地图，然后在Photoshop 中将其放大到所需的最大缩放级别。例如：

使用图形应用程序打开已保存的模板地图图像。
转到“ Tilesàla Google Maps”网站，以所需的最大缩放级别拍摄Google地图片段的屏幕截图。
将屏幕截图粘贴到您的Photoshop文件中。
然后放大您的模板地图图像，使其与相应的缩放地图线段完全对齐。
接下来，删除缩放的线段。模板图的质量不会很好，但这无关紧要，因为您只需要轮廓图，然后最终将其删除。

提示：另一个选项是Google Maps Downloader ，但请注意Google的条款和条件。同样，此选项对大型和详细地图不可行。放大到12级的英国地图太大，无法在Photoshop中打开。

在这一阶段，我不会使事情复杂化！因此，在对上一个教程的稍作更改中，我将最大缩放级别从12更改为10，以使我们可以管理文件大小。

创建自己的地图

使用上述过程获取地图jpg后，请在Photoshop或首选的图形应用程序中将其打开。

您将使用此图像作为模板，并在其上绘制自己的地图。这是为了确保您的地图与Google地图完美对齐。

锁定您的地图模板层。
添加一个新的图层。
创造惊人的东西。（实际上，一开始不要太着迷。实际上，创建基本的东西（例如我的天气图）并按照本教程的其余部分来了解正在发生的事情是个好主意。！）
隐藏地图模板层。
将地图另存为png或jpg（如果您有透明的部分（例如本教程中的大海），请选择png）。

看一下我在此阶段创建的天气图图像，该图像可从源代码下载中获得。

切片地图

您可以通过以下几种方法对图像进行切片以创建地图图块。如果您想了解有关您正在做的事情的背景信息，请继续阅读。否则，如果您不关心它为什么运行或如何运行，请跳到下一部分！

投影系统

从地理意义上讲，投影系统是如何从圆形物体（即地球）创建平面地图的方法。有各种各样的（坦率地令人困惑）公式和算法可以用来实现这一目标。您需要知道的是，不同的投影系统会产生不同的世界平面图。

要为Google地图创建重叠，您需要使用使用Mercator投影的'Spherical Mercator'系统。定义为EPSG：900913或EPSG：3857。要了解有关投影系统的更多信息，请参见TilesàGoogle Maps网页。

查找地图的每一面

在生成图块之前，您需要确定地图北，南，西和东边的位置。当您使用“球形墨卡托”系统时，这些位置必须以球形米为单位，而不是纬度或经度。

您可以使用此mashup找到这些位置值。我发现最简单的方法是放大并一次找到一侧。因此，找到地图西侧的值，记下来，然后找到南侧的值，依此类推。

找到这四个值后，您现在可以将地图“切片”为图块。有几个可用的选项。

切片选项1：MapTiler

幸运的是， MapTiler软件非常易于使用！在撰写本教程时，MapTiler正在更新其软件。但是无论您下载哪个版本，这些都是基本步骤：

下载Maptiler 。或更新的Beta版本。
启动该程序，然后选择Google Mapscompatible选项。
然后添加您在上一步中创建的地图图像。
系统将要求您提供地图边界的地理参考 ，即刚找到的每侧的球面位置。在版本0.41（两个版本中的最新版本）中，这被称为边界框。 输入值的顺序要小心！
当询问您的空间参考/坐标系时，请使用ESPG：3857 。（如果您使用的是MapTiler的旧版本1（测试版），请使用EPSG：900913 ）。
然后选择要为其生成图块的缩放级别。最大值应为创建模板映射时（上面）保存的值。 “ 瓷砖-Google地图”页面可帮助您确定所需的最小缩放值。
继续执行向导的末尾并启动“ 渲染” 。这可能需要一段时间。喝咖啡的好机会！

注意：如果您使用的是新版的MapTiler，则有一个陷阱。您的地图图块带有水印。我猜测在某些情况下，对于Uni项目或技术概念验证，这绝对不是问题。但是，有两种方法可以解决此问题。我认为，最明显的方法是以20美元的价格购买升级产品。另一个选择是使用GDAL2Tiles python脚本。我个人更喜欢进行升级，因为我宁愿花时间在创意方面，也不想忍受设置脚本环境的烦恼，但是您可能会有所不同。

提示：如果您在使用MapTiler软件时遇到任何问题，则用户论坛非常有用。

切片选项2：GDAL2Tiles

MapTiler的替代方法是GDAL2Tiles脚本。 MapTiler软件实际上是基于此脚本构建的，该脚本通过命令提示符界面运行。

GDAL2Tiles提供了更多的可能性，但使用起来也比较麻烦。因此，只有在您有冒险精神时才继续阅读！

第一步是设置环境以运行GDAL2Tiles脚本。如何执行此操作取决于您的操作系统。如果您使用的是32位Windows计算机（如果不确定，请单击此处），则可以使用可以使用的OSGeo4W。

首先，您需要安装Python并检查python是否在path变量中。
然后下载OSGeo4W 。
运行安装程序，然后选择高级安装 。
选择Libs ，然后在选择包中选择gdal和gdal-python 。
继续并完成安装。
完成后，您应该在桌面上有OSGeo4W图标。这是一个用于启动命令提示符的批处理文件。

如果您使用的是64位Windows计算机（如果不确定，请单击此处），则设置有所不同。这些说明直接引自Jaerock Kwon的博客（并得到其许可），该博客应给予详尽的说明。

从x86-64安装Python 。
检查python是否在您的path变量上。
运行python.exe。（例如，单击C：\ Python27 \ python.py）我们必须找出构建python的编译器版本。在我的情况下，Python版本是2.7.5，它是在Win32上使用Python 2.7.5（默认，2013年5月15日，22:44:16）[MSC v.1500 64位（AMD64）]编译和构建的。
可在http://vbkto.dyndns.org/sdk/中找到用于64位计算机的GDAL二进制软件包。在表中选择相应的版本。就我而言， release-1500-x64-gdal-1-10-mapserver-6-2是“ MSVC2008（Win64）-stable”行中的正确版本，因为Python是由1500构建的。
下载GDAL核心组件的通用安装程序。就我而言-gdal-110-1500-x64-core.msi
下载GDAL python绑定的安装程序（需要安装GDAL核心）。在我的情况下， GDAL-1.10.0.win-amd64-py2.7.msi-之所以选择它是因为1.10.0是最新版本，而我的Python是2.7.5。
安装GDAL核心组件。没有为GDAL Core选择目标文件夹的选项。它将安装到“ C：\ Program Files \ GDAL”文件夹中。
安装GDAL python绑定。
绑定之后，您可以将C：\ Program Files中的GDAL文件夹移到您想要的任何位置。
最后，单击开始菜单，然后单击所有程序 ，然后单击GDAL 。这应该启动命令行命令行提示符。

因此，假设您已完成设置GDAL2Tiles软件环境的过程（有时很痛苦！），那么该对它进行一些处理了。

无论您使用的是OSGeo4W还是GDAL环境，您的命令提示符都应类似于上述屏幕截图。现在，您可以开始使用GDAL2Tiles脚本。

首先，您需要导航到要切片的地图所在的文件夹。（这些命令对于到达所需位置很有用： dir为您提供当前目录中所有内容的列表， cd表示更改目录， cd ..表示将树上移一级）。

放入正确的文件夹后，即可开始创建图块。要在本教程中创建演示图，这些是我使用的命令-

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 -910307.6791052371 8109796.717743561 -gcp 7248 0 196252.07012218982 8109796.717743561 -gcp 7248 10929 196252.07012218982 6438749.514630105 part2_rainfall_map.png out.vrt

gdal2tiles.py -p mercator -z 6-10 out.vrt

要解释这些命令的作用，请参见gdal_translate页面和gdal2tiles.py页面。还有一个与GDAL紧密相关的warp命令，但在这种情况下不需要。需要注意的几件事是：

三个-gcp属性与地图的三个角相关。每个gcp属性后的第一对值与输入图像文件的像素尺寸有关，第二对值是以球度计的坐标（不是纬度和经度-参见上文）。

因此，将其应用于您的地图：

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 west north -gcp width_of_your_input_map_file_in_pixels 0 east north -gcp width_of_your_input_map_file_in_pixels height_of_your_input_map_file_in_pixels east south your_input_file_name.png your_output_file_name.vrt

gdal2tiles.py -p mercator -z zoom_range name_of_output_file.vrt

触发第二条命令后，您的计算机将开始运作并开始切割图像以创建地图图块。如果您不确定要使用命令提示符在文件夹中浏览，则可能需要查看我在OSGeo4W和GDAL环境中键入的确切命令。

了解输出

无论您使用哪种方法来生成图块，生成的文件夹都是相同的。

Google地图上的所有图块均具有“ x”和“ y”值。（是-还有另一个不同的坐标系！）文件夹的第一级是缩放级别，然后在文件夹的下一层是'x'坐标，在文件名是'y'坐标。

如果您查看此网站上的地图，应该会看到瓷砖名称匹配。换句话说，转到您想要的位置，调整缩放级别，使其与您的文件夹名称匹配，然后查看Google的“ x”和“ y”值。您应该看到它们与相应地图图块的子文件夹和文件名匹配。

为了再次检查您的图块是否正常，我强烈建议将为最低缩放级别生成的一个或两个图块复制回上一步中创建的地图文件（例如Photoshop文件）中。检查它们是否完全适合您的地图顶部。看一下我提供的源文件中的示例。

如果一切顺利，那么-祝贺您-辛苦了！

帮助，我的地图图块命名不正确！

噢亲爱的。如果您使用的是较旧版本的MapTiler软件或GDAL2Tiles脚本，则会发生这种情况。您的文件（而不是文件夹）使用TMS命名约定命名。如果您查看此页面上的图块，则可以看到每个图块都有两个x和y值。即。 Google对和TMS对。我们只需要将它们重命名为Google地图命名约定即可。

重命名可以手动完成，但对于大多数地图而言，这将花费太长时间。幸运的是，有一个方便的shell脚本可以为您完成这项工作。您需要了解一些非常基本的Linux命令，例如如何更改文件夹。在运行Shell脚本之前，请复制您的图块以进行处理。

#!/bin/sh
for thisPath in `ls -d */*/*`
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1&lt;&lt;zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

将以上脚本复制并粘贴到记事本中，并以名称“ rename”和扩展名“ .sh”保存。在记事本中保存“ sh”文件时，请确保已选中“另存为类型”旁边的“所有文件”，并在名称中加上引号，例如“ rename.sh”。

如果您使用的是Mac，则可以在Terminal中运行此Shell脚本（选择Applications然后Utilities然后Terminal ）。

如果您使用的是Windows计算机，则要运行Shell脚本（或“ .sh”文件），您需要使用Cygwin，这是Windows的类似于Linux的环境：

下载并安装Cygwin
将您刚刚保存的“ rename.sh”文件复制到cygwin \ bin文件夹中。
启动Cygwin。
移至cygwin \ bin文件夹。（即cd表示更改目录， cd ..表示将树上移一级，而ls表示显示当前目录中的文件和文件夹。）
通过运行chmod 755 rename.sh使rename.sh可执行文件
您还需要先将其转换为Linux文件，然后再运行它，否则会出现由换行符引起的“ \ r”错误。因此，请运行以确保您仍在cygwin \ bin文件夹中，然后运行d2u rename.sh
然后移至包含磁贴的文件夹（请参见上面的屏幕截图）。
然后运行脚本，键入rename.sh

Shell脚本运行后，您可以通过再次查看文件来检查其是否完成。检查其名称现在是否与此页面上的Google坐标匹配。

如果您比较源文件中“第3部分文件”和“第4部分文件”文件夹中的文件名，则可以看到区别。

压缩地图标题

为了确保地图尽可能平稳地运行，可以压缩地图图块。

有多种用于png图像的免费压缩实用程序，但我努力（失败了）找到了一个完全免费且能完成工作的实用程序。例如，流行的PNGGauntlet软件没有保留文件夹结构，而其他免费实用程序对文件的最大数量有限制。

最后，我不得不硬着头皮购买PNGOUTWin软件。花费约10英镑，考虑到节省下来的人手，这是便宜的！ PNGOUTWin既保留文件结构，又让您一次压缩所有文件。

如果使用PNGOUTWin，则非常直观。我唯一的警告是，您应该复制磁贴的副本，然后在该副本上运行软件。另外，请注意，选择文件夹后，该软件将立即启动！

JavaScript Magic将所有内容整合在一起

好的，我们快到了。剩下的就是将可爱的新地图图块附加到Google地图上的小事了。

基本守则

首先，看一个平铺的地图覆盖的简单示例（源文件可从此页面顶部的链接中找到）。

如果放大和缩小，地图叠加层将保持不变。

//setting up the rainfall map overlay
var rainMapOverlay = new google.maps.ImageMapType({
 getTileUrl: function(coord, zoom) {
 return 'tiles/rainfall' + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png';
 },
 tileSize: new google.maps.Size(256, 256)
});

此代码段使用ImageMapType类创建自定义叠加层。 coord.x与文件夹名称有关，而coord.y与文件名称有关。这些在代码中结合在一起，以创建每个图块的路径。

与英国节日地图挂钩

这是您的目标最终产品。为此，可以使用上一教程末尾介绍的相同技术。

我们首先创建一个变量（ rainfallOverlayToggle ）来保存当前是否显示天气覆盖图。然后，在handelRequests函数中创建一个新选项来处理单击伞形按钮（ brolly ）时的情况。

//Displays the rainfall map when the unbrella button is clicked, and removed it if is already showing.
else if (buttonPressed === "rainfall"){
//If the rainfall map is NOT showing aleady then show it ...
if (rainfallOverlayToggle === 0){
//Overlays the rainfall map on top of the Google map
festivalMap.overlayMapTypes.insertAt(0, rainMapOverlay);
//Show the weather key.
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].push(weatherKeyDiv);
rainfallOverlayToggle = 1;
}
//If the rainfall map is showing already then hide it ...
else {
//remove the overlay map.
festivalMap.overlayMapTypes.removeAt(0, rainMapOverlay);
//remove the weather key
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].pop(weatherKeyDiv);
rainfallOverlayToggle = 0;
}
}

接下来是什么？

做得好，到达终点！如果您有任何疑问，请在评论中提问。下一个教程将介绍如何连接到Flickr API，使您可以自动从Flickr抓取照片并将其显示在地图上。

图片积分

墨卡托投影图-Wikipedia
盖尔·彼得斯投影图- 维基百科

翻译自: https://webdesign.tutsplus.com/tutorials/the-google-maps-api-and-custom-overlays--webdesign-13868