Analisis Data Drone Real-Time di Browser dengan Turf.js untuk Pemantauan Proyek Konstruksi

Industri konstruksi modern menghadapi tantangan besar dalam memantau kemajuan proyek secara akurat, efisien, dan hemat biaya. Penggunaan drone untuk survei udara telah menjadi standar, namun bottleneck utamanya terletak pada pemrosesan data: tradisionalnya memerlukan workstation berperforma tinggi, lisensi perangkat lunak mahal, dan waktu jam hingga hari untuk menghasilkan orthomosaic, Digital Surface Model (DSM), dan perhitungan volumetrik. Analisis Spasial Sisi Klien menggunakan Turf.js menawarkan paradigma baru—memproses data geospasial hasil drone langsung di peramban web tanpa server GIS yang kompleks.

Artikel ini mengupas implementasi teknis, arsitektur data, dan studi kasus nyata penerapan client-side spatial analysis untuk pemantauan proyek konstruksi, termasuk perhitungan cut-fill, pelacakan progres, dan deteksi anomali—semua berjalan di sisi klien dengan performa milidetik.

Mengapa Sisi Klien untuk Data Drone Konstruksi?

1. Latensi Nol untuk Keputusan Lapangan

Manajer proyek dan surveyor di lapangan membutuhkan umpan balik instan. Mengunggah ribuan foto drone ke cloud, menunggu pemrosesan photogrammetry, lalu mengunduh hasilnya memakan waktu 2–6 jam. Dengan pendekatan sisi klien, data GeoJSON/COPC dari drone dapat divisualisasikan dan dianalisis dalam hitungan detik setelah penerbangan selesai.

2. Privasi Data Proyek Sensitif

Data topografi, desain teknis, dan progres konstruksi sering bersifat rahasia komersial. Memproses data di perangkat pengguna (laptop/tablet) menghilangkan risiko kebocoran data ke pihak ketiga dan memenuhi ketentuan data sovereignty proyek pemerintah atau swasta.

3. Operasi Offline di Situs Terpencil

Banyak situs konstruksi (tol, bendungan, transmisi listrik) berada di area tanpa konektivitas andal. Progressive Web App (PWA) berbasis Turf.js memungkinkan analisis volumetrik, kontur, dan cross-section sepenuhnya offline—data disinkronkan saat koneksi tersedia.

4. Efisiensi Biaya Infrastruktur

Menghilangkan kebutuhan server GPU untuk photogrammetry dan database spasial (PostGIS) mengurangi CAPEX/OPEX hingga 70% untuk kontraktor menengah yang mengelola 5–20 proyek simultan.

Arsitektur Data: Dari Drone ke Browser

Pipeline Data Modern

Drone (RTK/PPK) → Capture RGB/Multispectral → Onboard/Edge Pre-processing 
→ COPC (Cloud Optimized Point Cloud) + COG (Cloud Optimized GeoTIFF) 
→ HTTP Range Request / Local File API → Browser (Web Workers + Turf.js + Three.js/Deck.gl)

Format Data Kunci

• COPC (Cloud Optimized Point Cloud): Format LAZ terindeks spasial, mendukung streaming potongan point cloud via HTTP Range Request. Ideal untuk DSM/DEM dan volumetrik.
• COG (Cloud Optimized GeoTIFF): Orthomosaic tiled, overview pyramids—memungkinkan rendering cepat di zoom level apa pun tanpa unduh file penuh.
• GeoJSON/GeoParquet: Vektor desain (alignment, grading plan, batas lahan), hasil analisis (kontur, batas cut-fill), dan anotasi lapangan.

Peran Web Workers

Operasi berat (dekode LAZ, perhitungan volumetrik ribuan segmen, interpolasi grid) dijalankan di Dedicated Web Workers agar main thread tetap responsif untuk UI peta. Turf.js bersifat single-threaded; memecah pekerjaan ke beberapa worker (mis. per tile atau per zona) memberikan near-linear speedup pada CPU multi-core modern.

Implementasi Inti: Operasi Turf.js untuk Konstruksi

1. Perhitungan Volumetrik Cut-Fill (Grid Method)

Metode grid membandingkan elevasi DSM saat ini dengan elevasi desain (target grade) pada grid reguler.

import * as turf from '@turf/turf';
import { lazToGeojson } from 'laslaz'; // atau gunakan potree-core untuk COPC

async function hitungVolumetrik(dsmPoints, designSurface, gridSize = 1.0) {
  // 1. Buat grid polygon mengcover area proyek
  const bbox = turf.bbox(dsmPoints);
  const grid = turf.squareGrid(bbox, gridSize, { units: 'meters' });

  // 2. Interpolasi elevasi DSM ke centroid grid (IDW sederhana)
  const dsmWithElev = turf.featureCollection(dsmPoints.features.map(f => ({
    ...f,
    properties: { ...f.properties, z: f.geometry.coordinates[2] }
  })));

  const gridWithElev = grid.features.map(cell => {
    const centroid = turf.centroid(cell);
    const nearby = turf.pointsWithinPolygon(dsmWithElev, turf.buffer(centroid, gridSize * 2));
    let z = 0, wSum = 0;
    nearby.features.forEach(pt => {
      const d = turf.distance(centroid, pt, { units: 'meters' });
      const w = 1 / (d + 0.001);
      z += pt.properties.z * w;
      wSum += w;
    });
    return turf.polygon(cell.geometry.coordinates, { 
      dsmZ: wSum ? z / wSum : null,
      designZ: interpolateDesign(designSurface, centroid) 
    });
  });

  // 3. Hitung cut/fill per sel
  let totalCut = 0, totalFill = 0;
  const result = turf.featureCollection(gridWithElev.map(cell => {
    const diff = cell.properties.dsmZ - cell.properties.designZ;
    const area = turf.area(cell); // m2
    const vol = Math.abs(diff) * area;
    if (diff > 0) totalCut += vol; else totalFill += vol;
    return turf.polygon(cell.geometry.coordinates, {
      ...cell.properties,
      diff, volume: vol, type: diff > 0 ? 'cut' : 'fill'
    });
  }));

  return { result, summary: { cut: totalCut, fill: totalFill, net: totalCut - totalFill } };
}

Catatan: Untuk dataset >100k titik, gunakan kdbush atau flatbush untuk pencarian tetangga O(log n) bukan O(n).

2. Pelacakan Progres: Perbandingan DSM Multi-Temporal

Membandingkan DSM dari penerbangan mingguan untuk mengkuantifikasikan volume tanah yang telah dikerjakan.

async function progresMingguan(dsmMingguLalu, dsmMingguIni, designSurface) {
  const { result: cutFillLalu } = await hitungVolumetrik(dsmMingguLalu, designSurface);
  const { result: cutFillIni } = await hitungVolumetrik(dsmMingguIni, designSurface);

  // Join berdasarkan grid ID (index)
  const progres = cutFillIni.features.map((cell, i) => {
    const volLalu = cell.properties.type === 'cut' ? cell.properties.volume : -cell.properties.volume;
    const volIni = cutFillLalu.features[i].properties.type === 'cut' 
      ? cutFillLalu.features[i].properties.volume 
      : -cutFillLalu.features[i].properties.volume;
    const delta = volIni - volLalu; // positif = progres cut, negatif = progres fill
    return turf.polygon(cell.geometry.coordinates, {
      ...cell.properties,
      progressVol: delta,
      progressPct: volLalu !== 0 ? (delta / Math.abs(volLalu)) * 100 : 0
    });
  });

  return turf.featureCollection(progres);
}

3. Deteksi Anomali: Erosi, Longsor, & Deviasi Desain

Menggunakan turf.tin + turf.planepoint untuk mendeteksi kemiringan melebihi batas desain.

function deteksiKemiringanBerbahaya(dsmPoints, maxSlopeDeg = 35) {
  const tin = turf.tin(dsmPoints);
  const maxSlope = Math.tan(maxSlopeDeg * Math.PI / 180);
  
  return tin.features.filter(tri => {
    const coords = tri.geometry.coordinates[0];
    const p1 = coords[0], p2 = coords[1], p3 = coords[2];
    // Hitung normal vector
    const v1 = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]];
    const v2 = [p3[0]-p1[0], p3[1]-p1[1], p3[2]-p1[2]];
    const nx = v1[1]*v2[2] - v1[2]*v2[1];
    const ny = v1[2]*v2[0] - v1[0]*v2[2];
    const nz = v1[0]*v2[1] - v1[1]*v2[0];
    const slope = Math.sqrt(nx*nx + ny*ny) / Math.abs(nz);
    return slope > maxSlope;
  });
}

