GIS中XYZ瓦片的載入流程解析與實現

当时明月在曾照彩云归發表於2024-04-26

1. 什麼是XYZ瓦片

XYZ瓦片是一種線上地圖資料格式，常見的地圖底圖如Google、OpenStreetMap 等網際網路的瓦片地圖服務，都是XYZ瓦片，嚴格來說是ZXY規範的地圖瓦片

ZXY規範的地圖瓦片規則如下：將地圖全幅顯示時的圖片從左上角開始，往下和往右進行切割，切割的大小預設為 256*256 畫素，左上角的格網行號為 0，列號為 0，往下和往右依次遞增，如下圖所示：

image

  • 圖片來源：ZXY標準瓦片 (supermap.com.cn)

從整體來說，XYZ瓦片資料結構是一種影像金字塔，如下圖所示：

image

  • 圖片來源：瓦片底圖：線上地圖的下載和使用 | Mars3D開發教程，此圖僅供參考，圖中的行列號和ZXY規範的地圖瓦片的行列號編碼存在差異

對於使用者端的軟體來說，所謂瀏覽XYZ格式的地圖，就是根據當前的縮放等級和螢幕顯示的地理範圍，去服務端載入對應的XYZ瓦片（通常是PNG圖片）

2. XYZ瓦片與經緯度的計算以及原理

首先給出經緯度與XYZ行列號之間的計算公式：

image

  • 圖片來源：Slippy map tilenames - OpenStreetMap Wiki

現在解釋一下原理

下面是一張OpenStreetMap在zoom等級為2時的瓦片示意圖

image

z 是當前的瓦片等級，就是縮放等級，由上面的圖可以看出：z 等級時，共有\(2^z\)個瓦片，x範圍為0-\(2^z-1\)，y範圍也是0-\(2^z-1\)

首先 x 的計算很簡單：

  • 目的：將經度從-180度到180度，對映到0到\(2^z\)之間的整數列號上
  • 過程：先將經度加180度,使其從0到360度,然後除以360（歸一化）再乘以\(2^z\)得到行號，最後向下取整數部分，得到最終的行號

y 的計算就複雜多了：

  • 目的：將緯度從-90度到90度，對映到0到\(2^z\)之間的整數行號上

  • 存在的問題：緯度分佈不均勻，XYZ瓦片試圖將地圖展開為一個正方形（參考上圖，本質上就是Web墨卡託投影），然而緯度是中間（赤道）長兩極短，如果只是像 x 一樣簡單的對映，會導致兩極的緊湊，赤道附近稀疏

  • 解決方案：將緯度透過一種對映，使其能均勻一點，然後就採用了下面的函式

    \[y=\frac{\left(1-\ln(\tan(x)+1/\cos(x))/\pi\right)}{2} \]

    這個函式影像如下圖所示：

image

  • 過程：在採取上面的這個緯度的對映函式以後（歸一化），再乘以\(2^z\)，最後向下取整數部分，得到最終的列號

3. 在瀏覽器端實現XYZ瓦片的載入示例

3.1 計算公式實現

根據上面的公式，很容易就把根據經緯度算行列號的函式寫出來

function lon2tile(lon, zoom) { 
    return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)))
}

function lat2tile(lat, zoom) { 
    return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)))
}

事實上，這個網站已經給出了這個公式的各種程式語言的實現：Slippy map tilenames - OpenStreetMap Wiki

3.2 核心程式碼

根據經緯度計算XYZ瓦片的URL，並載入到瀏覽器上，核心程式碼如下

function lon2tile(lon, zoom) {
    return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
}

function lat2tile(lat, zoom) {
    return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
}

const loadMapByBounds = (minLon, minLat, maxLon, maxLat, zoom) => {
    const minTileX = lon2tile(minLon, zoom);
    const minTileY = lat2tile(maxLat, zoom); // Y軸是反的，自上而下
    const maxTileX = lon2tile(maxLon, zoom);
    const maxTileY = lat2tile(minLat, zoom);
    for (let x = minTileX; x <= maxTileX; x++) {
        for (let y = minTileY; y <= maxTileY; y++) {
            loadTile(x, y, zoom); // 載入瓦片
        }
    }
}

3.3 完整實現

為了簡單，這裡使用img標籤來載入瓦片圖，並根據瓦片編號排列，設定對應的偏移值

為了能拖動以瀏覽全圖實現簡單的互動，這裡還設定了根據滑鼠按壓後拖動的偏移值來新增對應的偏移值

實現效果如下：

image

完整程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 256px;
            height: 256px;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }

        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        function lon2tile(lon, zoom) {
            return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
        }

        function lat2tile(lat, zoom) {
            return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
        }

        // 根據滑鼠滾輪縮放地圖
        let zoom = 2;

        document.body.onwheel = (e) => {

            if (e.deltaY > 0) {
                zoom--;
            } else {
                zoom++;
            }
            if (zoom < 0) {
                zoom = 0;
                return;
            }

            document.querySelector('#map').innerHTML = "";
            // EPSG:3857（Web墨卡託投影） 對應的 WGS84範圍：-180.0 ，-85.06，180.0， 85.06，不在這個經緯度範圍內，地圖會顯示異常（沒有這個瓦片）
            const x1 = lon2tile(-179, zoom);
            const y2 = lat2tile(-80, zoom);
            const x2 = lon2tile(179, zoom);
            const y1 = lat2tile(80, zoom);
            const centerX = (x1 + x2) / 2;
            const centerY = (y1 + y2) / 2;

            for (let y = y1; y <= y2; y++) {
                for (let x = x1; x <= x2; x++) {
                    const img = document.createElement("img");
                    img.src = `https://a.tile.openstreetmap.org/${zoom}/${x}/${y}.png`;
                    img.alt = `${zoom}-${x}-${y}`;
                    img.style.position = "absolute";
                    img.draggable = false;
                    // img.style.left = `${(x - x1) * 256}px`;
                    // img.style.top = `${(y - y1) * 256}px`;
                    img.style.left = `${(x - centerX) * 256 + 256}px`;
                    img.style.top = `${(y - centerY) * 256 + 256}px`;
                    document.querySelector('#map').appendChild(img);
                }
            }

        }

        const event = new Event("wheel")
        document.body.dispatchEvent(event);

        document.body.onmousedown = (e) => {
            document.body.style.cursor = "grabbing";
            document.querySelector('#map').onmousemove = (e) => {
                // 移動地圖
                const x = e.movementX;
                const y = e.movementY;
                const map = document.querySelector('#map');
                map.childNodes.forEach((img) => {
                    img.style.left = `${parseInt(img.style.left) + x}px`;
                    img.style.top = `${parseInt(img.style.top) + y}px`;
                });
            }
        }

        document.body.onmouseup = (e) => {
            document.body.style.cursor = "default";
            document.querySelector('#map').onmousemove = null;
        }

    </script>
</body>

</html>

4. 參考資料

[1] Slippy map tilenames - OpenStreetMap Wiki

[2] ZXY標準瓦片 (supermap.com.cn)

[3] 瓦片底圖：線上地圖的下載和使用 | Mars3D開發教程

相關文章