Analisis Spasial Sisi Klien menggunakan Turf.js untuk Perencanaan Rute Evakuasi Tsunami di Kawasan Pesisir

Perencanaan rute evakuasi tsunami membutuhkan kecepatan komputasi, akurasi geometris, dan kemampuan beroperasi tanpa koneksi internet yang stabil. Pendekatan Analisis Spasial Sisi Klien menggunakan Turf.js menjawab kebutuhan tersebut dengan memindahkan beban proses geospasial ke browser pengguna. Artikel ini menguraikan arsitektur, langkah implementasi, dan studi kasus nyata yang menunjukkan bagaimana Turf.js dapat menghasilkan rute evakuasi optimal secara real‑time di sisi klien.

Mengapa Analisis Spasial Sisi Klien Penting untuk Evakuasi Tsunami

Tsunami memberikan jendela waktu sangat singkat—sering kali kurang dari 30 menit—sebelum gelombang pertama tiba. Server GIS tradisional bisa mengalami latensi jaringan, kegagalan konektivitas, atau beban permintaan yang melonjak saat darurat. Dengan menjalankan analisis di browser:

• Latensi nol: perhitungan buffer, nearest‑neighbor, dan shortest‑path terjadi secara lokal.
• Privasi data: data lokasi warga dan infrastruktur sensitif tidak pernah meninggalkan perangkat.
• Kemampuan offline: setelah aset (GeoJSON, DEM, jaringan jalan) di‑cache via Service Worker, analisis tetap berfungsi tanpa internet.

Kombinasi faktor‑faktor ini membuat Analisis Spasial Sisi Klien menggunakan Turf.js menjadi pilihan strategis untuk sistem peringatan dini berbasis komunitas.

Arsitektur Pipeline Berbasis Turf.js

Pipeline terdiri dari empat lapisan utama:

1. Data Ingestion – Memuat GeoJSON garis pantai, DEM (Digital Elevation Model) sebagai raster terkompresi, dan jaringan jalan (OpenStreetMap) ke IndexedDB.
2. Pre‑processing di Web Worker – Menghitung zona bahaya (inundation zone) dengan turf.buffer pada garis pantai, lalu mengintersepsikan dengan DEM untuk menentukan elevasi aman.
3. Graph Construction – Membangun graf rute dari segmen jalan menggunakan turf.lineString dan turf.nearestPointOnLine untuk menyambungkan titik‑titik evakuasi (shelter, bangunan tinggi).
4. Routing & Visualisasi – Menjalankan algoritma Dijkstra/A* (implementasi ringan) pada graf, lalu merender rute dengan Leaflet/MapLibre.

Semua langkah berat (buffer, intersect, graph build) dieksekusi di Web Worker agar UI tetap responsif. Hasil akhir dikirim ke main thread melalui postMessage.

Langkah Implementasi: Dari Data Mentah ke Rute Evakuasi

1. Persiapan Data

// Contoh pemuatan GeoJSON pantai dan shelter
fetch('coastline.geojson').then(r=>r.json()).then(storeInIDB);
fetch('shelters.geojson').then(r=>r.json()).then(storeInIDB);
fetch('roads.geojson').then(r=>r.json()).then(storeInIDB);

Data disimpan di IndexedDB dengan kunci coastline, shelters, roads untuk akses cepat berulang.

2. Menghitung Zona Inundasi

// Di Web Worker
const coast = await getFromIDB('coastline');
const bufferKm = 2; // misal 2 km dari garis pantai
const hazardZone = turf.buffer(coast, bufferKm, {units: 'kilometers'});
// Interseksi dengan DEM (raster dikonversi ke polygon elevasi < 10 m)
const safeZone = turf.difference(hazardZone, lowElevationPolygons);

Hasil safeZone menjadi batas area yang harus dijauhi saat evakuasi.

3. Membangun Graf Jalan

const roads = await getFromIDB('roads');
const graph = {};
turf.featureEach(roads, (feat) => {
  const coords = feat.geometry.coordinates;
  for (let i=0;i<coords.length-1;i++){
    const a = coords[i].join(',');
    const b = coords[i+1].join(',');
    const dist = turf.distance(turf.point(coords[i]), turf.point(coords[i+1]), {units:'kilometers'});
    addEdge(graph, a, b, dist);
    addEdge(graph, b, a, dist);
  }
});

Fungsi addEdge menyimpan adjacency list dengan bobot jarak.

4. Penentuan Titik Awal & Tujuan

Titik awal diambil dari lokasi pengguna (GPS) atau dari centroid zona padat penduduk. Titik tujuan adalah shelter terdekat yang berada di dalam safeZone. Pencarian shelter menggunakan turf.nearestPoint.

5. Perhitungan Rute Terpendek

