• Leaflet.js で標高を取得する

• 2024年8月20日
• • • Compartir:
  • コンピュータプログラミング 地理情報システム

Leaflet.js は、以下に基づいた強力な Web ツールです。 GIS (地理情報システム)。以下は、ユーザーが特定の場所をクリックした後、地形の標高を取得する方法を示しています。 api 無料の https://open-elevation.com/

       // 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);
            
            

$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);

• • Compartir:
• コンピュータプログラミング 地理情報システム

Comentar:

Nombre (requerido):

Email (requerido):

Sitio web (opcional):

Teléfono (opcional):

Comentario:

Captcha

Enviar comentario