Project Webgis2 SIG
This commit is contained in:
+245
@@ -0,0 +1,245 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base target="_top">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Quick Start - Leaflet</title>
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css">
|
||||
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="control">
|
||||
<button onclick="aktifkanMode()">Gambar Tanah</button>
|
||||
<button onclick="simpanPolygon()">Simpan Tanah</button>
|
||||
<button onclick="resetPolygon()">Reset</button>
|
||||
</div>
|
||||
|
||||
<div id="map" style="width: 1000px; height: 600px;"></div>
|
||||
|
||||
<script>
|
||||
const map = L.map('map').setView([-0.059502, 109.3462785], 16);
|
||||
|
||||
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
let modeGambar = false;
|
||||
let titikPolygon = [];
|
||||
let polygonSementara = null;
|
||||
let titikMarkers = [];
|
||||
let layerTanah = L.layerGroup().addTo(map);
|
||||
|
||||
function aktifkanMode() {
|
||||
modeGambar = true;
|
||||
}
|
||||
|
||||
function resetPolygon() {
|
||||
titikPolygon = [];
|
||||
if (polygonSementara) {
|
||||
map.removeLayer(polygonSementara);
|
||||
polygonSementara = null;
|
||||
}
|
||||
|
||||
titikMarkers.forEach(m => map.removeLayer(m));
|
||||
titikMarkers = [];
|
||||
}
|
||||
|
||||
const marker = L.marker([-0.059502, 109.34626578]).addTo(map)
|
||||
.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
|
||||
|
||||
const circle = L.circle([-0.059502, 109.346544546], {
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.5,
|
||||
radius: 500
|
||||
}).addTo(map).bindPopup('I am a circle.');
|
||||
|
||||
const polygon = L.polygon([
|
||||
[-0.0595334, 109.346224],
|
||||
[-0.0577872, 109.34999],
|
||||
[-0.059872, 109.3476675]
|
||||
]).addTo(map).bindPopup('I am a polygon.');
|
||||
|
||||
|
||||
const popup = L.popup()
|
||||
.setLatLng([-0.059502, 109.3462785])
|
||||
.setContent('I am a standalone popup.')
|
||||
.openOn(map);
|
||||
|
||||
map.on('click', function(e) {
|
||||
if (!modeGambar) return;
|
||||
|
||||
const latlng = e.latlng;
|
||||
|
||||
titikPolygon.push([latlng.lat, latlng.lng]);
|
||||
|
||||
const markerTitik = L.circleMarker([latlng.lat, latlng.lng], {
|
||||
radius: 5,
|
||||
color: 'black',
|
||||
fillColor: 'yellow',
|
||||
fillOpacity: 1
|
||||
}).addTo(map);
|
||||
|
||||
titikMarkers.push(markerTitik);
|
||||
|
||||
if (polygonSementara) {
|
||||
map.removeLayer(polygonSementara);
|
||||
}
|
||||
|
||||
polygonSementara = L.polygon(titikPolygon, {
|
||||
color: 'blue',
|
||||
fillOpacity: 0.3
|
||||
}).addTo(map);
|
||||
});
|
||||
|
||||
function simpanPolygon() {
|
||||
if (titikPolygon.length < 3) {
|
||||
alert("Minimal 3 titik!");
|
||||
return;
|
||||
}
|
||||
|
||||
const form = `
|
||||
<form onsubmit="prosesSimpanPolygon(event)">
|
||||
<label>Nama:</label><br>
|
||||
<input type="text" id="namaTanah" required><br><br>
|
||||
|
||||
<label>Status Tanah:</label><br>
|
||||
<select id="statusTanah">
|
||||
<option value="SHM">Sertifikat Hak Milik (SHM)</option>
|
||||
<option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
|
||||
<option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
|
||||
<option value="HP">Sertifikat Hak Pakai (HP)</option>
|
||||
</select><br><br>
|
||||
|
||||
<button type="submit">Simpan</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
L.popup()
|
||||
.setLatLng(titikPolygon[titikPolygon.length - 1])
|
||||
.setContent(form)
|
||||
.openOn(map);
|
||||
}
|
||||
|
||||
function hitungLuas(koordinat) {
|
||||
return L.GeometryUtil.geodesicArea(
|
||||
koordinat.map(k => L.latLng(k[0], k[1]))
|
||||
);
|
||||
}
|
||||
|
||||
function prosesSimpanPolygon(event) {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
let nama = document.getElementById("namaTanah").value;
|
||||
let status = document.getElementById("statusTanah").value;
|
||||
|
||||
let luas = hitungLuas(titikPolygon);
|
||||
|
||||
const dataBaru = {
|
||||
nama: nama,
|
||||
koordinat: [...titikPolygon],
|
||||
status: status,
|
||||
luas: luas
|
||||
};
|
||||
|
||||
let data = JSON.parse(localStorage.getItem("tanah")) || [];
|
||||
data.push(dataBaru);
|
||||
|
||||
localStorage.setItem("tanah", JSON.stringify(data));
|
||||
|
||||
alert("Tanah berhasil disimpan!");
|
||||
|
||||
map.closePopup();
|
||||
resetPolygon();
|
||||
modeGambar = false;
|
||||
loadData();
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Terjadi error: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function hapusTanah(index) {
|
||||
let data = JSON.parse(localStorage.getItem("tanah")) || [];
|
||||
|
||||
data.splice(index, 1);
|
||||
|
||||
localStorage.setItem("tanah", JSON.stringify(data));
|
||||
|
||||
alert("Tanah dihapus!");
|
||||
|
||||
loadData();
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
|
||||
layerTanah.clearLayers();
|
||||
|
||||
let dataJalan = JSON.parse(localStorage.getItem("tanah")) || [];
|
||||
|
||||
dataJalan.forEach((t, index) => {
|
||||
|
||||
let warna;
|
||||
|
||||
if (t.status === "SHM") {
|
||||
warna = "red";
|
||||
} else if (t.status === "HGB") {
|
||||
warna = "blue";
|
||||
} else if (t.status === "HGU") {
|
||||
warna = "green";
|
||||
} else {
|
||||
warna = "orange";
|
||||
}
|
||||
|
||||
let luasM = t.luas.toLocaleString('id-ID', {
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
|
||||
let poly = L.polygon(t.koordinat, {
|
||||
fillOpacity: 0.4,
|
||||
color: warna
|
||||
});
|
||||
|
||||
poly.bindPopup(`
|
||||
<b>${t.nama}</b><br>
|
||||
<b>Status:</b> ${t.status}<br><br>
|
||||
Luas: ${luasM} m²<br><br>
|
||||
<button onclick="hapusTanah(${index})">Hapus</button>
|
||||
`);
|
||||
|
||||
layerTanah.addLayer(poly);
|
||||
});
|
||||
}
|
||||
|
||||
loadData();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user