iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
SideProject30

製作適用於網頁的台灣登山地圖系列 第 4

[Day4] 圖磚剖新之二-向量圖磚

  • 分享至 

  • xImage
  •  

昨天提到了圖磚(Tiles)的切法。不過值得注意的是,在範例中的 OSM 和 NLSC 圖磚,其提供的格式都是「圖片」。咦?「圖」磚不就是一塊塊正方形的圖片嗎? 其實在英文裡,Tile 僅僅只有「磚」的意思,只是中文習慣稱作「圖磚」(我猜是「地圖磚塊」的簡稱吧?)

以圖片為格式的圖磚,被稱作點陣圖磚(Raster Tile)。與之相對地,還有被稱為向量圖磚(Vector Tile)的種類。

點陣圖磚(Raster Tile)

原始的 GIS 資料已經預先渲染,因此圖磚的內容就是客戶端看到的地圖,前端毋需任何額外操作即可使用。這也意味著對終端使用者來講,硬體的性能不需要太高。與之相對地,伺服器端要產生點陣圖磚,會需要投入相對多的資源。

點陣圖磚一般會有 256x256 或 512x512 等兩種圖片大小,單一圖磚的大小可能從數十到數百KB不等。考量到圖片解析度,一張地圖需要由多個點陣圖磚組成,對頻寬的需求不可謂不大,在地圖上平移和縮放期間的載入時間可能會更長。

向量圖磚(Vector Tile)

向量圖磚則並非由影像組成,它的內容通常由點、線段或多邊形等地理資訊,以及各種自訂屬性的資料組成。地圖公司 Mapbox 於 2014 年提出 Mapbox Vector Tile 標準,簡寫為 MVT。通常來講,雖然 Google Map 也使用不公開規格的向量圖磚,但由於 MVT 是開放的標準,普及度較高,一般網路上在講的向量圖磚指的就是這種格式。

也因為它僅僅包含原始資料,客戶端取得後需要使用自訂的樣式進行渲染,接著才是人眼可見的地圖。樣式檔案通常是一份文字文件,定義哪些種類的地圖元素需要呈現哪種外觀,以及使用什麼字體和語言來渲染各種標籤。

與點陣圖磚比較,既然一切都在客戶端渲染,那麼向量圖磚就可以輕鬆地以最少的資源動態更新地圖的外觀。地圖在所有縮放層級上都可以銳利地顯示,而不會有點陣圖磚的解析度問題。

向量圖磚會因為所在位置和需求而包含不同原始資料,因此大小變化很大(例如,空無一物的海上和路網交錯的城市,其大小可能分別為 <1KB 和數百KB)。但就最普遍的圖磚服務來講,平均下來,其大小約為點陣圖磚的 20-50%,因此比較起來傳輸時間更短,處理所需的資源也更少。

MVT 是由 pbf(Protocol Buffers/protobufs) 格式所包裏,這種由 Google 公開標準的格式類似於一種壓縮方法,使用.proto來定義資料結構。MVT 的 .proto 檔內容大致如下:

package vector_tile;
option optimize_for = LITE_RUNTIME;

message Tile {

        ...
        enum GeomType {
             UNKNOWN = 0;
             POINT = 1;
             LINESTRING = 2;
             POLYGON = 3;
        }

        ...
        message Value {
            ...
        }

        // Features are described in section 4.2 of the specification
        message Feature {
                optional uint64 id = 1 [ default = 0 ];

                // Tags of this feature are encoded as repeated pairs of
                // integers.
                ...
                repeated uint32 tags = 2 [ packed = true ];

                // The type of geometry stored in this feature.
                optional GeomType type = 3 [ default = UNKNOWN ];

                ...
                repeated uint32 geometry = 4 [ packed = true ];
        }

        // Layers are described in section 4.1 of the specification
        message Layer {
                ...

                required string name = 1;

                // The actual features in this tile.
                repeated Feature features = 2;

                ...
        }
        
        repeated Layer layers = 3;
        ...
}

這邊並不對 .proto 檔案的語法作過多描述。不過只要大致掃一下,從檔案內容中也不難猜到 MVT 的資料結構:

  1. 一個 MVT 圖磚被表述為一個 Tile
  2. 一個 Tile 內可包含多個 Layer
  3. 一個 Layer 內可包含多個 Feature
  4. 一個 Feature 內可包含多個 tag,用以表示各種自訂屬性
  5. 一個 FeatureGeomType(幾何性質) 一定是 UNKNOWN(未知), POINT(點), LINESTRING(線段), POLYGON(多邊形)任一種
  6. 一個 Feature 的幾何形狀由 geometry 決定

因此由下至上,我們可以說圖磚內包含的基本單位是 Feature,它有自己在圖磚空間中的形狀位置,也有一堆屬性可以定義。而一群相關的 Feature 可以組成一個 Layer

例如在實務上,圖磚製作者可能將一堆建築物的 Feature 組成名稱為 buildingsLayer,一堆道路的 Feature 組成名稱為 transportation 的另一個 Layer

Layer 分組的好處在於:渲染地圖時,樣式檔案可以根據 Layer 來定義規則,一次渲染其內含有的所有 Feature! (當然根據 Feature 的各種屬性值,同一 Layer 內的 Feature 其渲染的結果也可能不同)

結語

向量圖磚正是本次系列文的主角,和點陣圖磚比起來有以下優缺點:

優點:

  • 尺寸更小: 對伺服器空間的需求更低
  • 更低的網路耍求
  • 更快的載入時間
  • 流暢的縮放體驗
  • 在不增加檔案大小的情況下,在所有縮放層級上顯示高解析度的地圖
  • 可自訂義渲染樣式

缺點:

  • 渲染在終端使用者的設備上,對硬體需求較高

我會在之後的文章中提到如何利用開源軟體自行產製向量圖磚,並製作相應的渲染樣式。


上一篇
[Day3] 圖磚剖析之一
下一篇
[Day5] 圖磚剖新之三-Terrain-RGB
系列文
製作適用於網頁的台灣登山地圖25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言