Exposé de mémoire de Fin d'Etudes Ingénieur informatique Sujet : Réalisation de librairies réutilisables mettant en avant l'interopérabilité de la solution Web du SpacEyes avec d'autres technologies

1. Présenté par Issaoui Ilyes
Encadré par Oualid Khayati (ISAMM)
Frédéric Trastour (Spaceyes)
Conception et réalisation des librairies réutilisables mettant
en avant l’interopérabilité de la solution SPACEYES avec
d’autres technologie
Soutenance de
Mémoire de Fin d’Etude

2. Plan
Institut Supérieur des Arts Multimédias de la Manouba
Introduction
Analyse et conception
Réalisation et test
Conclusion
2
Etude de l’existant

3. Introduction
Présentation du SpacEyes
Z.I. de l'Argile, 460 av de la quiera
voie K, bat 119b 06370 Mouans-Sartoux
FRANCE
3
• 10 ans dans l’édition des solutions cartographiques
• Collaboration avec plusieurs partenaires
Institut Supérieur des Arts Multimédias de la Manouba

4. Introduction
Présentation du SpacEyes
4
• Une gamme complète de logiciels
Institut Supérieur des Arts Multimédias de la Manouba

5. Introduction
Présentation du projet
5Institut Supérieur des Arts Multimédias de la Manouba
Problématique
Développer un ensemble de
composants logiciel permettant
de faciliter l’utilisation combinée
• Apparition des services web de
géomatique gratuites
• Problème d’interopérabilité de la
solution cartographique
SpacEyes3d

6. Introduction
Présentation du projet
6Institut Supérieur des Arts Multimédias de la Manouba
Web service géomatique
Google, Osm, Bing, Yahoo
…
+
Solution SpacEyes3d
Objectif

7. Introduction
Présentation du projet
7Institut Supérieur des Arts Multimédias de la Manouba
Objectif
o Géocoder une
adresse
o Géocoder inverse
Géocodage
o Diaporama 360°
o Synchronisation avec
la carte du SpacEyes
Street View
o Cartes de différents
fournisseurs
o Synchronisation
Slippy Maps
• Développer trois modules

8. Institut Supérieur des Arts Multimédias de la Manouba
• Permet d’intégrer la technologie SpacEyes3D
dans une application classique ou dans une
application web
8
Etude de l’existant
SpacEyes3D Plugin
• Peut être intégrer sous deux formes
– Un composant ActiveX
– Un Plugin à destination des navigateurs
(Internet explorer, Firefox, Chrome)

9. Institut Supérieur des Arts Multimédias de la Manouba 9
Etude de l’existant
Géocodage
• Gratuit
• Géocodage côté client
• Géocodage côté serveur
• REST API
• Gratuit
• Nécessite une clé
• Par adresse, par point, par
requête
• Mapquest API
• OpenMapquestAPI

10. Institut Supérieur des Arts Multimédias de la Manouba 10
Etude de l’existant
Vues Immersives
• Gratuit
• Fourni seulement par l’API Google Maps
Google Steet View

11. Institut Supérieur des Arts Multimédias de la Manouba 11
Etude de l’existant
Slippy Maps
• Framework JavaScript
• Open source
• Rend facile de mettre une carte dans
n'importe quelle page web
• Framework JavaScript, 28 Ko
• Open source
• Efficace pour toutes les plateformes

12. Institut Supérieur des Arts Multimédias de la Manouba 12
Analyse et conception
Architecture
• Même architecture pour les trois modules
• Le développeur crée un nouveau système en editant « index.html »

13. Machine Client
Institut Supérieur des Arts Multimédias de la Manouba 13
Machine Client
Navigateur Plugin
Serveur
Index.html
Modules
SpacEyes
Librairy
Fournisseurs des
Services
Serveur
SpacEyes

14. Institut Supérieur des Arts Multimédias de la Manouba 14
Analyse et conception
Géocodage
Besoins fonctionnelles
Analyse
• Développeur
• Ajouter le service géocodage et
géocodage inverse.
• Ajouter le service auto complétion
• L’utilisateur
• Géocode une adresse
• Géocode inverse d’un point
• Zoomer sur un résultat

