2D 图块概览

路线图示例地图图块只是将世界划分成一个索引区域 网格。它可以让您高效、动态地访问和利用地图数据 绘制地图。借助 Map Tiles API，您可以 多个主题地理数据集，包括 Google 精选的地理数据集：

  • 基于矢量地形数据与 Google 的 制图样式

  • 通过卫星和机上摄像机拍摄的正交摄影， 地球的自上而下（底部）图像。

  • 山影等高线地图。

2D 地图图块都已设置地理参考并彼此对齐。已选中 根据视口的地理范围和缩放级别进行缩放。缩放级别 范围从 0 到 22（查看街道和 块）。

地图主题

您可以获取以下地图主题的地图图块。

地图主题 说明
路线图 道路、建筑物、地图注点和行政区划边界
卫星 从太空拍摄的摄影图像
地形 显示植被等自然地貌的等高线地图

要从 Map Tiles API 请求地图图块，您必须先请求 会话令牌。会话令牌 可跟踪地图和视口的当前状态。当您设置会话时 令牌，您必须设置 mapType 值以匹配您想要的地图主题。 然后，您必须在每个 向 Map Tiles API。

视口信息请求

视口定义了用于为世界场景构建框架的框的大小。视口 信息请求会返回有关组成 当前视口请求视口信息的原因在于 以免请求不存在的缩放级别的图像。

例如，大部分城市的图像都只有 22 级的缩放级别，但海洋图像的缩放级别没有 最终只会显示没有特征的蓝色方块。

视口请求是一个采用以下格式的 HTTPS GET 请求。

curl "https://tile.googleapis.com/tile/v1/viewport?session=YOUR_SESSION_TOKEN&key=YOUR_API_KEY&zoom=zoom&north=north&south=south&east=east&west=west"

该请求包含以下字段：

zoom
视口的缩放级别。
north、south、east、west
视口中最远的北、南、东和西点，以 度。南北必须在 (-90,90) 范围内，东西必须在 范围 (-180, 180)。要表示跨越对向子午线的边界，可以向西 正值（例如 170），东值可以是负值（例如 -170）。全部 参数为必填项。

视口信息响应

视口响应会告诉您哪些区域有图像，以及图像的缩放级别 级别。视口信息响应采用以下格式。

{
  "copyright": "Map data ©2023",
  "maxZoomRects": [
    {
      "maxZoom": 19,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 9,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 14,
      "north": 84.375,
      "south": -84.375,
      "east": 180,
      "west": -180
    }, ...
  ]
}

响应正文包含以下字段。

copyright
包含地图来源信息字符串，当您 用于显示路线图和卫星图块。有关详情，请参阅 Map Tiles API 政策。
maxZoomRect
包含一组与当前重叠的边界矩形 视口还包含每个矩形内可用的最大缩放级别。

图块坐标函数

大多数编程语言都提供转换工具（简单函数） 从纬度/经度对改为特定缩放级别的图块坐标。 我们来考虑以下 JavaScript 代码示例，该示例首先从 latLng 到某个点，然后从一个点到图块坐标。

var TILE_SIZE = 256;

function fromLatLngToPoint(latLng) {
  var mercator = -Math.log(Math.tan((0.25 + latLng.lat() / 360) * Math.PI));
  return {
    x: TILE_SIZE * (latLng.lng() / 360 + 0.5),
    y: TILE_SIZE / 2 * (1 +  mercator / Math.PI)
  };
}

function fromLatLngToTileCoord(latLng, zoom) {
  var point = fromLatLngToPoint(latLng);
  var scale = Math.pow(2, zoom);

  return {
    x: Math.floor(point.x * scale / TILE_SIZE),
    y: Math.floor(point.y * scale / TILE_SIZE),
    z: zoom
  };
}