Nếu bạn đã dùng Google Maps, OpenStreetMap, hay bất kỳ bản đồ web hiện đại nào trong thập kỷ qua, mọi con đường và tòa nhà bạn thấy có lẽ được tải dưới dạng vector tile. Định dạng này là anh hùng thầm lặng của bản đồ web hiện đại. Chính nó làm cho bản đồ web tải nhanh, sắc nét trên mọi màn hình, và cho phép designer ra mắt các bản đồ style đẹp mà không cần render lại cả thế giới cho mỗi thương hiệu.
Hướng dẫn này giải thích vector tile là gì, cách nó hoạt động, tại sao nó thay thế raster tile cho hầu hết use case, và cách MapAtlas phục vụ chúng trong production.
Định Nghĩa Trong Một Câu
Vector tile là file nhị phân nhỏ chứa các feature địa lý cho một ô bản đồ ở một mức zoom cụ thể, được mã hóa dưới dạng dữ liệu chứ không phải ảnh đã render sẵn.
Phần "dữ liệu chứ không phải ảnh" mới là điều cốt lõi. Với raster tile, server đã quyết định từng pixel trông như thế nào. Với vector tile, client nhận được hình học cơ bản (đường, polygon, điểm) và nhãn, rồi render chúng ngay lập tức theo bất kỳ style nào người dùng chọn.
Cách Bản Đồ Web Dùng Tile
Mọi bản đồ web bạn từng dùng chia thế giới thành một lưới tile. Ở zoom 0, toàn bộ thế giới vừa trong một tile. Ở zoom 1 có 4 tile, zoom 2 có 16, và cứ thế. Mỗi tile được xác định bởi ba số: zoom (z), cột (x) và hàng (y). Khi bạn pan hoặc zoom, thư viện bản đồ chỉ fetch các tile hiển thị, cache chúng, và bỏ đi những cái đã rời khỏi viewport.
Với raster tile, server pre-render PNG cho mỗi (z, x, y). Cách này hoạt động nhưng có hạn chế: style được cố định tại thời điểm render, mỗi thay đổi style đồng nghĩa với việc render lại cả thế giới, và ảnh phải được ship ở độ phân giải 1x và 2x để trông sắc nét trên màn hình Retina.
Vector tile đảo ngược mô hình. Server ship hình học. Client render. Một tileset hỗ trợ bất kỳ số lượng style nào, sắc nét ở mọi DPI, và nhỏ khi truyền.
Định Dạng MVT
Định dạng tiêu chuẩn de facto là MVT, Mapbox Vector Tile specification. MVT là encoding Protocol Buffers tổ chức các feature thành các layer có tên, thường là:
transportation(đường, đường sắt)buildings(footprint)places(thành phố, thị trấn, khu phố có tên)landuse(công viên, khu dân cư, thương mại)water(đại dương, hồ, sông)boundaries(khu vực hành chính)
Mỗi feature trong một layer có hình học (điểm, đường, polygon) và một tập hợp thuộc tính (tên, loại, mức độ quan trọng, biến thể ngôn ngữ). Tọa độ hình học là số nguyên trong không gian tọa độ cục bộ của tile, từ 0 đến 4096, chính điều này tạo ra kích thước nhỏ gọn của MVT.
MVT hoàn toàn mở, không phụ thuộc vendor, và được hỗ trợ bởi mọi rendering engine lớn: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, và các Mapbox SDK cho iOS và Android.
Tại Sao Vector Tile Thay Thế Raster Tile
Có năm lý do tại sao bản đồ web hiện đại hầu như đều dùng vector tile cho base layer:
Linh hoạt style. Với một tileset bạn có thể render giao diện sáng, tối, tối ưu cho in, overlay satellite, và style màu thương hiệu cho marketing. Không cần render lại trên server.
Sắc nét ở mọi DPI. Raster tile ở 1x trông mờ trên màn hình Retina. Vector tile được render mới trên client ở độ phân giải gốc của thiết bị.
Payload nhỏ hơn. Tile đô thị phức tạp thường nhỏ hơn dưới dạng MVT so với PNG chất lượng cao, đặc biệt khi gzip.
Tương tác tại thời điểm chạy. Bạn có thể highlight một con đường cụ thể khi hover, làm mờ các layer không dùng, animate transition, và phản hồi click trên feature vì client biết mỗi pixel đại diện cho gì.
Zoom và xoay mượt mà. Hình học vector xoay và scale mà không bị aliasing. Raster tile trông bị vỡ pixel khi zoom giữa các mức zoom nguyên hoặc xoay khỏi trục.
Chi phí là công việc CPU và GPU của client, điều không thành vấn đề với bất kỳ thiết bị nào sản xuất trong thập kỷ qua.
Những Gì Bạn Style Tại Thời Điểm Chạy
Một tài liệu style (thường là JSON theo Mapbox Style Spec, cũng được MapLibre áp dụng) mô tả cách vẽ mỗi layer. Ví dụ những gì bạn có thể thay đổi mà không cần chạm vào dữ liệu tile:
- Màu sắc của mọi lớp đường
- Độ rộng đường, thay đổi theo zoom
- Nhãn địa điểm nào hiển thị ở zoom nào
- Font, cỡ chữ và viền của mọi nhãn văn bản
- Khả năng hiển thị của toàn bộ layer (tắt tất cả ranh giới hành chính bằng một toggle)
- Pattern fill, đường nét đứt, gradient, hiệu ứng blur
Đây chính là điều làm cho branded map khả thi. Một design team có thể ship một Mapbox style JSON, MapLibre style JSON, hoặc MapAtlas style preset và cùng tileset đó sẽ render theo nhận diện thương hiệu của họ.
Caching và Hiệu Suất
Vector tile được cache rất tốt vì hình học của thế giới không thay đổi mỗi phút. CDN edge cache thường giữ MVT tile trong vài giờ hoặc ngày. Thư viện bản đồ prefetch tile trước hướng pan có thể của người dùng và giữ các tile đã xem gần đây trong bộ nhớ. Kết quả là người dùng pan qua một thành phố có trải nghiệm mượt mà vì tile cho viewport tiếp theo thường đã được tải.
Các tile service production thường expose tile tại đường dẫn như /{z}/{x}/{y}.pbf (PBF là phần mở rộng nhị phân protobuf). Một kết nối HTTP/2 hoặc HTTP/3 hiện đại ghép hàng chục yêu cầu tile song song.
MapAtlas Phù Hợp Ở Đâu
MapAtlas phục vụ MVT-compatible vector tile cho sản phẩm Dynamic Maps, với host chỉ tại EU, giá có thể dự đoán, và tile schema được thiết kế cho downstream styling và AI annotation. Các data layer giống nhau điều khiển bản đồ hiển thị (places, transportation, buildings, điểm quan tâm) cũng được expose dưới dạng dữ liệu có cấu trúc qua Geocoding và Search API, vì vậy một feature bạn thấy trên bản đồ có thể được lấy về dưới dạng bản ghi JSON có kiểu cho logic của riêng bạn.
Để tìm hiểu sâu hơn về rendering layer, hướng dẫn Custom Map Styling hướng dẫn cách ship một vector tile style phù hợp thương hiệu từ đầu đến cuối.
Câu hỏi thường gặp
Vector tile là gì?
Vector tile là file nhị phân nhỏ chứa các feature địa lý (đường, tòa nhà, điểm quan tâm, nhãn) cho một ô của bản đồ web ở một mức zoom cụ thể. Khác với raster tile là ảnh PNG hoặc JPG đã được render sẵn, vector tile lưu trữ hình học và thuộc tính cơ bản dưới dạng dữ liệu. Trình duyệt hoặc client mobile render dữ liệu đó thành pixel tại thời điểm chạy, nghĩa là cùng một tile có thể được style khác nhau, xoay, và render ở bất kỳ mật độ pixel nào mà không mất độ sắc nét.
Sự khác biệt giữa vector tile và raster tile là gì?
Raster tile là ảnh PNG hoặc JPG cố định, thường 256x256 hoặc 512x512 pixel, được render sẵn trên server với style cố định. Vector tile là file nhị phân chứa hình học và thuộc tính, được render thành pixel bởi client. Vector tile nhỏ hơn khi truyền qua mạng, hỗ trợ restyling tại thời điểm chạy, sắc nét ở mọi zoom và DPI, và cho phép bật/tắt các layer mà không cần fetch lại. Đánh đổi là client cần thực hiện công việc render, nhưng điều này không thành vấn đề với bất kỳ trình duyệt hay điện thoại hiện đại nào.
Định dạng MVT là gì?
MVT là Mapbox Vector Tile specification, định dạng tiêu chuẩn de facto cho vector tile. Đây là encoding Protocol Buffers (protobuf) của các feature địa lý cho một tile, được tổ chức thành các layer có tên (ví dụ roads, buildings, places). Định dạng này mở, không phụ thuộc vendor, và được hỗ trợ bởi mọi renderer bản đồ hiện đại (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas phục vụ MVT-compatible tile thông qua endpoint dynamic maps của mình.
Vector tile nhỏ đến mức nào?
Một vector tile đô thị điển hình ở zoom 14 khoảng 50 KB đến 200 KB khi truyền, thường nén xuống 30-100 KB sau gzip. Kích thước phụ thuộc vào mật độ dữ liệu của khu vực: tile ở trung tâm Paris nặng hơn tile ở Đại Tây Dương. Hầu hết các bản đồ production đạt được trải nghiệm pan và zoom mượt mà vì tile được cache tích cực, prefetch trước hướng di chuyển có thể của người dùng, và render trên GPU.
