Leaflet.js est un outil Web puissant basé sur GIS (Systèmes d'Information Géographique). Ce qui suit montre comment un utilisateur, après avoir cliqué sur un certain emplacement, obtiendra l'élévation du terrain, tout cela grâce au api libre de https://open-elevation.com/
Cliquez sur n'importe quel point de la carte pour obtenir l'élévation
Exemple de code (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);
Traiter la demande avec 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: