Différences entre les versions de « Un script Python pour visualiser un fichier GPX »

De Wiki de Mémoire Vive
Aller à la navigation Aller à la recherche
 
(7 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
La visualisation d'un itinéraire contenu dans un fichier GPX n'est pas chose aisée car il faut associer un fond de carte.
La visualisation d'un itinéraire contenu dans un fichier GPX n'est pas chose aisée car il faut associer un fond de carte.


python3 -m http.server 8000


Une solution simple consiste à exécuter un script Python.
Comment faire ?
 
1) créer un mini serveur web, en lançant cette commande,
 
<pre>
Python3 -m http.server 8000
</pre>


Comment faire ?
2) créer la page d'accueil, dans le même répertoire, avec le contenu ci-dessous,


Taper la commande ci-dessus dans le répertoire où se trouve un fichier index.html, dans lequel on aura stocké ce code,


<pre>


<!DOCTYPE html>
<!DOCTYPE html>
Ligne 45 : Ligne 50 :
             const file = fileInput.files[0];
             const file = fileInput.files[0];


             if (file && file.type === 'application/gpx+xml') {
             console.log(file); // Debug : Afficher le fichier sélectionné
 
            // Vérification du type de fichier
                 const reader = new FileReader();
                 const reader = new FileReader();
               
 
                 // Lorsqu'on charge le fichier
                 // Lorsqu'on charge le fichier
                 reader.onload = function(event) {
                 reader.onload = function(event) {
                     const gpxData = event.target.result;
                     const gpxData = event.target.result;
                    console.log(gpxData); // Debug : Afficher le contenu du fichier GPX


                     // Créer un nouvel objet GPX à partir du contenu du fichier
                     // Créer un nouvel objet GPX à partir du contenu du fichier
Ligne 72 : Ligne 80 :
                 // Lire le fichier GPX en tant que texte
                 // Lire le fichier GPX en tant que texte
                 reader.readAsText(file);
                 reader.readAsText(file);
            } else {
                alert("Veuillez sélectionner un fichier GPX valide.");
            }
         }
         }
     </script>
     </script>
Ligne 80 : Ligne 85 :
</html>
</html>


Puis ouvrir un navigateur et saisir cette URL,  
</pre>
 
3) Ouvrir un navigateur et saisir cette URL,  
http://localhost:8000/
http://localhost:8000/


Puis choisir un fichier GPX à afficher et valider.
Puis choisir un fichier GPX à afficher et valider.
Fonctionne aussi sur un client distant en indiquant l'adresse ip.

Version actuelle datée du 28 octobre 2024 à 09:16

La visualisation d'un itinéraire contenu dans un fichier GPX n'est pas chose aisée car il faut associer un fond de carte.


Comment faire ?

1) créer un mini serveur web, en lançant cette commande, 

Python3 -m http.server 8000

2) créer la page d'accueil, dans le même répertoire, avec le contenu ci-dessous, 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualisation GPX avec Sélection de Fichier</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map { height: 80vh; width: 100%; }
        #file-input { margin: 20px; }
    </style>
</head>
<body>
    <div id="file-input">
        <input type="file" id="gpxFile" accept=".gpx" />
        <button onclick="loadGPX()">Charger le fichier GPX</button>
    </div>
    <div id="map"></div>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- Leaflet GPX JS -->
    <script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@1.5.0/gpx.min.js"></script>

    <script>
        // Initialisation de la carte Leaflet
        const map = L.map('map').setView([48.8566, 2.3522], 13); // Coordonnées de Paris par défaut
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        function loadGPX() {
            const fileInput = document.getElementById('gpxFile');
            const file = fileInput.files[0];

            console.log(file); // Debug : Afficher le fichier sélectionné

            // Vérification du type de fichier
                const reader = new FileReader();

                // Lorsqu'on charge le fichier
                reader.onload = function(event) {
                    const gpxData = event.target.result;
                    console.log(gpxData); // Debug : Afficher le contenu du fichier GPX

                    // Créer un nouvel objet GPX à partir du contenu du fichier
                    new L.GPX(gpxData, {
                        async: true,
                        marker_options: {
                            startIconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
                            endIconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',
                            shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png'
                        },
                        polyline_options: {
                            color: 'blue',
                            weight: 5,
                            opacity: 0.75
                        }
                    }).on('loaded', function(e) {
                        map.fitBounds(e.target.getBounds());
                    }).addTo(map);
                };

                // Lire le fichier GPX en tant que texte
                reader.readAsText(file);
        }
    </script>
</body>
</html>

3) Ouvrir un navigateur et saisir cette URL, http://localhost:8000/

Puis choisir un fichier GPX à afficher et valider.

Fonctionne aussi sur un client distant en indiquant l'adresse ip.

Récupérée de « https://wiki.memoirevive79.mooo.com/index.php?title=Un_script_Python_pour_visualiser_un_fichier_GPX&oldid=1680 »