Upload semua tugas SIG

2026-06-13 00:45:23 +07:00
commit c8e75593cb
361 changed files with 78622 additions and 0 deletions
@@ -0,0 +1,100 @@
+// 1. Inisialisasi Peta (Koordinat Indonesia sebagai pusat)
+const map = L.map('map').setView([-2.5489, 118.0149], 5);
+
+// Tambahkan Basemap OpenStreetMap
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© OpenStreetMap contributors'
+}).addTo(map);
+
+// 2. Variabel Global untuk Menggambar Jalan Baru
+let koordinatJalan = [];
+let layerJalanBaru = L.polyline([], { color: 'black', weight: 4, dashArray: '5, 5' }).addTo(map);
+
+// Fungsi Pemberian Warna Berdasarkan Status Jalan
+function dapatkanStyleJalan(status) {
+    switch(status) {
+        case 'Nasional':  return { color: '#FF0000', weight: 5 }; // Merah
+        case 'Provinsi':  return { color: '#00FF00', weight: 4 }; // Hijau
+        case 'Kabupaten': return { color: '#0000FF', weight: 3 }; // Biru
+        default:          return { color: '#000000', weight: 2 };
+    }
+}
+
+// 3. Aksi Klik di Atas Peta untuk Menggambar Garis & Hitung Panjang Otomatis
+map.on('click', function(e) {
+    let titikBaru = e.latlng;
+    koordinatJalan.push(titikBaru);
+    layerJalanBaru.setLatLngs(koordinatJalan);
+    
+    // Hitung panjang otomatis dengan fungsi bawaan Leaflet: distanceTo()
+    let totalPanjang = 0;
+    for (let i = 0; i < koordinatJalan.length - 1; i++) {
+        totalPanjang += koordinatJalan[i].distanceTo(koordinatJalan[i+1]);
+    }
+    
+    // Tampilkan hasil perhitungan (meter) ke input form
+    document.getElementById('panjang_jalan').value = totalPanjang.toFixed(2);
+});
+
+// 4. Fungsi Mengirim Data ke Backend (Create)
+function simpanJalan() {
+    let nama = document.getElementById('nama_jalan').value;
+    let status = document.getElementById('status_jalan').value;
+    let panjang = document.getElementById('panjang_jalan').value;
+
+    if (!nama || koordinatJalan.length < 2) {
+        alert("Harap isi nama jalan dan gambar minimal 2 titik di peta!");
+        return;
+    }
+
+    // Ubah data polyline Leaflet menjadi format GeoJSON sesuai perintah dosen
+    let geojsonData = JSON.stringify(layerJalanBaru.toGeoJSON().geometry);
+
+    // Kirim menggunakan Fetch API (AJAX)
+    fetch('simpan_jalan.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `nama=${encodeURIComponent(nama)}&status=${status}&panjang=${panjang}&geom=${encodeURIComponent(geojsonData)}`
+    })
+    .then(res => res.text())
+    .then(data => {
+        if (data.trim() === "Sukses") {
+            alert("Data jalan berhasil disimpan!");
+            location.reload(); // Refresh halaman untuk melihat hasilnya
+        } else {
+            alert("Gagal menyimpan: " + data);
+        }
+    });
+}
+
+// 5. Mengambil Data dari Database dan Menampilkan ke Peta (Read)
+fetch('ambil_jalan.php')
+    .then(res => res.json())
+    .then(dataJalan => {
+        dataJalan.forEach(function(jalan) {
+            // Ubah string teks geom dari DB kembali menjadi objek JSON
+            let geometri = JSON.parse(jalan.geom);
+
+            // Bungkus ke dalam format Feature GeoJSON standar
+            let geojsonFeature = {
+                "type": "Feature",
+                "geometry": geometri,
+                "properties": {
+                    "nama": jalan.nama_jalan,
+                    "status": jalan.status_jalan,
+                    "panjang": jalan.panjang_jalan
+                }
+            };
+
+            // Render ke peta dengan warna dinamis sesuai status
+            L.geoJSON(geojsonFeature, {
+                style: function(feature) {
+                    return dapatkanStyleJalan(feature.properties.status);
+                }
+            }).bindPopup(`
+                <b>Nama Jalan:</b> ${jalan.nama_jalan}<br>
+                <b>Status:</b> Jalan ${jalan.status_jalan}<br>
+                <b>Panjang:</b> ${jalan.panjang_jalan} Meter
+            `).addTo(map);
+        });
+    });