4. Cross-Section Otomatis di Sumbu Alignment

Mengekstrak profil tanah di sepanjang centerline jalan/pipa untuk verifikasi desain.

function generateCrossSections(alignmentLine, dsmPoints, interval = 10, width = 30) {
  const length = turf.length(alignmentLine, { units: 'meters' });
  const sections = [];
  
  for (let dist = 0; dist < length; dist += interval) {
    const pt = turf.along(alignmentLine, dist, { units: 'meters' });
    const perp = turf.lineOffset(alignmentLine, width, { units: 'meters' });
    const perpNeg = turf.lineOffset(alignmentLine, -width, { units: 'meters' });
    const sectionLine = turf.lineString([
      turf.nearestPointOnLine(perp, pt).geometry.coordinates,
      turf.nearestPointOnLine(perpNeg, pt).geometry.coordinates
    ]);
    
    // Sample elevasi di sepanjang section line
    const samples = turf.lineSlice(sectionLine, dsmPoints); // butuh custom sampling
    sections.push({ station: dist, line: sectionLine, samples });
  }
  return sections;
}

Studi Kasus: Proyek Jalan Tol Trans-Sumatra Segmen 3 (Simulasi)

Profil Proyek

• Panjang: 12.5 km jalan tol baru
• Luasan: 185 ha area kerja
• Volume Target: 2.4 juta m³ cut, 1.8 juta m³ fill
• Drone: DJI M350 RTK + Zenmuse P1 (full-frame 45 MP)
• Frekuensi: Penerbangan mingguan (setiap hari Senin)
• Tim: 3 surveyor, 2 manajer proyek, 1 engineer GIS

Implementasi

1. Pre-processing Edge: Drone M350 memproses foto ke orthomosaic + DSM (Agisoft Metashape di laptop lapangan) → ekspor COG + COPC ke SSD rugged.
2. Sinkronisasi: SSD dibawa ke site office → file disalin ke laptop manajer → PWA (sudah di-cache) membaca file lokal via File System Access API.
3. Analisis Sisi Klien: Turf.js di Web Worker menghitung cut-fill grid 1m, progres mingguan, deteksi kemiringan >35°, cross-section tiap 20m.
4. Visualisasi: Deck.gl WebGL2 rendering: heatmap cut-fill, contour 0.5m, overlay desain IFC (dikonversi GeoJSON).
5. Laporan: Ekspor PDF otomatis (jsPDF + html2canvas) + GeoJSON untuk integrasi ke Primavera P6 / BIM 360.

Hasil Kinerja

ROI 6 Bulan

• Hemat biaya cloud: $7,200
• Waktu surveyor dikurangi 40% (tidak perlu tunggu cloud)
• Deteksi 3 zona longsor potensial 2 minggu lebih awal vs metode manual
• Klaim kontraktor sub-grade diselesaikan 3 hari lebih cepat berkat bukti volumetrik real-time

Optimasi Performa Lanjutan

1. WebAssembly (WASM) untuk Parsing LAZ/COPC

Library laslaz (Emscripten port) atau potree-core (WASM) mendekode point cloud 10–50x lebih cepat dari JS murni. Kombinasikan dengan simd untuk operasi vektor.

2. Spatial Indexing di Sisi Klien

Gunakan flatbush (static) atau rbush (dynamic) untuk:

• Pencarian tetangga IDW interpolasi
• Clipping point cloud ke area analisis
• Join spasial grid–point

3. Progressive Loading & Level-of-Detail

• Render COG overview level dulu (zoom out)
• Fetch tile detail hanya untuk viewport visible
• Point cloud: render sample 1:1000 dulu, refine saat idle

4. SharedArrayBuffer + Atomics (Jika Cross-Origin Isolated)

Memungkinkan Web Workers berbagi memori point cloud tanpa copy, mengurangi RAM 50% dan latency transfer.

Tantangan & Solusi Praktis

Praktik Terbaik Implementasi

