BAB 3: Peta yang Bisa Dibuka dari Ponsel: Web Map dan Layanan

#Studi kasus: "Bisa dibuka tanpa QGIS?"

Kepala Seksi mau menunjukkan peta petak dan titik panas ke rapat. Peserta rapat tidak punya QGIS, sebagian hanya membawa ponsel. Analis Muda perlu mengubah peta di komputernya menjadi halaman yang cukup dibuka di browser. Di bab ini ia belajar caranya, dan tetap mencobanya di komputernya sendiri, bukan di server kantor.

#Konsep: web map dalam tiga kalimat

Web map adalah peta yang digambar di dalam browser memakai data yang dikirim lewat internet atau jaringan. Bayangkan restoran: data adalah dapur, layanan adalah pelayan yang menjawab pesanan, dan browser adalah meja tamu. Pesanan berbeda mendapat kiriman berbeda: ada yang meminta gambar jadi, ada yang meminta bahan mentah.

#Empat jenis kiriman

Empat istilah baru. Pahami dulu apa yang dikirim, baru nama layanannya.

• WMS (Web Map Service): mengirim gambar peta jadi. Ringan, tetapi atribut tidak bisa ditanya.
• WFS (Web Feature Service): mengirim objek beserta atribut. Lebih berat, tetapi bisa difilter dan dianalisis.
• Ubin (tile): mengirim kepingan gambar kecil bernomor. Sangat cepat untuk peta dasar.
• GeoJSON: berkas teks berisi objek dan atribut. Cocok untuk data kecil yang ditaruh langsung bersama halaman web.

QGIS Server melayani WMS, WFS, WMTS, WCS, dan OGC API Features dari sebuah proyek QGIS (dokumentasi QGIS Server).

#Ubin dan nomornya

Peta dasar web dipotong menjadi ubin bernomor x, y, dan zoom. Tiap kali zoom naik satu tingkat, jumlah ubin menjadi empat kali lipat.

Skrip skrip/buat_peta_web.py berisi fungsi ke_tile yang menghitung nomor ubin dari bujur dan lintang. Hasil ujinya: titik (0, 0) pada zoom 0 berada di ubin (0, 0), dan pada zoom 1 di ubin (1, 1). Sebagai contoh, bujur 106,85 dan lintang -6,2 pada zoom 10 jatuh di ubin (815, 529).

opsi = QgsVectorFileWriter.SaveVectorOptions()
opsi.driverName = "GeoJSON"
opsi.ct = QgsCoordinateTransform(lyr.crs(), QgsCoordinateReferenceSystem("EPSG:4326"),
                                 QgsCoordinateTransformContext())
opsi.layerOptions = ["COORDINATE_PRECISION=6", "RFC7946=YES"]
hasil = QgsVectorFileWriter.writeAsVectorFormatV3(lyr, berkas, QgsCoordinateTransformContext(), opsi)

fetch('petak.geojson').then(r => r.json()).then(function (d) {
  var lap = L.geoJSON(d, {
    style: {color: '#2B6CB0', weight: 2, fillOpacity: 0.15},
    onEachFeature: function (f, l) {
      l.bindPopup('<b>' + f.properties.ID_Petak + '</b><br>' + f.properties.NAMA_KPH);
    }
  }).addTo(peta);
  peta.fitBounds(lap.getBounds());
});

#Cek paham

1. Apa beda WMS dan WFS?
2. Mengapa data UTM harus diubah sebelum menjadi GeoJSON?
3. Mengapa halaman latihan dilayani lewat 127.0.0.1?

Jawaban:

1. WMS mengirim gambar peta jadi. WFS mengirim objek beserta atributnya.
2. GeoJSON standar memakai lintang-bujur WGS 84 (EPSG:4326), bukan UTM.
3. Alamat itu hanya bisa diakses dari komputer Anda. Aman untuk latihan, dan tidak membuka data ke orang lain.

#Kesalahan umum

• Peta kosong atau titik jatuh di Samudra. Koordinat tidak diubah ke EPSG:4326, atau urutan bujur-lintang tertukar. Ubah dulu CRS-nya.
• Halaman tidak memuat data. Dibuka lewat file://. Layani lewat server lokal.
• Halaman kosong tanpa internet. Pustaka Leaflet diunduh dari internet. Simpan Leaflet di folder sendiri bila perlu bekerja luring. [CEK]
• Data sensitif ikut terbit. GeoJSON memuat semua kolom. Hapus kolom yang tidak untuk umum sebelum mengekspor.
• Lupa atribusi. Peta dasar dari pihak lain punya syarat pencantuman sumber. Baca syarat sebelum memakainya.

#Ringkasan dan latihan

Ringkasan: Web map adalah rantai data, layanan, dan browser. Pilih kiriman sesuai kebutuhan: gambar (WMS), objek (WFS), kepingan (ubin), atau berkas teks (GeoJSON). Ubah CRS ke lintang-bujur sebelum ke web. Latihlah di komputer sendiri.

Latihan: Ubah buat_peta_web.py supaya titik panas diberi popup berisi ID_Titik. (Petunjuk: tambah onEachFeature pada layer titik. Nilai ID seperti HS-001 ada di kolom ID_Titik.)

#Tabel perbandingan: menerbitkan peta ke web