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
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
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
Introduction
Présentation du SpacEyes
4
• Une gamme complète de logiciels
Institut Supérieur des Arts Multimédias de la Manouba
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
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
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
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)
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
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
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
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 »
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
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
Institut Supérieur des Arts Multimédias de la Manouba 15
Analyse et conception
Géocodage
Conception
Institut Supérieur des Arts Multimédias de la Manouba 16
Diagramme de classe– Module Géocodage
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.
Institut Supérieur des Arts Multimédias de la Manouba 18
Analyse et conception
Vues immersives
Conception
Institut Supérieur des Arts Multimédias de la Manouba 19
Diagramme de classe– Module Google Street View
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
Institut Supérieur des Arts Multimédias de la Manouba 21
Analyse et conception
Slippy Maps
Conception
Institut Supérieur des Arts Multimédias de la Manouba 22
Diagramme de classe– Module Google Street View
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
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
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
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)
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é
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
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é
Institut Supérieur des Arts Multimédias de la Manouba 30
Réalisation et test
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
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
Merci Pour Votre Attention
Institut Supérieur des Arts Multimédias de la Manouba
33

Exposé pfe

  • 1.
    Présenté par IssaouiIlyes 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 desArts 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 5InstitutSupé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 6InstitutSupé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 7InstitutSupé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 desArts 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 desArts 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 desArts 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 desArts 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 desArts 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érieurdes 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 desArts 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 desArts Multimédias de la Manouba 15 Analyse et conception Géocodage Conception
  • 16.
    Institut Supérieur desArts Multimédias de la Manouba 16 Diagramme de classe– Module Géocodage
  • 17.
    Institut Supérieur desArts 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 desArts Multimédias de la Manouba 18 Analyse et conception Vues immersives Conception
  • 19.
    Institut Supérieur desArts Multimédias de la Manouba 19 Diagramme de classe– Module Google Street View
  • 20.
    Institut Supérieur desArts 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 desArts Multimédias de la Manouba 21 Analyse et conception Slippy Maps Conception
  • 22.
    Institut Supérieur desArts Multimédias de la Manouba 22 Diagramme de classe– Module Google Street View
  • 23.
    Institut Supérieur desArts 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 desArts 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 desArts 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 desArts 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 desArts 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 desArts 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 desArts 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 desArts Multimédias de la Manouba 30 Réalisation et test
  • 31.
    Institut Supérieur desArts 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 desArts 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 VotreAttention Institut Supérieur des Arts Multimédias de la Manouba 33