GeoJSON untuk Peta Web: Satu Panduan

2026-03-02

geojsonleafletmapboxPeta webjavascript

GeoJSON ialah format utama pertukaran geodata di web. Semua pustaka kartografi popular — Leaflet, Mapbox GL JS, OpenLayers, deck.gl — menyokong GeoJSON secara asli. Dengan osm2cdr.ru anda boleh mengeksport mana-mana kawasan OpenStreetMap kepada GeoJSON dalam beberapa saat.

Struktur GeoJSON

Fail GeoJSON ialah JSON biasa dengan objek jenis FeatureCollection. Setiap Feature mengandungi geometri (titik, garis, poligon) dan sifat (properties) — tag OpenStreetMap: nama, jenis objek, alamat dan atribut lain.

Cara menyambung ke Leaflet

Cara paling mudah untuk menunjukkan GeoJSON pada peta 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));

Penggayaan mengikut sifat

GeoJSON daripada osm2cdr.ru mengekalkan tag OSM: highway, building, amenity, natural dan lain-lain. Ini membolehkan penggayaan objek mengikut jenis:

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

Pengoptimuman untuk data besar

GeoJSON berfungsi dengan baik untuk kawasan kecil dan sederhana (sehingga 50 km²). Untuk wilayah besar:

GeoJSON-Seq — format penstriman, fail dimuatkan baris demi baris.
PMTiles — format jubin cloud-native dengan paparan serta-merta berjuta-juta objek.
Jubin vektor — dimuatkan apabila menavigasi peta.

Alat untuk bekerja dengan GeoJSON

geojson.io — penyunting dalam talian untuk melihat dan menyunting.
Mapshaper — pemudahan geometri dan penukaran.
Turf.js — analisis spatial terus dalam pelayar.
QGIS — GIS lengkap untuk pemprosesan kompleks.