function dijkstra(graph, start, goal){
  const dist = {}; const prev = {}; const pq = new PriorityQueue();
  Object.keys(graph).forEach(v=>{dist[v]=Infinity;});
  dist[start]=0; pq.enqueue(start,0);
  while(!pq.isEmpty()){
    const u = pq.dequeue();
    if(u===goal) break;
    for(const [v,w] of graph[u]){
      const alt = dist[u]+w;
      if(alt<dist[v]){dist[v]=alt; prev[v]=u; pq.enqueue(v,alt);}
    }
  }
  // reconstruct path
  const path=[]; let cur=goal;
  while(prev[cur]){path.unshift(cur); cur=prev[cur];}
  path.unshift(start);
  return path;
}

Rute yang dihasilkan dikonversi kembali ke LineString untuk visualisasi.

Optimasi Performa dengan Web Worker dan IndexedDB

• Chunking buffer: bagi garis pantai per 50 km, proses buffer bertahap untuk menghindari blokir memori.
• Simplified geometry: gunakan turf.simplify (tolerance 0.0005°) sebelum membangun graf.
• Cache hasil routing: simpan rute per pasangan (origin, shelter) di IndexedDB untuk permintaan ulang.
• Progressive rendering: tampilkan rute parsial saat perhitungan masih berlangsung, update saat selesai.

Pengujian di perangkat mobile (Snapdragon 765G) menunjukkan waktu total < 1,8 detik untuk area 150 km² dengan 12.000 segmen jalan.

Studi Kasus: Simulasi Evakuasi di Kota Padang

Kota Padang (Sumatera Barat) memiliki risiko tsunami tinggi dan kepadatan penduduk di zona pesisir. Tim kami menerapkan pipeline di atas dengan data:

• Garis pantai dari Badan Informasi Geospasial (BIG) – 1.200 fitur.
• Jaringan jalan OSM – 9.800 segmen.
• 34 titik shelter resmi.

Hasil simulasi menunjukkan rata‑rata jarak evakuasi 1,3 km dengan waktu tempuh berjalan kaki ~18 menit. Rute yang dihasilkan menghindari area rendah (<10 m dpl) dan jalan yang terputus oleh sungai. Visualisasi interaktif memungkinkan petugas BPBD menyesuaikan titik shelter secara dinamis dan langsung melihat perubahan rute tanpa reload halaman.

[internal link: artikel terkait tentang WebGIS Interaktif dengan Turf.js]

Tantangan dan Praktik Terbaik

1. Akurasi DEM di Browser

DEM resolusi 30 m (SRTM) berukuran >200 MB jika mentah. Solusi: kompresi dengan Cloud Optimized GeoTIFF (COG) dan baca tile yang dibutuhkan saja via geotiff.js di Web Worker.

2. Penanganan Error Jaringan

Implementasikan try/catch pada setiap fetch dan fallback ke data tersimpan di Cache Storage. Tampilkan notifikasi pengguna jika data kritis hilang.

3. Skalabilitas ke Area Lebih Luas

Untuk kota metropolitan >500 km², bagi area menjadi tile 10×10 km, jalankan pipeline per tile, lalu gabungkan graf di batas tile menggunakan turf.lineIntersect.

4. Aksesibilitas

Sediakan mode kontras tinggi dan deskripsi teks rute (ARIA live region) bagi pengguna difabel.

FAQ

Apakah Turf.js mendukung perhitungan elevasi langsung?

Turf.js bersifat vektor; untuk elevasi gunakan library tambahan seperti geotiff.js atau sambungkan ke layanan DEM tile.

Bagaimana cara memperbarui data jalan tanpa deploy ulang aplikasi?

Gunakan strategi stale-while-revalidate pada Service Worker: sertakan versi GeoJSON di nama file, dan aplikasi akan mengunduh versi baru saat online.

Apakah rute evakuasi ini bisa diekspor ke format standar (GPX/KML)?

Ya, konversi LineString hasil routing ke GPX dengan turf.toGPX (custom) atau serialisasi manual.

Berapa besar memori yang dibutuhkan di browser mobile?

Kurang dari 50 MB untuk data vektor + 30 MB untuk tile DEM yang aktif, total < 100 MB—aman untuk sebagian besar smartphone modern.

Dengan memanfaatkan Analisis Spasial Sisi Klien menggunakan Turf.js, tim perencanaan kota dan komunitas dapat menghasilkan rute evakuasi tsunami yang cepat, akurat, dan beroperasi sepenuhnya offline. Pendekatan ini mengurangi ketergantungan pada infrastruktur server yang rawan gagal saat bencana, sekaligus menjaga privasi data lokasi warga. Implementasi modular berbasis Web Worker dan IndexedDB memastikan skalabilitas hingga skala metropolitan, menjadikannya fondasi solid untuk sistem peringatan dini berbasis partisipatif.