Lớp giao thông (Traffic)¶

Lớp giao thông là một style vector tô màu mức kẹt xe thời gian thực theo từng chiều đường. Bạn ghép sources và layers của nó vào bản đồ nền GL đang chạy — không thay bản đồ nền.

Xem trước tại Live Map, bật lớp "Traffic".

URL¶

https://maps.vietmap.vn/maps/styles/tf/style.json?apikey={your-apikey}

Method¶

GET

Cách ghép vào bản đồ¶

Tải style, rồi thêm từng source và layer vào bản đồ hiện tại:

const APIKEY = '{your-apikey}';

async function addTraffic(map) {
  const tf = await fetch(
    `https://maps.vietmap.vn/maps/styles/tf/style.json?apikey=${APIKEY}`
  ).then((r) => r.json());

  for (const [id, source] of Object.entries(tf.sources)) {
    if (!map.getSource(id)) map.addSource(id, source);
  }
  for (const layer of tf.layers) {
    if (!map.getLayer(layer.id)) map.addLayer(layer);
  }
}

map.on('style.load', () => addTraffic(map));

Hai lỗi hay gặp

Đừ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, mất hết layer nền.

Gắn vào sự kiện style.load chứ không phải gọi một lần lúc khởi tạo: setStyle xóa sạch mọi source và layer bạn tự thêm, nên đổi style nền là lớp giao thông biến mất nếu không thêm lại.

Nội dung style¶

Style chứa đúng một source và bốn layer:

Thành phần	Giá trị
Source	`traffic` — vector tile, `maxzoom` 15
Tile	`https://maps.vietmap.vn/maps/tiles/tf/{z}/{x}/{y}.pbf?apikey={your-apikey}`
Source layer	`jam`

Layer	Vẽ gì	Điều kiện
`traffic-left`	Chiều đi, màu lấy từ thuộc tính `lcolor`	`oneway <= 0`
`traffic-right`	Chiều về, màu lấy từ thuộc tính `rcolor`	`oneway >= 0`
`traffic-border-left`	Viền trắng bên trái	`oneway == 0`
`traffic-border-right`	Viền trắng bên phải	`oneway == 0`

Đường hai chiều vẽ thành hai vệt lệch nhau, mỗi vệt một chiều, kèm viền trắng. Đường một chiều chỉ vẽ một vệt và không có viền.

Màu và mức zoom¶

Màu kẹt xe nằm trong dữ liệu, không nằm trong style: mỗi đoạn đường mang hai thuộc tính lcolor và rcolor, layer chỉ đọc ra bằng ["get", "lcolor"]. Muốn dùng bảng màu riêng thì ghi đè line-color của hai layer traffic-left và traffic-right sau khi thêm.

Bốn layer đều đặt minzoom 10 — zoom nhỏ hơn 10 sẽ không thấy gì. Dữ liệu source dừng ở maxzoom 15, zoom sâu hơn là phóng to tile mức 15.

Cách tính tiền¶

Lớp này tải bằng vector tile. Xem Cách tính tiền để biết lượt tải tile được quy ra transaction thế nào.

API liên quan¶

Bản đồ nền (Tilemap) — các style nền để ghép lớp giao thông lên trên.
Chỉ đường (Route v4) — truyền annotations=congestion để nhận mức kẹt xe theo từng đoạn của tuyến, dạng dữ liệu thay vì dạng hiển thị.