Series Leaflet Tutorials | Bài 4: GeoJSON - "Cây cầu" dữ liệu giữa Server và Bản đồ

Nếu ở Bài 2 và 3, bạn đang vẽ thủ công bằng tay (hardcode tọa độ), thì trong các hệ thống chuyên nghiệp, dữ liệu tọa độ của các trạm Metro hay tuyến đường ray được lưu trữ trong Database (MySQL với kiểu dữ liệu GEOMETRY hoặc JSON).

GeoJSON là định dạng tiêu chuẩn để trao đổi dữ liệu bản đồ. Nó giống như JSON thông thường nhưng được chuẩn hóa để Leaflet có thể tự động hiểu và vẽ ra hàng ngàn đối tượng chỉ với một dòng lệnh. Hôm nay, chúng ta sẽ kết nối Laravel với Leaflet bằng công nghệ này.

1. Cấu trúc một file GeoJSON

Một file GeoJSON không gì khác ngoài một file JSON có cấu trúc quy định sẵn.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "Ga Bến Thành", "status": "active" },
      "geometry": { "type": "Point", "coordinates": [106.7009, 10.7766] }
    }
  ]
}

• type: FeatureCollection: Tập hợp nhiều đối tượng.
• properties: Nơi bạn chứa thông tin nghiệp vụ (tên ga, tình trạng thiết bị AFC).
• geometry: Tọa độ thực tế.

2. Server-side: Tạo API trả về GeoJSON (Laravel)

Tại Backend, bạn hãy tạo một Controller để chuyển dữ liệu từ Database thành định dạng này.

public function getStationsGeoJson()
{
    $stations = Station::all();
    $features = $stations->map(function ($station) {
        return [
            'type' => 'Feature',
            'properties' => ['name' => $station->name, 'status' => $station->status],
            'geometry' => [
                'type' => 'Point',
                'coordinates' => [$station->longitude, $station->latitude]
            ]
        ];
    });

    return response()->json(['type' => 'FeatureCollection', 'features' => $features]);
}

3. Client-side: Leaflet xử lý GeoJSON tự động

Thay vì dùng vòng lặp forEach như bài trước, bạn chỉ cần dùng L.geoJSON():

fetch('/api/stations')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data, {
            // Tùy biến icon dựa trên thuộc tính
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng);
            },
            // Tương tác khi click
            onEachFeature: function (feature, layer) {
                layer.bindPopup("Trạm: " + feature.properties.name);
            }
        }).addTo(map);
    });

4. Tại sao kỹ thuật này "đẳng cấp" hơn?

• Tự động hóa hoàn toàn: Chỉ cần Database thay đổi, bản đồ tự cập nhật mà bạn không cần sửa code JS.
• Hỗ trợ đa hình: Với cùng một biến data, GeoJSON có thể chứa cả Point (trạm), LineString (tuyến đường), và Polygon (depot) cùng một lúc.

Tương thích cao: Mọi hệ thống GIS (Geographic Information System) trên thế giới đều hiểu được GeoJSON. Nếu sau này bạn cần export dữ liệu ra Google Earth hay phần mềm bản đồ chuyên dụng, định dạng này là chuẩn mực.

Bước cuối cho series Leaflet:

Chúng ta đã đi được 4 bài: Khởi tạo, Vẽ hình học, Gom nhóm (Cluster), và Truyền dữ liệu (GeoJSON).

Để kết thúc series Leaflet một cách trọn vẹn, ở Bài 5, bạn có muốn làm một "Dashboard bản đồ thời gian thực" không? Chúng ta sẽ dùng JavaScript setInterval (hoặc WebSockets) để fetch dữ liệu từ API Laravel mỗi 5 giây, cập nhật trạng thái lỗi của các cổng soát vé (đổi màu marker từ xanh sang đỏ) mà không cần tải lại trang. Đây chính là thứ mà một kỹ sư vận hành AFC cần nhất.