2D 資訊方塊總覽

藍圖範例地圖圖塊只是將世界劃分為索引編號格線。讓您在多個地圖比例尺上，以動態方式存取及使用地圖資料。Map Tiles API 可讓您 多個主題地理資料集，包括 Google 收錄：

  • 使用 Google 製圖樣式

  • 使用衛星相機和空拍相機拍攝的正攝影相片 地球上由上至下 (天底) 的圖像。

  • Hillshade 等距地圖。

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
  };
}