一個線上下載地圖XYZ瓦片的網站實現

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

地圖網站

1. 什麼是XYZ瓦片

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

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

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

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

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

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

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

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

Latlon to tile.png

圖片來源：Slippy map tilenames - OpenStreetMap Wiki

現在解釋一下原理

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

File:Tiled web map numbering.png

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} \]
這個函式影像如下圖所示：

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

3. 實現XYZ瓦片的線上下載

3.1 技術選型

Vue3 + element-plus + jszip + OpenLayers

此專案在UI部分基於專案：xiaolidan00/offline-map-download: 純前端離線瓦片地圖下載 (github.com)的UI進行修改

3.2 核心程式碼

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

function download() {
  const latlngMin = toLonLat([rect.value[0], rect.value[3]]);
  const latlngMax = toLonLat([rect.value[2], rect.value[1]]);

  const list = [];
  for (let z = 0; z < 20; z++) {
    const xMin = lon2tile(latlngMin[0], z);
    const yMin = lat2tile(latlngMin[1], z);
    const xMax = lon2tile(latlngMax[0], z);
    const yMax = lat2tile(latlngMax[1], z);

    if (zoomMap.value[z]) {
      for (let x = xMin; x <= xMax; x++) {
        for (let y = yMin; y <= yMax; y++) {
          list.push({ x, y, z });
        }
      }
    }
  }
  downloadTiles(list);
}

async function downloadTiles(list) {
  isLoading.value = true;
  const total = list.length;
  let count = 0;
  let zip = new JSZip();
  for (let i = 0; i < list.length; i += 6) {
    let promises = [];
    if (i + 6 > list.length) {
      promises = list.slice(i, list.length).map(async (item) => {
        const blob = await downloadTile(item.x, item.y, item.z)
        zip.file(`${item.z}/${item.y}/${item.x}.png`, blob);
        count++;
        process.value = ((count / total) * 100).toFixed(2);
      });
    } else {
      promises = list.slice(i, i + 6).map(async (item) => {
        const blob = await downloadTile(item.x, item.y, item.z)
        zip.file(`${item.z}/${item.y}/${item.x}.png`, blob);
        count++;
        process.value = ((count / total) * 100).toFixed(2);
      });
    }
    await Promise.all(promises);
  }
}

function downloadTile(x, y, z) {
  return new Promise((resolve, reject) => {
    fetch(url.value.replace('{x}', x).replace('{y}', y).replace('{z}', z))
      .then((res) => res.blob())
      .then((blob) => {
        resolve(blob);
      })
      .catch((err) => {
        reject(err);
      });
  });
}