Source: https://maps.vietmap.vn/docs/vi/map-api/traffic-layer/

# Lớp giao thông (Traffic)

[![traffic]][traffic]
[traffic]: https://maps.vietmap.vn/docs/assets/traffic.webp

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](https://tools.vietmap.vn/live/?cp=10.766077%2C106.685368&z=14.11), bật lớp "Traffic", hoặc mở thẳng [bản đồ kèm lớp giao thông trên Playground](https://tools.vietmap.vn/playground/tilemap?style=tm&center=21.0285,105.8542&zoom=14&traffic=true).

Bản đồ tạo bằng [Map Editor](https://maps.vietmap.vn/docs/vi/map-api/map-editor/) chỉ cần bật **Giao thông** trong editor, không phải ghép lớp này bằng code.

## 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:

```js
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));
```

!!! warning "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](https://maps.vietmap.vn/docs/vi/map-api/console/request-to-transaction/) để biết lượt tải tile được quy ra transaction thế nào.

## API liên quan

- [Bản đồ nền (Tilemap)](https://maps.vietmap.vn/docs/vi/map-api/tilemap/) — các style nền để ghép lớp giao thông lên trên.
- [Chỉ đường (Route v4)](https://maps.vietmap.vn/docs/vi/map-api/route-version/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ị.