Leaflet.js ist ein leistungsstarkes Web-Tool, das auf basiert GIS (Geografische Informationssysteme). Das Folgende zeigt, wie ein Benutzer, nachdem er auf einen bestimmten Ort geklickt hat, die Höhe des Geländes erhält, alles dank der api frei von https://open-elevation.com/
Klicken Sie auf einen beliebigen Punkt auf der Karte, um die Höhe zu erhalten
Beispielcode (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);
Bearbeitung der Anfrage mit 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: