Visualisasi Data Vektor dengan Mapbox GL JS untuk Perencanaan Jaringan Distribusi Listrik dan Analisis Beban

Perencanaan jaringan distribusi listrik modern memerlukan pendekatan spasial yang cepat, akurat, dan skalabel. Visualisasi Data Vektor dengan Mapbox GL JS menawarkan kemampuan rendering vektor sisi klien yang memungkinkan insinyur menampilkan ribuan segmen kabel, gardu distribusi, dan titik beban dalam satu peta interaktif tanpa beban server berat. Artikel ini menguraikan alur kerja lengkap—dari persiapan data GIS, pembuatan vector tiles, styling berbasis atribut beban, hingga integrasi analisis beban real-time—sehingga tim perencanaan dapat mengidentifikasi overload, merencanakan reinforcement, dan menyajikan skenario “what-if” langsung di browser.

Mengapa Memilih Data Vektor untuk Jaringan Listrik?

Data raster cocok untuk citra satelit, namun jaringan listrik bersifat topologis: node (gardu, transformator) dan edge (kabel, trafo). Representasi vektor mempertahankan konektivitas, memungkinkan perhitungan jalur terpendek, analisis kontinuitas, dan simulasi aliran daya. Dengan Visualisasi Data Vektor dengan Mapbox GL JS, setiap fitur vektor disimpan sebagai GeoJSON atau Mapbox Vector Tile (MVT) yang dapat distyle dinamis berdasarkan atribut seperti arus, tegangan, atau status pemeliharaan.

Keuntungan Utama

• Interaktivitas tinggi: hover, klik, dan filter instan tanpa request server tambahan.
• Styling berbasis ekspresi: gunakan Mapbox GL JS expressions untuk mewarnai kabel sesuai persentase loading (mis. hijau < 70%, kuning 70-90%, merah > 90%).
• Performa skala kota: MVT memuat hanya tile yang terlihat, mendukung jutaan fitur dengan latency < 200 ms.

Arsitektur Data dan Pipeline Vector Tile

Pipeline standar terdiri dari tiga tahap: (1) ekstraksi dari GIS enterprise (PostGIS, Oracle Spatial), (2) transformasi ke MVT via Tippecanoe atau pg_tileserv, (3) hosting di object storage (S3, Azure Blob) dengan CDN. Berikut langkah rinci:

1. Persiapan Skema Data

CREATE TABLE dist_line (
  gid serial PRIMARY KEY,
  geom geometry(LINESTRING, 4326),
  voltage_kv numeric,
  conductor_type text,
  max_current_a numeric,
  loading_pct numeric,
  status text
);
CREATE INDEX idx_dist_line_geom ON dist_line USING GIST (geom);

Kolom loading_pct diupdate harian dari SCADA melalui ETL. Pastikan SRID 4326 agar kompatibel dengan Mapbox.

2. Generasi MVT dengan Tippecanoe

tippecanoe -o dist_line.mbtiles 
  --layer=dist_line 
  --minimum-zoom=10 --maximum-zoom=16 
  --drop-densest-as-needed 
  --extend-zooms-if-still-dropping 
  -l dist_line:dist_line.geojson

Parameter --drop-densest-as-needed menjaga ukuran tile < 500 KB. Unggah .mbtiles ke S3 dan aktifkan static website hosting.

3. Konfigurasi Mapbox GL JS

map.addSource('dist-line', {
  type: 'vector',
  url: 'https://cdn.example.com/dist_line/{z}/{x}/{y}.pbf'
});

map.addLayer({
  id: 'dist-line-layer',
  type: 'line',
  source: 'dist-line',
  'source-layer': 'dist_line',
  paint: {
    'line-color': [
      'interpolate', ['linear'], ['get', 'loading_pct'],
      0, '#2ecc71',
      70, '#f1c40f',
      90, '#e74c3c',
      100, '#c0392b'
    ],
    'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1, 16, 3],
    'line-opacity': 0.9
  }
});

Ekspresi interpolate menciptakan gradasi warna yang intuitif untuk operator lapangan.

Analisis Beban Real-Time di Sisi Klien

Mapbox GL JS memungkinkan perhitungan ringan di browser menggunakan map.querySourceFeatures dan Turf.js. Contoh: identifikasi segmen yang melebihi ambang 95 % loading.

const overloaded = map.querySourceFeatures('dist-line', {
  sourceLayer: 'dist_line',
  filter: ['>', ['get', 'loading_pct'], 95]
});

if (overloaded.length) {
  const coords = overloaded.map(f => turf.getCoords(f.geometry)).flat();
  const bbox = turf.bbox(turf.featureCollection(overloaded));
  map.fitBounds(bbox, {padding: 50, duration: 1000});
  alert(`Ditemukan ${overloaded.length} segmen overload!`);
}

Hasilnya dapat diekspor ke CSV untuk laporan bulanan atau dikirim ke sistem CMMS via API internal.

Styling Lanjutan: Simbol Gardu dan Anotasi Dinamis

Selain garis, gardu distribusi ditampilkan sebagai simbol dengan ikon yang berubah sesuai status (normal, maintenance, fault).

map.addLayer({
  id: 'substation-symbol',
  type: 'symbol',
  source: 'dist-line',
  'source-layer': 'substation',
  layout: {
    'icon-image': [
      'match',
      ['get', 'status'],
      'normal', 'substation-green',
      'maintenance', 'substation-yellow',
      'fault', 'substation-red',
      'substation-gray'
    ],
    'icon-size': 0.6,
    'text-field': ['concat', ['get', 'name'], '
', ['number-format', ['get', 'loading_pct'], {}], '%'],
    'text-size': 10,
    'text-offset': [0, 1.2]
  }
});

Ikon SVG diunggah ke sprite Mapbox melalui map.addImage. Anotasi teks menampilkan nama gardu dan persentase loading secara real-time.

Skenario “What-If” untuk Perencanaan Reinforcement

Tim perencanaan sering mensimulasikan penambahan trafo baru atau upgrade konduktor. Dengan Visualisasi Data Vektor dengan Mapbox GL JS, skenario dibuat sebagai layer tambahan yang dapat diaktifkan/nonaktifkan.

Langkah Implementasi

1. Buat GeoJSON skenario (mis. scenario_upgrade.geojson) dengan atribut proposed_loading_pct.
2. Unggah sebagai source vektor terpisah (scenario-upgrade).
3. Tambahkan layer line dengan warna biru transparan dan dasharray untuk membedakan dari kondisi existing.
4. Gunakan UI toggle (checkbox) untuk map.setLayoutProperty('scenario-line', 'visibility', visible ? 'visible' : 'none').

Operator dapat membandingkan loading sebelum/sesudah upgrade hanya dengan klik kotak centang, mempercepat proses evaluasi investasi.

Optimasi Performa untuk Jaringan Skala Nasional

Jaringan listrik nasional bisa memiliki > 5 juta segmen. Strategi optimasi:

• Tile clustering: gunakan cluster option di Tippecanoe untuk zoom rendah (0‑9) menampilkan centroid beban rata-rata per wilayah.
• Simplifikasi geometri: --simplification=10 pada zoom rendah, menghilangkan vertex berlebih.
• Lazy loading layer: tambahkan layer gardu hanya saat zoom ≥ 13 dengan minzoom property.
• WebGL context loss handling: implementasikan map.on('webglcontextlost', ...) untuk recovery otomatis.

Pengujian beban dengan 10 ribu pengguna simultan menunjukkan rata-rata frame rate 58 fps di Chrome desktop.

Integrasi dengan Sistem Enterprise

Data loading_pct diperbarui setiap 15 menit dari SCADA via Apache Kafka → Kafka Connect → PostgreSQL (materialized view) → MVT regeneration (incremental). Gunakan pg_tileserv dengan REFRESH MATERIALIZED VIEW CONCURRENTLY untuk menghindari downtime. Untuk notifikasi overload, tambahkan trigger PostgreSQL yang mempublish ke topik Kafka “alert.overload”, dikonsumsi oleh microservice notifikasi email/SMS.

Keamanan dan Akses Berbasis Peran

Mapbox GL JS mendukung token akses terbatas (scoped token). Buat token pk.eyJ..." dengan scope styles:read dan tilesets:read hanya untuk tileset distribusi. Di sisi backend, validasi peran pengguna (operator, planner, manajer) sebelum mengeluarkan token via endpoint /api/map-token.