Bản đồ nền (Tilemap)¶

tilemap

Tích hợp AI Agent MỚI

Tải bộ tài liệu đã tối ưu cho AI agent (SDK + Tilemap): Map Display Agent Doc

Bản đồ nền (tilemap) của VIETMAP cung cấp tile raster và vector sinh từ dữ liệu bản đồ số Việt Nam của VIETMAP. Tile raster dùng được với các thư viện bản đồ web quen thuộc như Mapbox.js, Leaflet, OpenLayers... để làm bản đồ kéo thả. Tilemap của VIETMAP rất hợp với những bản đồ ít tương tác hoặc chạy trên thiết bị không hỗ trợ WebGL. Vẽ bản đồ theo kiểu tile có mấy cái lợi, cụ thể:

Chạy nhanh hơn (vì chỉ tải các tile đang nhìn thấy)
Tốn ít dữ liệu hơn (vì tile cache lại được để dùng offline)
Co giãn tốt hơn (vì số tile thay đổi theo mức zoom)

VIETMAP hiện có 2 kiểu bản đồ tùy biến

Tên	Mô tả
Raster	Dữ liệu bản đồ lưu dưới dạng ảnh, rồi cắt thành lưới các tile nhỏ, mỗi tile là một phần của bản đồ.
Vector	Tile vector là những gói dữ liệu vector nhỏ, tải về rồi vẽ ngay trên máy người dùng, ví dụ trình duyệt hoặc app di động. Dữ liệu vector gồm cả tên đường, hình khối tòa nhà và địa hình.

Xem thử trên Live Map: https://tools.vietmap.vn/live

Vector¶

API bản đồ nền dạng vector cho bạn tùy biến giao diện bản đồ thoải mái hơn. Bạn điều khiển được cách vẽ từng thành phần như màu sắc, nhãn chữ, biểu tượng, nhờ vậy dễ làm ra bản đồ khớp với nhận diện thương hiệu hoặc yêu cầu thiết kế riêng.

Để hiển thị bản đồ vector trên di động, chúng tôi có SDK Web, SDK Flutter, SDK React Native, SDK Android và SDK iOS. Với Web, bạn liên hệ chúng tôi để biết thêm chi tiết.

Bản đồ đường phố

Tích hợp với VIETMAP Maps SDK¶

Từ Web SDK v6.0.0, chúng tôi cung cấp các style tilemap vector sau để dùng trong VIETMAP Maps SDK. Nếu bạn đang dùng bản SDK thấp hơn, hãy nâng cấp lên bản mới nhất để dùng được các style này. Các style này vẫn tương thích với những bản cũ của toàn bộ SDK di động, nên bạn dùng thoải mái:

Style vector — truyền thẳng URL style.json vào tham số style của bất kỳ SDK VIETMAP nào:

Style	Mô tả	URL
Vector Default (Street)	Style mặc định của bản đồ VIETMAP, dùng cho hầu hết trường hợp.	`https://maps.vietmap.vn/maps/styles/tm/style.json?apikey={your-apikey}`
Vector Light	Bản sáng hơn của style mặc định, dễ đọc trong điều kiện nhiều ánh sáng.	`https://maps.vietmap.vn/maps/styles/lm/style.json?apikey={your-apikey}`
Vector Dark	Style nền tối, dễ nhìn trong điều kiện thiếu sáng.	`https://maps.vietmap.vn/maps/styles/dm/style.json?apikey={your-apikey}`
Vector Hybrid	Nền ảnh vệ tinh kèm lớp đường và nhãn chữ — hợp nhất để xác minh vị trí và tác nghiệp hiện trường.	`https://maps.vietmap.vn/maps/styles/hm/style.json?apikey={your-apikey}`

Lớp giao thông — style vector ghép đè lên style nền đang dùng:

Style	Mô tả	URL
Traffic	Tô màu mức kẹt xe thời gian thực — ghép `sources` và `layers` của nó vào bản đồ hiện tại.	`https://maps.vietmap.vn/maps/styles/tf/style.json?apikey={your-apikey}`

Xem demo tại: https://tools.vietmap.vn/live (bật lớp "Traffic")

Cách dùng lớp Traffic

Tải tf/style.json, rồi thêm sources và layers của nó vào bản đồ đang chạy bằng map.addSource() / map.addLayer(). Đừng truyền URL này vào tham số style của SDK — làm vậy là thay luôn bản đồ nền. Nhớ thêm lại sau map.on("style.load", ...) vì setStyle xóa sạch mọi source và layer tự thêm.

Tile raster — dùng như một nguồn tile XYZ trong Leaflet, OpenLayers, hoặc raster source của GL JS:

Style	Mô tả	URL
Satellite	Ảnh vệ tinh thuần, không có nhãn đường.	`https://maps.vietmap.vn/maps/tiles/st/{z}/{x}/{y}.png?apikey={your-apikey}`

Hybrid khác Satellite chỗ nào

Satellite (st) là ảnh raster thuần, không nhãn — dùng như nguồn raster XYZ. Hybrid (hm) là một style vector đầy đủ gồm ảnh vệ tinh + nhãn đường/địa điểm — dùng URL style.json với bất kỳ SDK nền GL nào.

Quan trọng

Nhớ đặt giới hạn cho API key (khai báo referer và giới hạn lượt gọi theo IP). Chi tiết xem Quản lý API Key.