🚁 POC Monitoring de Drones
Carte interactive 2D/3D pour le suivi et monitoring de drones avec tuiles locales OSM
📋 Spécifications du POC
🎯 Objectif
Développer une carte interactive permettant le monitoring de drones avec basculement fluide entre vue 2D et 3D.
🗺️ Cartographie
Utilisation des données OSM France (france-latest.osm.pbf) converties en tuiles locales pour l'autonomie.
📱 Interface
Interface minimaliste avec toggle 2D/3D, affichage temps réel des drones et contrôles basiques.
⚡ Performance
Architecture légère sans backend, tuiles statiques, données mockées pour la démonstration.
🛠️ Stack Technique
Frontend
- OpenLayers - Cartographie 2D, gestion des couches et interactions
- CesiumJS - Rendu 3D et visualisation terrain
- ol-cesium - Plugin de transition seamless 2D ↔ 3D
- HTML/CSS/JS Vanilla - Pas de framework pour rester léger
Données
- OSM France - Source : Geofabrik
- QGIS - Génération des tuiles PNG/JPG locales
- JSON local - Données de drones mockées
📁 Structure du Projet
/var/www/html/maps-poc.rdmc-val.com/
├── index.html # Page d'accueil (cette page)
├── demo.html # Application de démonstration
├── src/
│ ├── js/
│ │ ├── app.js # Logique principale + ol-cesium
│ │ ├── drone-data.js # Données mockées des drones
│ │ └── utils.js # Fonctions utilitaires
│ ├── css/
│ │ └── style.css # Styles de l'application
│ └── tiles/
│ └── france/ # Tuiles OSM France {z}/{x}/{y}.png
│ ├── 1/
│ ├── 2/
│ └── ...
└── docs/
└── README.md # Documentation technique
🔄 Workflow de Développement
Phase 1 : Préparation des données
- Téléchargement
france-latest.osm.pbf
- Import dans QGIS
- Génération tuiles PNG (zoom 1-15) format
{z}/{x}/{y}.png
- Export dans
src/tiles/france/
Phase 2 : Développement
- Configuration OpenLayers avec tuiles locales
- Intégration ol-cesium pour le mode 3D
- Implémentation toggle 2D/3D
- Ajout des drones mockés
- Interface utilisateur basique
Phase 3 : Test & Demo
- Serveur local :
python -m http.server 8000
- Tests navigation 2D/3D
- Validation affichage drones
- Performance et optimisations
🎯 Fonctionnalités du POC
✅ Fonctionnalités Core
- TODO Carte France avec tuiles locales
- TODO Basculement 2D/3D fluide
- TODO Affichage drones en temps réel
- TODO Navigation et zoom
🔧 Fonctionnalités Avancées
- TODO Trajectoires de vol
- TODO Informations drone (popup)
- TODO Zones de vol autorisées
- TODO Contrôles basiques
🆚 Comparaison avec Mapbox
✅ Similitudes avec Mapbox
- Navigation fluide 2D/3D (comme Mapbox GL JS)
- Performances optimisées avec tuiles vectorielles/raster
- Transitions seamless entre les vues
- Contrôles intuitifs (zoom, rotation, inclinaison)
- Styling avancé des couches
🏆 Avantages de notre solution
- Meilleur 3D - CesiumJS supérieur à Mapbox pour la 3D
- Indépendance - Pas de dépendance externe/payante
- Tuiles locales - Autonomie complète
- Flexibilité - Plus de contrôle sur le rendu
📊 Comparaison Technique
| Aspect |
Notre Solution (OL + ol-cesium) |
Mapbox |
| Rendu 2D |
OpenLayers (Canvas/WebGL) |
Mapbox GL JS (WebGL) |
| Rendu 3D |
CesiumJS (WebGL + terrain avancé) |
Mapbox GL JS (WebGL limité) |
| Transition |
ol-cesium (bascule complète) |
Mapbox (pitch 0-60°) |
| Données |
Tuiles locales OSM (gratuit) |
Mapbox tiles (payant) |
| Terrain 3D |
CesiumJS (très avancé) |
Mapbox (basique) |
🎨 Qualité de Rendu
Notre solution peut atteindre un rendu équivalent ou supérieur à Mapbox en termes de :
- ✨ Qualité 3D - Meilleure avec CesiumJS (terrain réaliste, éclairage avancé)
- 🎯 Fluidité des animations - Transitions 2D/3D seamless
- 🔧 Richesse des interactions - Contrôles personnalisables
- 🎪 Effets visuels - Shaders et post-processing avec WebGL
Optimisations pour maximiser la qualité visuelle :
- Tuiles vectorielles plutôt que PNG/JPG pour un rendu net
- Styles personnalisés avec OpenLayers (couleurs, typographie)
- Optimisation WebGL pour les performances
- Anti-aliasing et lissage des contours
🚀 Démarrage Rapide
📁 Localisation du Projet
Tout le travail se fait dans : /var/www/html/maps-poc.rdmc-val.com/
Prérequis
- Navigateur moderne (Chrome, Firefox, Safari)
- Python 3.x ou Node.js (pour serveur local)
- QGIS (pour génération tuiles)
Installation
# Naviguer vers le répertoire du POC
cd /var/www/html/maps-poc.rdmc-val.com
# Générer les tuiles avec QGIS (voir Phase 1)
# Lancer le serveur local depuis le répertoire
python -m http.server 8000
# Accéder à l'application
http://localhost:8000/index.html # Cette page
http://localhost:8000/demo.html # Application de démonstration
🎮 Accéder à la Démo
📊 Données de Test
Drones Mockés
- Drone Alpha - Position: Paris (48.8566, 2.3522) - Altitude: 150m
- Drone Beta - Position: Lyon (45.7640, 4.8357) - Altitude: 200m
- Drone Gamma - Position: Marseille (43.2965, 5.3698) - Altitude: 100m
Les drones se déplacent selon des trajectoires préprogrammées pour simuler un vol réel.