15. Institut Supérieur des Arts Multimédias de la Manouba 15
Analyse et conception
Géocodage
Conception

16. Institut Supérieur des Arts Multimédias de la Manouba 16
Diagramme de classe– Module Géocodage

17. Institut Supérieur des Arts Multimédias de la Manouba 17
Analyse et conception
Vues immersives
Besoins fonctionnels
Analyse
• Développeur
• Ajouter le service Google Street
View
• Spécifier des paramètres
• L’utilisateur
• Naviguer sur le panorama
• Chercher des panoramas en déplaçant
le marqueur sur la scène.
• Naviguer sur la scène 3d.

18. Institut Supérieur des Arts Multimédias de la Manouba 18
Analyse et conception
Vues immersives
Conception

19. Institut Supérieur des Arts Multimédias de la Manouba 19
Diagramme de classe– Module Google Street View

20. Institut Supérieur des Arts Multimédias de la Manouba 20
Analyse et conception
Slippy Maps
Besoins fonctionnels
Analyse
• Développeur
• Ajouter une couche du map
Google, Osm et / ou Bing
• Spécifier un certain nombre d’options
• L’utilisateur
• Naviguer sur la scène 3d et 2d ,
• Commuter entre les couches des map.
• Activer/Désactiver les calques des
marqueurs.
• Glisser le marqueur sur la map 2d et 3d

21. Institut Supérieur des Arts Multimédias de la Manouba 21
Analyse et conception
Slippy Maps
Conception

22. Institut Supérieur des Arts Multimédias de la Manouba 22
Diagramme de classe– Module Google Street View

23. Institut Supérieur des Arts Multimédias de la Manouba 23
Réalisation et test
Géocodage
Diagramme de cas d’utilisation
• Application crée par le développeur
• Utilise le module du géocodage

24. Institut Supérieur des Arts Multimédias de la Manouba 24
Réalisation et test
Géocodage
Diagramme de séquence
• Système : crée par le développeur
• Fournisseur : Google, Osm, Bing

25. Institut Supérieur des Arts Multimédias de la Manouba 25
Réalisation et test
Google Street View
Diagramme de cas d’utilisation
• Système : crée par le développeur
• Le système gère la synchronisation

26. Institut Supérieur des Arts Multimédias de la Manouba 26
Réalisation et test
Google Street View
Mode Navigation
• Trois marqueurs:
• Bonhomme (image)
• Cercle (Point)
• Flèche (Polygon)

27. Institut Supérieur des Arts Multimédias de la Manouba 27
Réalisation et test
Google Street View
Mode Manipulation
• Trois marqueurs:
• Bonhomme : suit la souris
• Cercle vert : dessiné au dessus du map et suit la
souris
• Cercle rouge : prends les dernières coordonnées du
point trouvé

28. Institut Supérieur des Arts Multimédias de la Manouba 28
Réalisation et test
Slippy Maps
Diagramme de cas d’utilisation
• Même fonctionnement pour les deux implémentations
OpenLayers et Leaflet
• Synchronisation 2d / 3d

29. Institut Supérieur des Arts Multimédias de la Manouba 29
Réalisation et test
Slippy Maps
OpenLayers implémentation
• Synchronisation 3d –> 2D
• Récupérer les coordonnés des
coins du view port
• Construire un carré
• Zoomer le map 2d à ce carré

30. Institut Supérieur des Arts Multimédias de la Manouba 30
Réalisation et test

31. Institut Supérieur des Arts Multimédias de la Manouba 31
Conclusion
• Interopérabilité du plugin SPACEYES
• Modules validés et testés
• Nouvelles fonctionnalités ajoutées

32. Institut Supérieur des Arts Multimédias de la Manouba 32
Conclusion
• Accrocher la chance d'une expérience professionnelle dans une entreprise bien placé
dans le marché des logiciels de la géomatique
• Utiliser les connaissances acquises à l’ISAMM et les adapter pour faire face aux
nouvelles problématiques.
• Acquisition de nouvelles connaissances professionnels et relationnels
• La coopération entre membres d'une même équipee est gage de performance et qui
dégage l'esprit d'équipe
Expérience positive et apport personnels

33. Merci Pour Votre Attention
Institut Supérieur des Arts Multimédias de la Manouba
33