將圖格圖層新增至地圖

本文會示範如何在地圖上覆蓋圖格圖層。 圖格圖層可讓您在 Azure 地圖服務的地圖底圖上覆蓋影像。 如需 Azure 地圖服務並排系統的詳細資訊,請參閱縮放層級和圖格格線

圖格圖層會從伺服器載入圖格。 這些影像可以預先轉譯或動態轉譯。 預先轉譯的影像會如同其他影像一樣,使用圖格圖層所理解的命名慣例儲存在伺服器上。 動態轉譯的影像會使用一項服務來載入接近即時的影像。 Azure 地圖服務的 TileLayer 類別支援三種不同的圖層服務命名慣例:

  • X、Y、縮放標記法 - x 是行,y 是圖格在圖格格線中的列位置,而縮放標記法是以縮放層級為基礎的值。
  • Quadkey 標記法 - 將 x、y 和縮放資訊合併成單一字串值。 此字串值會變成單一圖格的唯一識別碼。
  • 週框方塊 - 以週框方塊座標格式指定影像:{west},{south},{east},{north}。 此格式通常由 Web 對應服務 (WMS) 使用。

提示

TileLayer 是視覺化地圖上大型資料集的好方法。 不只可以從影像產生圖格圖層,向量資料也可轉譯為圖格圖層。 藉由將向量資料轉譯為圖格圖層,地圖控制項就只需載入圖層,而這比向量資料所表示的檔案大小還要小。 這項技巧常用於轉譯地圖上數百萬個資料列。

傳遞至圖格圖層的圖格 URL 必須是 TileJSON 資源的 http 或 https URL,或是使用下列參數的圖格 URL 範本:

  • {x} - 圖格的 X 位置。 也需要 {y}{z}
  • {y} - 圖格的 Y 位置。 也需要 {x}{z}
  • {z} 圖格的縮放層級。 也需要 {x}{y}
  • {quadkey} -圖格 quadkey 識別碼,以 Bing Maps 圖格系統的命名慣例為基礎。
  • {bbox-epsg-3857} - 使用 {west},{south},{east},{north} 格式的週框方塊字串,位在 EPSG 3857 空間參考系統中。
  • {subdomain} - 已新增子網域值的預留位置 (如果已指定 subdomain)。
  • {azMapsDomain} - 預留位置,用於對齊圖格要求的網域和驗證與地圖所使用的相同值。

新增圖格圖層

此範例示範如何建立可指向一組圖格的圖格圖層。 此範例使用 x、y、縮放並排系統。 此圖格圖層的來源是 OpenSeaMap 專案,其中包含群眾外包的航海圖。 在理想的情況下,在檢視雷達資料時,使用者會在瀏覽地圖時清楚看到城市標籤。 此行為可藉由將圖格圖層插入在 labels 圖層下方來實作。

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

如需示範如何使用 x、y、縮放圖格系統建立指向一組圖格的圖格圖層的完整功能範例,請參閱 Azure 地圖服務範例 中的 使用 X、Y 和 Z 的圖格圖層 範例。 此範例中圖格圖層的來源是來自 OpenSeaMap 專案 的航海圖,這是 ODbL 授權的 OpenStreetMaps 專案。 如需此範例的原始程式碼,請參閱 使用 X、Y 和 Z 原始程式碼的圖格圖層

A screenshot of map with a tile layer that points to a set of tiles using the x, y, zoom tiling system. The source of this tile layer is the OpenSeaMap project.

新增 OGC Web 對應服務 (WMS)

Web 對應服務 (WMTS) 是開放地理空間協會 (OGC) 標準,用於提供地圖資料的影像。 有許多以此格式提供的開放資料集,您可搭配 Azure 地圖服務使用。 如果服務支援 EPSG:3857 座標參考系統 (CRS),則此類型的服務可與圖格圖層搭配使用。 使用 WMS 服務時,請將寬度和高度參數設定為服務所支援的值,務必在 tileSize 選項中設定此值。 在格式化的 URL 中,使用 {bbox-epsg-3857} 預留位置設定服務的 BBOX 參數。

如需示範如何建立指向 Web 對應 (WMS) 的圖格圖層的完整功能範例,請參閱 Azure 地圖服務範例 中的 WMS 圖格圖層 範例。 如需此範例的原始程式碼,請參閱 WMS 圖格圖層原始程式碼

下列螢幕擷取畫面會顯示 WMS 圖格圖層 範例,此範例會重疊來自美國 的地質資料 Web 對應服務。地圖頂端和標籤下方的地質調查局 (USGS)

A screenshot of a world map with a tile layer that points to a Web Mapping Service (WMS).

新增 OGC Web 對應圖格服務 (WMTS)

Web 對應圖格服務 (WMTS) 是開放地理空間協會 (OGC) 標準,可針對地圖提供以圖格為基礎的重疊。 有許多以此格式提供的開放資料集,您可搭配 Azure 地圖服務使用。 如果服務支援 EPSG:3857GoogleMapsCompatible 座標參考系統 (CRS),則此類型的服務可與圖格圖層搭配使用。 使用 WMTS 服務時,請將寬度和高度參數設定為服務所支援的相同值,也務必在 tileSize 選項中設定此值。 在格式化的 URL 中,據此取代下列預留位置:

  • {TileMatrix} =>{z}
  • {TileRow} =>{y}
  • {TileCol} =>{x}

如需示範如何建立指向 Web 對應圖格服務 (WMTS) 的完整功能範例,請參閱 Azure 地圖服務範例 中的 WMS 圖格圖層 範例。 如需此範例的原始程式碼,請參閱 WMTS 圖格圖層原始程式碼

下列螢幕擷取畫面會顯示 WMTS 圖格圖層範例,其中重疊來自美國影像的 Web 對應圖格服務。位於地圖上方,道路和標籤下方的地質調查局 (USGS) 國家地圖。

A screenshot of a map with a tile layer that points to a Web Mapping Tile Service (WMTS) overlay.

自訂圖格圖層

圖格圖層類別有許多樣式選項。 圖格圖層選項 範例是試用它們的工具。如需此範例的原始程式碼,請參閱 圖格圖層選項原始程式碼

A screenshot of Tile Layer Options sample.

下一步

深入了解本文使用的類別和方法:

請參閱下列文章,以取得更多可新增至地圖的程式碼範例: