共用方式為


在地圖中新增影像圖層

本文說明如何在一組固定座標上覆蓋影像。 以下是可覆蓋在地圖上不同影像類型的一些範例:

  • 無人機所擷取的影像
  • 建物平面圖
  • 歷史性或其他特製化地圖影像
  • 施工現場的藍圖
  • 氣象雷達影像

提示

ImageLayer 可讓您輕鬆快速地在地圖上覆蓋影像。 請注意,瀏覽器可能難以載入大型影像。 在此情況下,請考慮將影像分拆成小影像,再將小影像載入地圖作為 TileLayer

影像圖層支援下列影像格式:

  • JPEG
  • PNG
  • BMP
  • GIF (無動畫)

新增映像圖層

下列程式碼在地圖上覆蓋 1922 年紐澤西紐瓦克地圖的影像。 系統會建立 ImageLayer,所用方法是傳遞影像 URL 和四個角落的座標 (格式為 [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner])。

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

如需完整功能範例以示範如何將 1922 年紐華克新紐澤西地圖影像重疊為影像圖層,請參閱 Azure 地圖服務範例中的簡單影像圖層。 如需此範例的原始程式碼,請參閱簡單的影像圖層原始程式碼

螢幕擷取畫面顯示 1922 年紐瓦克新澤西州地圖影像作為影像圖層的地圖。

將 KML 檔案匯入為地面重疊

此範例說明如何在地圖上覆蓋 KML 地面重疊資訊來作為影像圖層。 KML 地面重疊會提供東西南北座標,以及逆時鐘旋轉資訊。 但是,影像圖層預期影像的每個角落都有座標。 此範例中的 KML 地面重疊是沙特爾主教座堂,其資料來源是 Wikimedia

程式碼會使用 ImageLayer 類別中的靜態 getCoordinatesFromEdges 函式。 其會使用 KML 地面重疊的東西南北和旋轉資訊來計算影像的四個角落。

如需完整功能範例以示範如何使用 KML Ground Overlay 作為影像圖層,請參閱 Azure 地圖服務範例中的 KML Ground Overlay 作為影像圖層。 如需此範例的原始程式碼,請參閱 KML Ground Overlay 作為影像圖層

螢幕擷取畫面顯示 KML 地面重疊顯示為影像圖層的地圖。

提示

使用影像圖層類別的 getPixelsgetPositions 函式,在定位影像圖層的地理座標與區域影像像素座標之間轉換。

自訂影像圖層

影像圖層有許多樣式選項。 如需完整功能範例以示範影像圖層不同選項如何影響轉譯,請參閱 Azure 地圖服務範例中的影像圖層選項。 如需此範例的原始程式碼,請參閱影像圖層選項原始程式碼

顯示地圖的螢幕擷取畫面,其中包含具有影響轉譯之影像圖層不同選項的面板。在此範例中,您可以變更樣式選項,並查看其在地圖上的效果。

下一步

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

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