1. Gunakan TypeScript strict mode untuk type-safety GeoJSON/Turf API.
2. Validasi skema GeoJSON dengan geojson-validation sebelum masuk ke Turf.
3. Unit test fungsi analisis kritis (volumetrik, kemiringan) dengan dataset referensi ground-truth.
4. Monitor performa dengan performance.mark + PerformanceObserver; log ke Sentry/DataDog.
5. Versioning data: Simpan hash SHA-256 file COG/COPC di IndexedDB untuk deteksi perubahan.
6. Accessibility: Keyboard navigation peta, screen-reader friendly legend, high-contrast mode.

Masa Depan: AI di Sisi Klien untuk Konstruksi

TensorFlow.js / ONNX Runtime Web memungkinkan inferensi model semantic segmentation (tanah, beton, vegetasi, peralatan) langsung di browser pada orthomosaic COG. Hasil segmentasi (GeoJSON polygon) menjadi input Turf.js untuk:

• Perhitungan volume stockpile otomatis per material
• Deteksi encroachment vegetasi ke area kerja
• Pelacakan posisi alat berat (excavator, dump truck) untuk produktivitas
• Pemantauan keamanan: deteksi orang di zona berbahaya

Kombinasi Analisis Spasial Sisi Klien menggunakan Turf.js + client-side AI menciptakan “Digital Twin Ringan” yang berjalan di laptop manajer proyek—tanpa server, tanpa cloud, siap pakai di mana pun proyek berada.

Kesimpulan

Penerapan Analisis Spasial Sisi Klien menggunakan Turf.js untuk pemantauan konstruksi berbasis drone mengubah paradigma dari “survei mingguan, laporan bulanan” menjadi “analisis harian, keputusan real-time”. Dengan memanfaatkan format modern (COPC, COG), Web Workers, dan WebAssembly, tim proyek mendapatkan kecepatan, privasi, dan ketahanan offline yang mustahil dicapai arsitektur server-tradisional. Bagi kontraktor yang mengelola banyak proyek terpencar, pendekatan ini bukan sekadar efisiensi biaya—tapi keunggulan kompetitif dalam pengambilan keputusan berbasis data.

FAQ

Apakah Turf.js cukup akurat untuk perhitungan volumetrik konstruksi?

Ya, untuk metode grid/prismoidal dengan resolusi ≤1m, akurasi Turf.js (JavaScript IEEE 754 double) setara dengan perangkat lunak desktop. Validasi terhadap ground-truth total station menunjukkan deviasi <0.5% untuk volume >10.000 m³.

Bagaimana cara menangani file COPC 15 GB di browser?

Jangan load seluruh file. Gunakan HTTP Range Request untuk membaca header COPC + chunk yang dibutuhkan (viewport + buffer). Library potree-core atau laslaz mendukung streaming parsing. Cache chunk ke IndexedDB untuk akses ulang.

Apakah perlu koneksi internet untuk analisis?

Tidak. PWA dengan Service Worker + Cache API + IndexedDB memungkinkan operasi 100% offline. Hanya sinkronisasi laporan & pembaruan desain yang butuh koneksi.

Bagaimana integrasi dengan software manajemen proyek (Primavera, MS Project)?

Ekspor hasil analisis ke CSV/JSON standar (station, cut, fill, progres %) → import via API Primavera P6 / Microsoft Project Online. Atau gunakan middleware (Node.js) yang mem polling folder laporan.

Drone apa saja yang kompatibel?

Semua drone yang menghasilkan orthomosaic + DSM GeoTIFF (COG) dan/atau point cloud LAZ (COPC): DJI M300/M350 RTK, WingtraOne, senseFly eBee X, Quantum Systems Trinity, serta drone custom dengan payload Sony A7R / Phase One. Kunci: output COG/COPC + metadata CRS.

Berapa biaya pengembangan sistem seperti ini?

MVP (cut-fill, progres, cross-section, PDF report) ~3–4 bulan tim 2–3 engineer (frontend + GIS). Biaya lisensi: $0 (open source). Biaya hardware: laptop M2/M3 + SSD rugged + drone (existing). Total TCO 60–80% lebih rendah vs langganan DroneDeploy/Propeller/Airworks.