Test robot navigation leaflet with requestAnimationFrame

by Alexandre Froger

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Robot Map Simulation</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
    .custom-icon {
      background-color: transparent;
    }
  </style>
</head>
<body>

<div id="map"></div>

</body>
</html>

JavaScript

// Initialisation de la carte
const map = L.map('map').setView([51.505, -0.09], 13);

// Ajout des tuiles OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Fonction pour générer des nœuds aléatoires
function generateNodes(numNodes) {
  const nodes = [];
  const baseLat = 51.505; // Latitude de base
  const baseLng = -0.09; // Longitude de base
  const delta = 0.01; // Variation pour disperser les nœuds

  for (let i = 0; i < numNodes; i++) {
    const lat = baseLat + (Math.random() * delta);
    const lng = baseLng + (Math.random() * delta);
    nodes.push([lat, lng]);
  }
  return nodes;
}

// Fonction pour générer des arêtes entre les nœuds
function generateEdges(nodes) {
  const edges = [];
  for (let i = 0; i < nodes.length - 1; i++) {
    edges.push([nodes[i], nodes[i + 1]]);
  }
  return edges;
}

// Durée pour parcourir entre deux nœuds (en secondes)
const travelTime = 5; // Temps de déplacement entre chaque nœud en secondes

// Fonction pour créer un jeu de données de positions pour le robot
function generateRobotPath(nodes, edges) {
  const path = [];
  const timeInterval = 0.1; // Temps d'intervalle entre les mouvements en secondes

  // Parcours des arêtes pour créer le chemin
  for (const edge of edges) {
    const [startNode, endNode] = edge;
    const numSteps = Math.floor(travelTime / timeInterval); // Nombre d'étapes entre les nœuds

    for (let step = 0; step <= numSteps; step++) {
      const t = step / numSteps; // Progression entre 0 et 1
      const position = interpolatePosition(startNode, endNode, t);
      path.push(position);
    }
  }

  return path;
}

// Choisissez le nombre de nœuds
const numberOfNodes = 3; // Changez ce nombre pour avoir plus ou moins de nœuds

// Générer les nœuds
const nodePositions = generateNodes(numberOfNodes);

// Générer les arêtes
const edges =...