Leaflet.js είναι ένα ισχυρό διαδικτυακό εργαλείο που βασίζεται σε GIS (Συστήματα Γεωγραφικών Πληροφοριών). Το παρακάτω δείχνει πώς ένας χρήστης, αφού κάνει κλικ σε μια συγκεκριμένη τοποθεσία, θα αποκτήσει το υψόμετρο του εδάφους, χάρη στο api ελεύθερο από https://open-elevation.com/
Κάντε κλικ σε οποιοδήποτε σημείο του χάρτη για να δείτε το υψόμετρο
Παράδειγμα κώδικα (Javascript)
// Initialize the map
var map = L.map('map').setView([0, 0], 2);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Función para manejar clics en el mapa
function onMapClick(e) {
const form_data = new FormData();
form_data.append('lat', e.latlng.lat);
form_data.append('lng', e.latlng.lng);
fetch("ajax.php", {
method: "POST",
body: form_data
}).then(function(response) {
return response.json();
}).then(function(data) {
if (!data.success) return;
const json = JSON.parse(data.json);
const elevation = json.results[0].elevation;
L.popup()
.setLatLng([lat, lng])
.setContent('Elevation: ' + elevation + ' meters')
.openOn(map);
});
// Obtener las coordenadas clickeadas
var lat = e.latlng.lat;
var lng = e.latlng.lng;
};
// Añadir el listener de clics en el mapa
map.on('click', onMapClick);
Χειρισμός του αιτήματος με PHP (ajax.php)
$response = new stdClass();
$response->success = false;
$response->json = null;
$response->lat = filter_input(INPUT_POST, 'lat');
$response->lng = filter_input(INPUT_POST, 'lng');
$response->url = "https://api.open-elevation.com/api/v1/lookup?locations=". $response->lat . "," . $response->lng;
$json = file_get_contents($response->url);
if ($json) {
$response->json = $json;
$response->success = true;
}
echo json_encode($response);
Comentar: