Test mouvement robot

by Alexandre Froger

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Robot avec Leaflet</title>
    <style>
        #map { height: 500px; }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

JavaScript

// Créer la carte
var map = L.map('map').setView([48.864716, 2.294694], 13);

// Ajouter une couche de tuiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
}).addTo(map);

// Définir les nœuds (positions)
var nodes = [
    [48.864716, 2.294694], // Nœud 1
    [48.865572, 2.296447], // Nœud 2
    [48.866207, 2.299029], // Nœud 3
    [48.865046, 2.302393]  // Nœud 4
];

// Créer des cercles pour représenter les nœuds
var nodeMarkers = nodes.map(function(latlng) {
    return L.circleMarker(latlng, { radius: 8, color: 'blue' }).addTo(map);
});

// Fonction pour animer le cercle représentant le robot
function animateRobot(robotMarker, path, index) {
    // Convertir les coordonnées du chemin en points de la carte
    var pos = map.latLngToLayerPoint(path[index]);
    pos.y -= 12; // Ajustez la position pour le centre du cercle

    // Créer une animation de position
    var fx = new L.PosAnimation();

    fx.once('end', function() {
        // Vérifier si l'index a atteint la fin du chemin
        if (index < path.length - 1) {
            // Passer au prochain nœud
            animateRobot(robotMarker, path, index + 1);
        } else {
            // Redémarrer l'animation à partir du premier nœud
            animateRobot(robotMarker, path, 0);
        }
    });

    // Récupérer l'élément SVG du cercle
    var circle = robotMarker._path;

    if (circle) {
        fx.run(circle, pos, 0.5); // 0.5 est la durée de l'animation
    }
}

// Créer un cercle pour représenter le robot
var robotMarker = L.circleMarker(nodes[0], { radius: 12, color: 'red' }).addTo(map);

// Démarrer l'animation
animateRobot(robotMarker, nodes, 0);