GeoJSON cho bản đồ web: Hướng dẫn

2026-03-02

geojsonleafletmapboxbản đồ webjavascript

GeoJSON là định dạng trao đổi dữ liệu địa lý chính trên web. Tất cả các thư viện bản đồ phổ biến — Leaflet, Mapbox GL JS, OpenLayers, deck.gl — đều hỗ trợ GeoJSON một cách nguyên bản. Với osm2cdr.com, bạn có thể xuất bất kỳ khu vực nào của OpenStreetMap sang GeoJSON chỉ trong vài giây.

Cấu trúc GeoJSON

Tệp GeoJSON là một JSON thông thường với các đối tượng kiểu FeatureCollection. Mỗi Feature chứa hình học (điểm, đường, đa giác) và các thuộc tính (properties) — các thẻ OpenStreetMap: tên, loại đối tượng, địa chỉ và các thuộc tính khác.

Cách kết nối với Leaflet

Cách đơn giản nhất để hiển thị GeoJSON trên bản đồ web:

fetch('/data/moscow-buildings.geojson')
  .then(r => r.json())
  .then(data => L.geoJSON(data, {
    style: { color: '#3388ff', weight: 1, fillOpacity: 0.3 }
  }).addTo(map));

Tạo kiểu theo thuộc tính

GeoJSON từ osm2cdr.com giữ lại các thẻ OSM: highway, building, amenity, natural và những thẻ khác. Điều này cho phép tạo kiểu cho các đối tượng theo loại:

L.geoJSON(data, {
  style: function(feature) {
    if (feature.properties.building) return { color: '#e74c3c' };
    if (feature.properties.natural === 'water') return { color: '#3498db' };
    return { color: '#95a5a6' };
  }
});

Tối ưu cho dữ liệu lớn

GeoJSON hoạt động tốt cho các khu vực nhỏ và trung bình (đến 50 km²). Đối với các lãnh thổ lớn:

GeoJSON-Seq — định dạng luồng, tệp được tải theo từng dòng.
PMTiles — định dạng tile cloud-native với khả năng hiển thị tức thì hàng triệu đối tượng.
Vector tile — được tải dần theo quá trình điều hướng trên bản đồ.

Công cụ làm việc với GeoJSON

geojson.io — trình chỉnh sửa trực tuyến để xem và sửa.
Mapshaper — đơn giản hóa hình học và chuyển đổi.
Turf.js — phân tích không gian ngay trong trình duyệt.
QGIS — GIS đầy đủ tính năng cho xử lý phức tạp.