Bagus GIS: WebGIS Menggunakan Leaflet (Layer Group dan Layers Control)

Contoh WebGIS pada localhost.

Layer Group dan Layers Control
Secara singkat, layer group dan layers control berfungsi untuk menggabungkan data pada satu layar dan mengontrolnya.
Contoh penggunaan layer group dan layers control bisa kita lihat pada gambar di bawah ini

Contoh WebGIS pada localhost.

Pada bagian pojok kanan atas terdapat beberapa tulisan yang setiap keterangan bisa diklik sehingga muncul informasi pada peta (layer grup dan layers control)

(Penjelasan mengenai Webgis dan Leaflet dapat dilihat juga pada laman berikut, klik )

Untuk menjalankan sistem layer group dan control kita memerlukan XAMPP / sistem localhost (link download klik), setalah proses download dan install XAMPP selesai jangan lupa untuk start program, berikut tampilan software XAMPP:

XAMPP Control Panel.

Data

Data yang digunakan pada layer grup dan layers control ini adalah jawatengah.geojson dengan base map dari Mapbox serta memasukkan titik koordinat dengan menuliskan pada bahasa pemrograman, data tersebut disatukan pada layer group cities dan layer grup base map, base map yang digunakan menggunakan Mapbox streetmap dan grayscale.

(Artikel mengenai WebGIS menggunakan Leflet bagian 1 dapat juga dibaca klik).

Penulisan Program

Sumber penulisan yang dapat disalin pada sublime text:
<--Untuk kelengkapan penulisa dapat menggunakan sumber dari kami-->

<!DOCTYPE html>
<html>
<head>
<title>Pulau Jawa</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCA
Wi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQ
tXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>

</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script src="webgis/js/leaflet.ajax.js"></script>
<script>
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>
contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3
gifQ.rJcFIG214AriISLbB6B5aw';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
var cities = L.layerGroup ()
var marker = L.marker([-7.022,109.425]).addTo(cities);
var circle = L.circle([-7.260, 109.198], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 30000
}).addTo(cities);

var polygon = L.polygon([
[-7.261, 109.371],
[-7.261, 109.392],
[-7.270, 109.385]
]).addTo(cities);

marker.bindPopup("<b>Jawa tengah</b><br>I am a popup.")
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

var provinsi = L.layerGroup ()
function popUp(f,l){
var out = [];
if (f.properties){
for(key in f.properties){
out.push(key+": "+f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}
var jsonTest = new L.GeoJSON.AJAX(["webgis/geojson/jateng.geojson"],{onEachFeature:popUp}).addTo(provinsi);
var map = L.map('map', {
center: [-7.022,109.425],
zoom: 6,
layers: [grayscale, cities]
});

var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};

var overlays = {
"Cities": cities,
"Provinsi": provinsi
};

L.control.layers(baseLayers, overlays).addTo(map);

var popup = L.popup();

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Koordinat " + e.latlng.toString())
.openOn(map);
}

map.on('click', onMapClick);
L.control.scale().addTo(map);
</script>
</body>
</html>

Video Tutorial

Berikut video tutorial WebGIS menggunakan Leaflet (layers group dan layers control):

Referensi penulisan:
https://leafletjs.com/

Pages

29 Apr 2020

WebGIS Menggunakan Leaflet (Layer Group dan Layers Control)

Tidak ada komentar:

Posting Komentar

Kontak