series Leaflet Tutorials | Bài 2: Họa đồ hệ thống - Vẽ Tuyến đường và Vùng phủ sóng

Trong các hệ thống hạ tầng, chúng ta thường làm việc với 3 loại dữ liệu hình học chính:

1. Markers (Điểm): Đại diện cho các trạm dừng (Station), cổng soát vé (Gate/TVM).
2. Polylines (Đường): Đại diện cho tuyến đường sắt, đường dây cáp quang, lộ trình xe buýt.
3. Polygons (Đa giác): Đại diện cho khu vực Depot, bãi đỗ xe hoặc vùng ảnh hưởng của nhà ga.

Hôm nay, chúng ta sẽ học cách vẽ chúng lên bản đồ.

1. Vẽ Tuyến đường (Polyline) - Tái hiện tuyến Metro

Để vẽ một tuyến đường ray nối các ga, chúng ta truyền một mảng các tọa độ [lat, lng] vào L.polyline.

// Tọa độ giả lập tuyến đường Metro
var metroLineCoords = [
    [10.7766, 106.7009], // Bến Thành
    [10.7812, 106.6975], // Nhà hát thành phố
    [10.7920, 106.6850]  // Ba Son
];

// Vẽ đường với tùy chỉnh màu sắc và độ dày
var polyline = L.polyline(metroLineCoords, {
    color: 'blue',
    weight: 6,
    opacity: 0.7,
    dashArray: '10, 10' // Tạo hiệu ứng đường đứt đoạn (đường ray)
}).addTo(map);

// Tự động zoom bản đồ để vừa với toàn bộ tuyến đường
map.fitBounds(polyline.getBounds());

2. Vẽ Vùng phủ sóng (Polygon) - Đánh dấu khu vực Depot

Nếu bạn cần hiển thị phạm vi của một nhà ga hoặc Depot, L.polygon là lựa chọn số 1.

// Tọa độ các điểm tạo nên đa giác Depot
var depotArea = [
    [10.8500, 106.7500],
    [10.8550, 106.7500],
    [10.8550, 106.7600],
    [10.8500, 106.7600]
];

// Vẽ vùng với màu nền (fill) và viền
var polygon = L.polygon(depotArea, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

polygon.bindPopup("Khu vực Depot - Khu vực hạn chế truy cập.");

3. Tối ưu: Gộp nhóm các Layer (LayerGroup)

Khi hệ thống của bạn có hàng chục trạm và tuyến đường, việc quản lý từng biến marker, polyline riêng lẻ sẽ khiến code rối tung. Hãy dùng L.layerGroup để gom nhóm.

var stations = L.layerGroup([
    L.marker([10.7766, 106.7009]).bindPopup("Ga 1"),
    L.marker([10.7812, 106.6975]).bindPopup("Ga 2")
]);

var lines = L.layerGroup([polyline]);

// Gom nhóm tất cả vào một biến overlay để bật/tắt trên bản đồ
var overlays = {
    "Trạm dừng": stations,
    "Tuyến đường": lines
};

// Thêm bộ điều khiển lớp (Layer Control) vào góc phải
L.control.layers(null, overlays).addTo(map);

Những lưu ý quan trọng cho "Kỹ sư hệ thống"

• Độ chính xác (Precision): Khi làm việc với bản đồ hạ tầng, tọa độ nên được lấy từ hệ thống CAD hoặc GPS chính xác. Đừng nhập tay!
• Hiệu năng: Nếu bạn vẽ hàng ngàn marker cùng lúc, bản đồ sẽ cực chậm. Ở bài sau, mình sẽ hướng dẫn bạn cách dùng MarkerCluster (gom nhóm các điểm khi zoom xa) để giải quyết vấn đề này.
• Tương tác: Bạn có thể thêm sự kiện mouseover để highlight (đổi màu) khi di chuột vào tuyến đường hoặc vùng depot.

Bạn đã nắm vững cách vẽ các vector này chưa? Ở Bài 3, bạn muốn mình hướng dẫn kỹ thuật MarkerCluster (để quản lý hàng ngàn thiết bị AFC trên bản đồ) hay hướng dẫn cách load dữ liệu động từ file GeoJSON (dữ liệu từ server trả về)?