206 lines
3.6 KiB
Markdown
206 lines
3.6 KiB
Markdown
# 🗺️ WebGIS Project - Manajemen Data Spasial
|
||
|
||
## 📌 Deskripsi Proyek
|
||
|
||
Proyek ini merupakan aplikasi **WebGIS berbasis LeafletJS, PHP, dan MySQL** yang digunakan untuk mengelola data spasial dalam bentuk:
|
||
|
||
* 📍 Point (SPBU)
|
||
* ➖ Line / Polyline (Jalan)
|
||
* 🔷 Polygon (Kavling Tanah)
|
||
|
||
Aplikasi ini memungkinkan user untuk:
|
||
|
||
* Menambahkan data langsung dari peta
|
||
* Menyimpan ke database
|
||
* Menampilkan kembali data pada peta dengan visualisasi berbeda
|
||
|
||
---
|
||
|
||
## 🎯 Tujuan Tugas
|
||
|
||
Mahasiswa diharapkan mampu:
|
||
|
||
* Mengimplementasikan WebGIS berbasis web
|
||
* Mengelola data spasial (Point, Line, Polygon)
|
||
* Melakukan analisis sederhana:
|
||
|
||
* Panjang jalan
|
||
* Luas tanah
|
||
* Menggunakan LeafletJS untuk visualisasi peta
|
||
|
||
---
|
||
|
||
## 🧩 Fitur Aplikasi
|
||
|
||
### 1. 📍 Data Point - SPBU
|
||
|
||
* Input dengan klik pada peta
|
||
* Menyimpan:
|
||
|
||
* Nama SPBU
|
||
* Nomor SPBU
|
||
* Status (24 jam / tidak)
|
||
* Latitude & Longitude
|
||
* Ditampilkan sebagai marker pada peta
|
||
|
||
---
|
||
|
||
### 2. ➖ Data Line - Jalan
|
||
|
||
* Input dengan menggambar garis (Polyline)
|
||
* Status jalan:
|
||
|
||
* Jalan Nasional
|
||
* Jalan Provinsi
|
||
* Jalan Kabupaten
|
||
* Warna berbeda sesuai status:
|
||
|
||
* Nasional → Merah
|
||
* Provinsi → Biru
|
||
* Kabupaten → Hijau
|
||
* Panjang jalan dihitung otomatis (meter)
|
||
|
||
---
|
||
|
||
### 3. 🔷 Data Polygon - Kavling Tanah
|
||
|
||
* Input dengan menggambar area (Polygon)
|
||
* Status kepemilikan:
|
||
|
||
* SHM
|
||
* HGB
|
||
* HGU
|
||
* HP
|
||
* Warna berbeda sesuai status
|
||
* Luas tanah dihitung otomatis (m²)
|
||
|
||
---
|
||
|
||
## ⚙️ Teknologi yang Digunakan
|
||
|
||
* 🌐 Frontend: HTML, CSS, JavaScript
|
||
* 🗺️ Library: LeafletJS + Leaflet Draw ([leaflet.github.io][1])
|
||
* 🖥️ Backend: PHP
|
||
* 🗄️ Database: MySQL
|
||
|
||
Leaflet mendukung berbagai bentuk geometri seperti:
|
||
|
||
* Marker (Point)
|
||
* Polyline (Line)
|
||
* Polygon (Area) ([igismap.com][2])
|
||
|
||
---
|
||
|
||
## 🗄️ Struktur Database
|
||
|
||
### Tabel SPBU
|
||
|
||
* nama
|
||
* no_spbu
|
||
* status
|
||
* latitude
|
||
* longitude
|
||
|
||
### Tabel Jalan
|
||
|
||
* nama
|
||
* status
|
||
* panjang
|
||
* geom (koordinat)
|
||
|
||
### Tabel Kavling
|
||
|
||
* nama
|
||
* status
|
||
* luas
|
||
* geom (koordinat)
|
||
|
||
---
|
||
|
||
## 🔄 Alur Sistem
|
||
|
||
### Input Data
|
||
|
||
1. User memilih mode (Point / Line / Polygon)
|
||
2. User melakukan input di peta:
|
||
|
||
* Klik (Point)
|
||
* Draw (Line / Polygon)
|
||
3. Sistem menghitung:
|
||
|
||
* Panjang (Line)
|
||
* Luas (Polygon)
|
||
4. Data dikirim ke server (PHP)
|
||
5. Data disimpan ke MySQL
|
||
|
||
---
|
||
|
||
### Menampilkan Data
|
||
|
||
1. Data diambil dari database
|
||
2. Ditampilkan di peta
|
||
3. Warna disesuaikan berdasarkan kategori
|
||
4. Data juga ditampilkan di sidebar
|
||
|
||
---
|
||
|
||
## 🧠 Konsep GIS yang Digunakan
|
||
|
||
* Spatial Data:
|
||
|
||
* Point
|
||
* Line
|
||
* Polygon
|
||
* Attribute Data
|
||
* Visualisasi berbasis kategori
|
||
* Analisis spasial sederhana:
|
||
|
||
* Distance (panjang)
|
||
* Area (luas)
|
||
|
||
---
|
||
|
||
## 🚀 Cara Menjalankan
|
||
|
||
1. Jalankan MySQL
|
||
2. Masuk ke folder project:
|
||
|
||
```
|
||
cd webgis-spbu
|
||
```
|
||
3. Jalankan server:
|
||
|
||
```
|
||
php -S localhost:8000
|
||
```
|
||
4. Buka di browser:
|
||
|
||
```
|
||
http://localhost:8000
|
||
```
|
||
|
||
---
|
||
|
||
## 📌 Catatan Penting
|
||
|
||
* Jangan menggunakan Live Server (tidak support PHP)
|
||
* Gunakan Leaflet Draw untuk input Line & Polygon
|
||
* Perhitungan panjang & luas HARUS otomatis (tidak manual)
|
||
|
||
---
|
||
|
||
## 🎓 Kesimpulan
|
||
|
||
Aplikasi ini merupakan implementasi dasar WebGIS yang mencakup:
|
||
|
||
* Input data spasial
|
||
* Penyimpanan database
|
||
* Visualisasi peta interaktif
|
||
|
||
Proyek ini menunjukkan pemahaman terhadap konsep dasar Sistem Informasi Geografis (SIG) dalam pengembangan aplikasi berbasis web.
|
||
|
||
---
|
||
|
||
[1]: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html?utm_source=chatgpt.com "Leaflet Draw Documentation"
|
||
[2]: https://www.igismap.com/leafletjs-point-polyline-polygon-rectangle-circle/?utm_source=chatgpt.com "Leaflet.js - Point, Polyline, Polygon, Rectangle, Circle"
|