Université de la ManoubaInstitut Supérieur des Arts Multimédias de la ManoubaRAPPORTde Mémoire de Fin dEtudesPrésenté en v...
RemerciementsC’est avec le plus grand honneur que je réserve cette page en signe de gratitude et dereconnaissance à tous c...
Rapport de projet de fin d’étudeTable des matièresLISTE DES FIGURES 5INTRODUCTION GENERALE 1CHAPITRE 1 INTRODUCTION ET PRE...
Rapport de projet de fin d’étudeIII ITERATION 2 (GOOGLE STREET VIEW) 321 ANALYSE ET SPECIFICATION 322 CONCEPTION 33IV ITER...
Rapport de projet de fin d’étudeListe des figuresFIGURE 1.1 : SPACEYES3D BUILDER 6FIGURE 1.2 : APPLICATION WEB BASEE SUR S...
Rapport de projet de fin d’étudeFIGURE 3.14 : DIAGRAMME DE SEQUENCE GSV 1 34FIGURE 3.15 : DIAGRAMME DE SEQUENCE GSV 2 36FI...
Introduction généraleRapport de projet de fin d’étude Page 1Introduction généraleLa géomatique est une discipline ayant po...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 2Chapitre 1Introduction et présentat...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 3IntroductionCe stage d’immersion en...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 4des thèmes, charte graphique…), la ...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 5- Bureaux d’étude, Géomètres, Socié...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 6II Presentation du projetSpacEyes3D...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 7application Web intégrant le plugin...
Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 8ConclusionDans ce chapitre, nous av...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 9Chapitre 2Etude de l’existantAu Sommaire de ce Chapitr...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 10IntroductionPour réussir les librairies que nous allo...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 11II Le géocodageUn géocoder sappuie dabord et avant to...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 12Exemple de requête :« http://dev.virtualearth.net/RES...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 13 Geocoding Service : permet de prendre une adresse e...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 14 Open Geocoding Service : demande un key et elle est...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 15Nous allons développer cette fonctionnalité pour aide...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 16Le rendu des tuiles est un processus gourmand en term...
Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 17Figure 2.4 : Exemple d’utilisation de calque OpenLaye...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 18Chapitre 3Analyse et conceptionAu Sommaire de ce Ch...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 19IntroductionDans cette partie, nous allons définir ...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 20Figure 3.1 : Modèle en spiraleChaque itération va c...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 21Figure 3.2 : diagramme de contexteDescription :Le d...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 22II Itération 1 (Géocodage)Introduction :Dans cette ...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 23- Les contraintes de performance. L’application doi...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 24Figure 3.3 : Diagramme de cas d’utilisation général...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 25Description :La figure 3.3 montre un diagramme de c...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 26Figure 3.4 : Diagramme de classe du module de géoco...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 27classe parmi Google, Bing et Osm qui va être utilis...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 282.2 Diagrammes de séquenceFigure 3.6 : Diagramme de...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 29Figure 3.8 : Diagramme de séquence de géocodage Goo...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 30La figure 3.10 du diagramme de séquence montre ce f...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 31Description :Le diagramme de composant illustré dan...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 32III Itération 2 (Google Street View)1 Analyse et sp...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 332 Conception2.1 Diagramme de classeLa figure 3.13 i...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 342.2 Diagramme de séquenceFigure 3.14 : Diagramme de...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 35Description :La figure 3.14 du diagramme de séquenc...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 36Figure 3.15 : Diagramme de séquence GSV 2
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 37Description :La figure 3.15 montre le fonctionnemen...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 38Figure 3.16 : Diagramme de séquence GSV 3Descriptio...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 392.3 Diagramme de composantFigure 3.17 : Diagramme d...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 40- Le composant « sp3dGoogleSV.js » que nous dévelop...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 41IV Itération 3 (Slippy Maps)1 Analyse et spécificat...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 42Figure 3.18 : Diagramme de cas d’utilisation Slippy...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 43Figure 3.19 : Diagramme de classe SlippyMaps – Open...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 44Les deux classes illustrées en orange, sont commune...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 45Figure 3.20 : Diagramme de séquence SlippyMaps – Op...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 46Description :La figure 3.20 du diagramme de séquenc...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 47Description :La figure 3.21 du diagramme de séquenc...
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 48Figure 3.23 : Diagramme de composant – SlippyMaps
Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 49Description :Le diagramme de composant illustré dan...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 50Chapitre 4Réalisation et testAu Sommaire de ce Chapit...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 51IntroductionCette section est consacrée à la présenta...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 52Spaceyes3d SDK : permet de développer une application...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 53function createViewer() {oViewer = new Sp3dViewer("co...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 54La figure 4.1 illustre le diagramme de cas d’utilisat...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 55Figure 4.2 : Diagramme de séquence pour l’utilisateur...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 56function onProjectLoaded(iErrorCode) {var geoGoogle =...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 57Figure 4.4 : Affichage du marqueurLa figure 4.4 montr...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 58Description :L’utilisateur peut naviguer le diaporama...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 59Dans la fonction « onProjectLoaded », le développeur ...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 60Figure 4.8 : GSV – Affichage du marqueurLa figure 4.8...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 613 Module SlippyMaps3.1 Diagramme de cas d’utilisation...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 623.2 Diagramme de séquenceLa figure 4.11 illustre le d...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 63Figure 4.12 : SlippyMaps - OpenLayersLa figure 4.12 m...
Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 64Conclusion généraleRappelons que l’objectif de ce tra...
NethographieRapport de projet de fin d’étude Page 65Nethographie1http://cpierkot.wordpress.com/recherche/2https://develope...
Prochain SlideShare
Chargement dans…5
×

Rapport pfe ingénieur ilyes issaoui

3 776 vues

Publié le

Rapport de Mémoire de Fin d'Etudes.
Sujet : Réalisation de librairies réutilisables mettant en avant l'interopérabilité
de la solution Web du Spaceyes avec d'autres technologies

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 776
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
229
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rapport pfe ingénieur ilyes issaoui

  1. 1. Université de la ManoubaInstitut Supérieur des Arts Multimédias de la ManoubaRAPPORTde Mémoire de Fin dEtudesPrésenté en vue de lobtention du titredINGENIEUR EN INFORMATIQUE APPLIQUEE AU MULTIMEDIAparIssaoui IlyesSUJET :Réalisation de librairies réutilisables mettant en avant linteropérabilitéde la solution Web du Spaceyes avec dautres technologiesOrganisme : SPACEYESNom du responsable : M. Mohamed Ali El KarEncadré par (entreprise): M. Frédéric TrastourSupervisé par (ISAMM): M. Oualid KhayatiAdresse : Le Colisée Saula - Escalier B, 5ème étage EL MANAR 2 - TUNIS
  2. 2. RemerciementsC’est avec le plus grand honneur que je réserve cette page en signe de gratitude et dereconnaissance à tous ceux qui m’ont aidé dans la réalisation de mon stage.Mes remerciements s’adressent à messieurs Mohamed Ali El Kar et Frédéric Trastour pourleur accueil chaleureux et pour m’avoir accepté en tant que stagiaire au sein de la société. Leursoutien technique et leur suivi m’ont permis d’accomplir ce travail dans de bonnes conditions.J’exprime également ma profonde reconnaissance à mon encadreur à l’ISAMM : M. OualidKhayati pour la qualité d’encadrement dont il m’a fait bénéficier tout au long de la réalisation de ceprojet.Enfin, un grand merci à ma famille.
  3. 3. Rapport de projet de fin d’étudeTable des matièresLISTE DES FIGURES 5INTRODUCTION GENERALE 1CHAPITRE 1 INTRODUCTION ET PRESENTATION DU PROJET 2INTRODUCTION 3I PRESENTATION DE L’ENTREPRISE 31 LES SOLUTIONS 32 LES REFERENCES DE L’ENTREPRISE 4II PRESENTATION DU PROJET 61 OBJECTIF DU PROJET 72 PUBLIC CIBLE DU PROJET 7CONCLUSION 8CHAPITRE 2 ETUDE DE L’EXISTANT 9INTRODUCTION 10I SPACEYES3D PLUGIN 10II LE GEOCODAGE 111 GOOGLE 112 BING 113 OSM 124 L’AUTO-COMPLETION 14III VUES IMMERSIVES 15IV LES SLIPPY MAPS 2D 151 OPENLAYERS 162 LEAFLET 17CONCLUSION 17CHAPITRE 3 ANALYSE ET CONCEPTION 18INTRODUCTION 19I METHODOLOGIE : 191 CYCLE DE VIE 192 IDENTIFICATION DES ACTEURS 20II ITERATION 1 (GEOCODAGE) 221 ANALYSE ET SPECIFICATION 222 CONCEPTION 25
  4. 4. Rapport de projet de fin d’étudeIII ITERATION 2 (GOOGLE STREET VIEW) 321 ANALYSE ET SPECIFICATION 322 CONCEPTION 33IV ITERATION 3 (SLIPPY MAPS) 411 ANALYSE ET SPECIFICATION 412 CONCEPTION 42CONCLUSION 49CHAPITRE 4 REALISATION ET TEST 50INTRODUCTION 51I ENVIRONNEMENT DE DEVELOPPEMENT 511 CHOIX TECHNIQUE 512 ENVIRONNEMENT MATERIEL 523 ENVIRONNEMENT LOGICIEL 52II APERÇU SUR LE TRAVAIL REALISE 521 MODULE GEOCODAGE 532 MODULE GOOGLE STREET VIEW 573 MODULE SLIPPYMAPS 61CONCLUSION 63CONCLUSION GENERALE 64NETHOGRAPHIE 65
  5. 5. Rapport de projet de fin d’étudeListe des figuresFIGURE 1.1 : SPACEYES3D BUILDER 6FIGURE 1.2 : APPLICATION WEB BASEE SUR SPACEYES3D PLUGIN 6FIGURE 1.3 : RESULTAT SOUHAITE 7FIGURE 2.1 : OSM SEARCH SERVICE 13FIGURE 2.2 : AUTO COMPLETION DE GOOGLE 14FIGURE 2.3 : GOOGLE STEET VIEW 15FIGURE 2.4 : EXEMPLE D’UTILISATION DE CALQUE OPENLAYERS 17FIGURE 3.1 : MODELE EN SPIRALE 20FIGURE 3.2 : DIAGRAMME DE CONTEXTE 21FIGURE 3.3 : DIAGRAMME DE CAS D’UTILISATION GENERAL POUR LE DEVELOPPEUR–GEOCODAGE 24FIGURE 3.4 : DIAGRAMME DE CLASSE DU MODULE DE GEOCODAGE 26FIGURE 3.5 ETAPES D’EXTRACTIONS DES POINTS LIMITES 27FIGURE 3.6 : DIAGRAMME DE SEQUENCE GEOCODAGE DETAILLE 1 28FIGURE 3.7 : DESIGN PATTERN SINGLETON 28FIGURE 3.8 : DIAGRAMME DE SEQUENCE DE GEOCODAGE GOOGLE 29FIGURE 3.9: DIAGRAMME DE SEQUENCE DE GEOCODAGE BING/OSM 29FIGURE 3.10 : DIAGRAMME DE SEQUENCE AUTO-COMPLETION BING/OSM 30FIGURE 3.11 : DIAGRAMME DE COMPOSANT GEOCODAGE 30FIGURE 3.12 : DIAGRAMME DE CAS D’UTILISATION POUR LE DEVELOPPEUR – GSV 32FIGURE 3.13 : DIAGRAMME DE CLASSE GSV 33
  6. 6. Rapport de projet de fin d’étudeFIGURE 3.14 : DIAGRAMME DE SEQUENCE GSV 1 34FIGURE 3.15 : DIAGRAMME DE SEQUENCE GSV 2 36FIGURE 3.16 : DIAGRAMME DE SEQUENCE GSV 3 38FIGURE 3.17 : DIAGRAMME DE COMPOSANT GSV 39FIGURE 3.18 : DIAGRAMME DE CAS D’UTILISATION SLIPPYMAPS - DEVELOPPEUR 42FIGURE 3.19 : DIAGRAMME DE CLASSE SLIPPYMAPS – OPENLAYERS 43FIGURE 3.20 : DIAGRAMME DE SEQUENCE SLIPPYMAPS – OPENLAYERS 45FIGURE 3.21 : DIAGRAMME DE SEQUENCE SLIPPYMAPS – UTILISATEUR 1 46FIGURE 3.22 : DIAGRAMME DE SEQUENCE SLIPPYMAPS – UTILISATEUR 2 47FIGURE 3.23 : DIAGRAMME DE COMPOSANT – SLIPPYMAPS 48FIGURE 4.1 : DIAGRAMME DE CAS D’UTILISATION GENERAL POUR L’UTILISATEUR– GEOCODAGE 54FIGURE 4.2 : DIAGRAMME DE SEQUENCE POUR L’UTILISATEUR – GEOCODAGE 55FIGURE 4.3 : GEOCODAGE GOOGLE 56FIGURE 4.4 : AFFICHAGE DU MARQUEUR 57FIGURE 4.5 : DIAGRAMME DE CAS D’UTILISATION GENERAL POUR L’UTILISATEUR - GSV 57FIGURE 4.6 : DIAGRAMME DE SEQUENCE GSV – UTILISATEUR 58FIGURE 4.7 : GOOGLE STREET VIEW 59FIGURE 4.8 : GSV – AFFICHAGE DU MARQUEUR 60FIGURE 4.9 : MARQUEUR FLECHE 60FIGURE 4.10 : DIAGRAMME DE CAS D’UTILISATION SLIPPYMAPS– UTILISATEUR 61FIGURE 4.11 : DIAGRAMME DE SEQUENCE SLIPPYMAPS 1 62FIGURE 4.12 : SLIPPYMAPS - OPENLAYERS 63
  7. 7. Introduction généraleRapport de projet de fin d’étude Page 1Introduction généraleLa géomatique est une discipline ayant pour objectif la gestion des données à référencespatiale et qui fait appel aux sciences et aux technologies reliées à leur acquisition, leur stockage,leur traitement et leur diffusion. La géomatique fait appel principalement à des disciplines comme latopométrie, la cartographie, la géodésie, la photogrammétrie, la télédétection et linformatique1.Lévolution sans cesse croissante de linformatique appliquée aux systèmes dinformationsgéographiques a favorisé le développement de plusieurs outils technologiques dobservation de laterre via des applications informatiques. Ces opportunités du numérique viennent rendre pertinentela problématique de la gestion numérique et dynamique des villes comme levier de lobservationurbaine et du tourisme.Avec l’apparition de services web gratuits, proposant des fonctionnalités géomatiquesavancées, s’est posé le problème de l’interopérabilité de la solution de cartographie 3D SpacEyes3Davec ces nouveaux outils. La problématique à la base du projet est donc de développer un ensemblede composants logiciel permettant de faciliter l’utilisation combinée, au sein d’une même applicationweb, de SpacEyes3D Plugin et de services web géomatiques.Dans le présent rapport, nous présentons en détail les étapes que nous avons suivies pourréaliser nos librairies.Ce rapport comporte quatre chapitres qui sont organisés comme suit : dans le premierchapitre, nous présenterons la société SPACEYES et le projet proposé. Dans le deuxième on trouvel’étude de l’existant. Le troisième chapitre comprend la méthodologie du travail et trois itérationscontenant chacune l’analyse et la conception d’un module de la librairie. Enfin, le quatrièmechapitre présentera les étapes de la réalisation ainsi que les tests effectués.
  8. 8. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 2Chapitre 1Introduction et présentation du projetAu Sommaire de ce ChapitreIntroductionPrésentation de l’entreprisePrésentation du projetConclusion
  9. 9. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 3IntroductionCe stage d’immersion en société s’inscrit dans le cadre de notre formation d’ingénieur eninformatique à l’Institut Supérieur des Arts Multimédias de la Manouba. Le présent travail se dérouleau sein de la société SPACEYES. Nous présentons dans ce chapitre l’environnement du stage à traversune présentation de l’entreprise et une présentation du sujet proposé.I Présentation de l’entrepriseLa société SPACEYES est spécialisée depuis 10 ans dans l’édition de logiciels dereprésentation tridimensionnelle de données géographiques, et met à votre disposition tout sonsavoir-faire pour la mise en place de solutions cartographiques 3D.SPACEYES, spécialisée dans le traitement des images d’observation de la Terre, assure lesdéveloppements et la commercialisation de la gamme de logiciel SpacEyes3D, fondée sur l’utilisationdes images d’observation de la Terre au sein d’un outil de survol virtuel temps réel et de maquettage3D. Cet outil est destiné à tout utilisateur qui souhaite communiquer, expliquer, informer ouprésenter à un public non spécialisé tout type de problématique touchant à la gestion ou à la miseen valeur d’un territoire.1 Les solutionsEn travaillant en collaboration avec de nombreux partenaires citant : GEOimage qui offreune large gamme de cartes digitales pour la télécommunication, les plans urbains, Geomod dontles activités concernent les domaines de la géomatique et de la modélisation du cycle de leau, etOpsiGAIA qui produit des plans d’information strictement adaptés aux besoins, aux moyens et auxoutils de gestion des collectivités territoriales, SPACEYES propose l’ensemble des produits suivant :- SpacEyes3D Builder est la solution logicielle complète de survol temps réel et de maquettage3D. Complément indispensable pour un SIG, il permet de visualiser en 3D toutes vos donnéescartographiques, et de créer des présentations 3D innovantes.- SpacEyes3D Server s’appuie sur une technologie de streaming innovante pour une diffusiongrand public, sur Internet, de maquettes 3D à l’échelle d’un territoire. La solution SpacEyes3DServer permet la mise à disposition sur Internet des maquettes 3D réalisées à partir deSpacEyes3D Builder.- SpacEyes3D Viewer est un logiciel autonome permettant de naviguer et de consulter entemps réel, des maquettes 3D préalablement construites avec SpacEyes3D Builder. Ces maquettespeuvent être accédées localement ou à distance depuis un serveur SpacEyes3D Server.- SpacEyes3D Plugin est un composant permettant d’intégrer la technologie SpacEyes3D dansune application classique ou dans une application web.Elle propose également l’ensemble les services de :- Maquettes 3D : réaliser une maquette 3D virtuelle évolutive où seront mis en valeur lesaspects touristiques, urbains, immobiliers, environnementaux d’un territoire. Elle offre : unemaquette virtuelle adaptée aux besoins et budgets du client, une interface personnalisée (choix
  10. 10. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 4des thèmes, charte graphique…), la possibilité de diffuser une maquette sur Internet (duréepersonnalisée), et la mise à jour d’une maquette.- Hébergement : SpacEyes propose une solution complète dhébergement de maquettes 3Dsur serveurs dédiés. Cette solution est destinée aux organismes souhaitant mettre en ligne leursmaquettes 3D, sans avoir à les administrer au jour le jour. Elle se charge dinstaller et configurerles serveurs et de les administrer quotidiennement. Ce service comprend : la location dun ou plusieurs serveurs physiques, une ou plusieurs licences de SpacEyes 3D Server pour la diffusion des données, un serveur de base de données pour la mise à disposition des données vectorielles, un serveur Web - pour le téléchargement de SpacEyes 3D Viewer et la diffusion desprojets associés.- Développement : fortement impliquée dans ce domaine depuis plusieurs années et assurantle développement de la gamme de logiciel SpacEyes3D ainsi que lévolution du logiciel decartographie numérique GEOimage, SPACEYES dispose dune très forte expérience de ce typedapplication. Disposant de compétences variées dans des domaines relevant tant de lacartographie que de la géomatique, du traitement dimages, ou de la 3D, SPACEYES propose laréalisation dapplications autonomes ou intégrées aux logiciels SpacEyes3D et GEOimage.- Formation : standard à l’utilisation du logiciel SpacEyes3D ou spécifique qui s’organise enfonction des besoins du client et s’associe souvent à une assistance technique avec l’utilisationdes données du client.- La maintenance, incluant le support utilisateur (hotline) et la livraison des nouvelles versionsdes logiciels.2 Les références de l’entrepriseAvec plus de 1000 licences SpacEyes3D Builder installées et opérationnelles, force est deconstater que la solution SpacEyes3D séduit en France et à l’export. Les utilisateurs de la solutionSPACEYES sont avant tout des acteurs du monde de la géomatique ayant besoin de présenter etcommuniquer sur des projets d’aménagement du territoire à différentes échelles : spécialistes SIG,géomètres, producteur de données géographiques, urbanistes...Les domaines dapplications concernés sont très variés. Ci-dessous, quelques référencesSpacEyes3D Builder :- Collectivités territoriales et services déconcentrés de l’Etat : Communauté Intercommunale Réunion Est (CIREST), Pays S.U.D. Communauté de Communes Cœur du Var, Plaine des Maures au Luc en Provence Communautés urbaines: Cherbourg, Grand Lyon, Bordeaux, Nantes Métropole, Lyon Directions Régionales de lEnvironnement, de lAménagement et du Logement: DREALRhône Alpes, DREAL PACA
  11. 11. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 5- Bureaux d’étude, Géomètres, Sociétés de Services, Grands Groupes : URBATER, THEIL-COMMENS, Agence MTDA, Altiplano, I2G, Géo-Vision Avenir (GVA),CORIOLIS, Latitude-Cartagène, GEOSOFT, Expertise & Développement, Point GED(Nouvelle-Calédonie), AIGL Développement (La Réunion), Zénith Topographie, AECInformatique, OPSIA, SYSTRA, SGDS International, S.I.G., C.I.C.L. Cabinet LECHENE (76), Cabinet QUEAU (29), SOGEXFO (31), METRIS SA (80), CabinetGIULIANI (14), Cabinet CLARET (83), Rudaz + Partner (Suisse), Cabinet BUET (83),Cabinet Guelle & Fuchs (57), GUID-OI (La Réunion), Cabinet CABON (62), CabinetAMAYENC (83), Cabinet TREDE (83), Cabinet Fuchs (Martinique), Cabinet BUZANCAIS(83), Cabinet LEVIN (38), Cabinet NEUILLY (18) MAPPY, ALCATEL (Paris), FLEXIMAGE, Télédiffusion de France (TDF), SPOTIMAGE,VEOLIA EAU, MAIA-SONNIER, EGIS-SCETAUROUTE (Toulouse)- Organismes Publics : Centre National dEtudes Spatiales (CNES) - PONT Entente Interdépartementale (Ex-Circos) Parc National du Mercantour (Borne interactive) - Parc Naturel Régional de Chartreuse Bureau de Recherche Géologique et Minières (BRGM Marseille, Paris, Orléans) SAGEM Défense sécurité, Société National des Chemins de Fer (SNCF) Commissariat à lEnergie Atomique (CEA), Institut de Radioprotection et de SûretéNucléaire (IRSN) Centre National dAguerrissement en Montagne (CNAM) - Armée de Terre- Export : SINTEL & SONATEL (Sénégal), ORASCOM & Orange (Roumanie, NEO (Pays-Bas) OfekAerialPhotography (Israel), EKODES, INRENA &Peruvian Air Force (Pérou) Basarsoft, Altındağ Municipality, Ankara Governorship Engesat, Vista Divina &Engemap (Brésil), Novaterra, Sabesp, Petroecuador (Equateur),Vietic (Ecuador) Univ. de Chulalonkorn et Univ. de Silapakorn, OCSB/Ministère de lindustrie, Royal ThaiAir Force (Thailande) Japan Forest Technology Association (JAFTA), Japan Atomic Energy Agency (Japon) Chinese Cultural University (Taiwan), Taipei County Government (Taiwan), AletheiaUniversity (Taiwan), SOMAF company, Korean Aerospace Research Institute (Korea),Chung-AngAerosurvey (Korea) Mapping agency & Institute of Information Technology, from Ministry of Defence(Vietnam), Geomatic Consulting International (Vietnam)
  12. 12. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 6II Presentation du projetSpacEyes3D Builder est une application permettant de créer des maquettes 3D à partir desdonnées cartographiques. Cette maquette peut être visualisée en local ou sur internet avec le Buildermais aussi les autres outils de la gamme SpacEyes3D et en particulier SpacEyes3D Plugin qui permetde développer des applications Web intégrant la technologie 3D de SPACEYES.Figure 1.1 : SpacEyes3D BuilderLa figure 1.1 est une capture d’écran du logiciel SpacEyes3D Builder.Figure 1.2 : Application Web basée sur SpacEyes3D PluginLa figure 1.2 est une capture d’écran du plugin Spaceyes intégré dans une page web.Dans le cadre de mon stage de fin d’étude, qui s’est déroulé du 04 février jusqu’à fin juin,SPACEYES m’a proposé de concevoir et développer une librairie JavaScript permettant, dans une
  13. 13. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 7application Web intégrant le plugin SpacEyes3D[1], d’ajouter très simplement des fonctionnalitéssupplémentaires (affichage synchronisée d’une carte 2D, fonctions de recherche à partir d’uneadresse, recherche d’itinéraire, ...) en s’interfaçant avec des services Web existant.1 Objectif du projetCe projet vise donc à créer des librairies JavaScript hautement réutilisables et configurablespermettant de combiner aisément dans une même application Web une fenêtre de visualisation 3Dbasée sur SpacEyes3D Plugin et des fonctionnalités supplémentaires.Finalement, après le développement des bibliothèques et les intégrer, le résultat souhaité estillustré dans la figure 1.3.Figure 1.3 : Résultat souhaitéDans la figure 1.3, les carreaux orange, bleu et vert représentent les modules à développer.Une même application pourra utiliser un ou plusieurs des modules additionnels.2 Public cible du projetLes utilisateurs visés sont les possesseurs du kit de développement SpacEyes 3D SDK quipermet de développer des applications Web 3D basées sur la technologie SPACEYES. Le public finalest le « grand public » dans le cas de développement d’application internet ouverte, comme parexemple des applications touristiques, ou bien un public professionnel dans le cas de développementd’applications d’entreprises en intranet par exemple.[1]www.spaceyes3d.com/plugin
  14. 14. Chapitre 1Introduction et présentation du projetRapport de projet de fin d’étude Page 8ConclusionDans ce chapitre, nous avons présenté l’organisme d’accueil et nous avons spécifié le cadreenvironnant du projet ainsi que le travail demandé.
  15. 15. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 9Chapitre 2Etude de l’existantAu Sommaire de ce ChapitreIntroductionSpaceEyes3D PluginGéocodageVue ImmersiveSlippyMaps 2DConclusion
  16. 16. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 10IntroductionPour réussir les librairies que nous allons développer, nous avons étudié différentes librairieset API ayant des activités similaires, ce qui nous a permis de visualiser de près le type de servicevoulu, éviter toute interruption ou contrainte inattendue et mettre en évidence les différents acteurset leurs besoins.Cette démarche a pour but la restitution des points clés au niveau de la conception et les APIà utiliser.I SpacEyes3D PluginSpacEyes3D Plugin est un composant basé sur la technologie de SpacEyes3D. Ce composantpermet d’intégrer la technologie SpacEyes3D dans une application classique ou dans une applicationweb. Il permet d’ouvrir et de manipuler des projets 3D réalisés avec SpacEyes3D Builder sous licenceSpacEyes3D SDK.SpacEyes3D Plugin peut être intégrer sous deux formes :- Un composant ActiveX permettant linclusion dans toute application Windows supportantcette technologie, indépendamment du langage de programmation (par exemple C#, C++, VisualBasic, Python).- Un Plugin à destination des navigateurs Internet (Internet explorer, Firefox, Chrome)permettant lintégration dans une application Web (JavaScript).Ce Plugin inclut une interface de programmation (API) permettant de développer desapplications personnalisées sur la base de la technologie SpacEyes3D. SpacEyes3D Plugin proposedeux niveaux d’API selon la licence choisie: API Basic et API Pro.Pour notre projet, on s’intéresse à la forme destinée aux navigateurs web. Où l’applications’exécute chez le client (JavaScript).Fonctionnement :Pour intégrer Spaceyes dans une page html, le développeur utilise l’API JavaScript, il instanciela classe ‘Sp3dViewer’ en lui passant le nom de l’élément html (div) qui va le contenir, largeur ethauteur de la fenêtre. Une fois le plugin chargé, le développeur charge une scène en passantl’emplacement du fichier (local ou distant), ce fichier est d’extension SPV.Lextension de fichier SPV est associée à plusieurs programmes et applications et divers typesde fichiers. SpacEyes3D Builder stocke les modèles 3D crées à partir de différentes donnéescartographiques SIG dans des fichiers de projet SPV.
  17. 17. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 11II Le géocodageUn géocoder sappuie dabord et avant tout sur un référentiel. Ce référentiel peut être unecouche de points-adresses, une filaire de voies, une couche de parcelles cadastrales… À peu prèsnimporte quelle couche dinformations géographiques comportant des adresses.Le géocodage permet à affecter des coordonnées géographiques (longitude/latitude) à uneadresse préalablement restructurée et normalisée.Le géocodage inversé (ou reverse geocoding) consiste à effectuer lopération inverse duGéocodage, cest-à-dire dattribuer une adresse à des coordonnées géographiques.Plusieurs entreprises fournissent ce service à travers des API JavaScript qui sont accessible viades services de type REST.1 GoogleGoogle propose deux solutions de géocodage :- Géocodage côté client : LAPI Google Maps JavaScript V3 fournit des classes permettant derécupérer des données à travers des requêtes envoyées. Cette API est exécutée dans lenavigateur. Cette API est gratuite et aucune clé n’est demandée2.- Géocodage côté serveur http : permet à l’application cotée serveur dinterroger directementles serveurs de Google pour le géocodage à partir des requêtes http. Aussi on peut utiliser ceservice coté client en invoquant des requêtes http à partir du navigateur en utilisant JavaScript(requêtes AJAX).Ces services sont limités pour 25000 requête par jour ; pour notre module, nous allonsutiliser l’API coté client, réduisant ainsi le risque d’atteindre le nombre maximal de requêtesautorisées.2 BingBing offre son service de géocodage à travers BingMaps REST API qui fournit une interfacepour effectuer des tâches telles que la création dune carte statique avec des punaises, récupérer lesmétadonnées de limage, ou la création dun itinéraire. Pour utiliser cette API, une clé (key) doit êtreobtenue.Pour le géocodage, Bing REST API propose trois solutions, pour chacune un modèle d’url estspécifié :- Find a Location by Address : Renvoie une ou plusieurs ressources de lemplacement quicontiennent des informations de localisation associées avec les valeurs des paramètres dURL. Lesinformations de localisation pour chaque ressource comprennent les coordonnées de latitude etde longitude, le type de lieu, et la zone géographique qui contient lemplacement.
  18. 18. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 12Exemple de requête :« http://dev.virtualearth.net/REST/v1/Locations/CA/adminDistrict/postalCode/locality/addressLine?includeNeighborhood=includeNeighborhood&maxResults=maxResults&key=BingMapsKey »- Find a Location by Point : renvoie une ou plusieurs ressources de lemplacement quicontiennent des informations de localisation associées avec la latitude et les valeurs descoordonnées de longitude que vous spécifiez. Les informations de localisation peut être aussiprécis comme une adresse ou plus générales comme le pays ou la région. On peut spécifier le typedinformations de localisation que nous voulons recevoir en définissant le paramètre‘includeEntityTypes’ dans lURL. Par exemple, on choisit de recevoir uniquement des informationssur le quartier qui correspond aux coordonnées.Exemple de requête :« http://dev.virtualearth.net/REST/v1/Locations/point?includeEntityTypes=entityTypes&includeNeighborhood=includeNeighborhood&key=BingMapsKey »- Find a Location by Query : permet d’ obtenir les coordonnées de latitude et de longitudecorrespondants à des informations de localisation prévu comme une chaîne de requête. Ceschaînes peuvent être spécifiées comme un paramètre dURL structuré ou comme une valeur deparamètre de requête. Ce modèle dURL peut être utilisé pour linformation de géocodage partoutdans le monde.Exemple de requête :« http://dev.virtualearth.net/REST/v1/Locations/locationQuery?includeNeighborhood=includeNeighborhood&maxResults=maxResults&include=queryParse&key=BingMapsKey »Pour le développement de notre module, nous avons choisi le service ‘Find location by query’qui est le plus adapté à notre besoin. Mais cette API présente un inconvénient : les résultatsretournés n’appartiennent pas toujours à la zone précisée avec le paramètre ‘boundbox’.3 OSMOpenStreetMap (OSM) est un projet international fondé en 2004 dans le but de créer unecarte libre du monde. Nous collectons des données dans le monde entier sur les routes, voiesferrées, les rivières, les forêts, les bâtiments et bien plus encore !Les données cartographiques collectées sont réutilisables sous licence libre ODbL (depuis le12 septembre 2012)3.OpenStreetMap propose deux API accessibles via des web services de type REST :- MapquestAPI : API limitée demandant un key, elle a deux services pour le géocodage avec lapossibilité de limiter la zone de recherche en précisant un ‘BoundBox’ qui est composé de quatreparamètres (latitude haut gauche, longitude haut gauche, latitude bas droite, longitude basdroite).
  19. 19. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 13 Geocoding Service : permet de prendre une adresse et obtenir la latitude et lalongitude associées. Ou d’utiliser la latitude et la longitude et obtenir ladresseassociée. Le géocodage et son inverse sont proposés.Après avoir testé ce service, on peut remarquer qu’il n’est pas assez fiable. Pour larequête suivante :« http://www.mapquestapi.com/geocoding/v1/address?key=Fmjtd%7Cluub21uynu%2Cbx%3Do5-96tl54&callback=renderOptions&inFormat=kvp&outFormat=json&location=rue&boundingBox=-61.58990639453707,16.28718927344446,-61.484573815269044,16.211457001692132 »Où on a précisé le ‘BoundBox’ à une zone connue d’avance, c’est la ville de Pointe àPitre. Voici les résultats retournés :Longitude :-75.6064, latittude:37.787201, adminArea4 : Accomack Search Service : fournit une interface simple pour obtenir des résultats de recherchegéographique. Le service peut être demandé à laide des paramètres de requête, JSONou XML et peut être retourné en JSON ou XML afin quil puisse facilement être analysépar les applications clientes. Cette méthode est utilisée pour l’affichage de la mapd’OSM avec la zone recherchée.La figure 2.1 montre exemple d’utilisation de ce serviceFigure 2.1 : OSM Search Service- OpenMapquestAPI : offrent une interface HTTP facile à la fonctionnalité de MapQuest. Cesservices permettent dutiliser les données OpenStreetMap pour gérer la plupart desfonctionnalités présentes dans les MapQuest Web Services Platform. Cette API propose aussideux services de géocodage :
  20. 20. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 14 Open Geocoding Service : demande un key et elle est accessible à partir des requêteshttp en précisant l’adresse et possibilité de limiter la zone de recherche avec un‘BoundBox’. NominatimSearch Service : aucun key n’est demandé, le service de rechercheNominatim est similaire à MapQuest service de recherche avec son interface simple etdes fonctionnalités puissantes, mais repose uniquement sur des données contribuées àOpenStreetMap.Après avoir testé tous les services proposés par OSM, nous avons choisi d’utiliser le serviceNominatimSearch pour les raisons suivantes :- Accès sans key.- Utilisable indépendamment du map d’Osm, c’est-à-dire sans charger la map.- Retourne des résultats fiables.4 L’auto-complétionLauto-complétion est un mot étrange qui pourrait être également appelé "aide à la saisie".En fait on lutilise régulièrement dans nos applications de tous les jours, que ce soit le client mail,navigateur Web ou même le moteur de recherche habituel4.La figure 2.2 nous montre l’auto-complétion de Google.Figure 2.2 : Auto complétion de Google
  21. 21. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 15Nous allons développer cette fonctionnalité pour aider l’utilisateur à choisir le lieu désiré aumoment où il fait la saisie de l’adresse dans un champ à fin de le géocoder.Parmi les fournisseurs étudiés, seulement Google offre ce service dans son API par lafonctionnalité ‘Places Autocomplete’.III Vues ImmersivesGoogle Street View (GSV) fournit des vues panoramiques à 360 degrés sur les routesdésignées dans toute sa zone de couverture. La figure 2.3 nous montre un exemple de vue. C’est unefenêtre qu’on peut intégrer dans un élément html (un div par exemple). Elle présente aussi desboutons permettant de gérer le niveau de zoom, d’avancer et de reculer dans la vue.Figure 2.3 : Google Steet ViewCe service est fourni par l’API Google Maps JavaScript v3[2]qui ne demande pas de clé (key)pour y accéder.IV Les Slippy Maps 2DLe terme Slippy Map ou carte glissante désigne les applications de cartographie 2D,fonctionnant dans le navigateur web du client, permettant dexplorer de façon dynamique la cartesimplement en saisissant et en faisant glisser limage de carte dans nimporte quelle direction. Lesnavigateurs modernes permettent le chargement dynamique de tuiles[3]de carte en réponse àlaction de lutilisateur sans la nécessité d’un rechargement de la page. Cet effet dynamique permetleur visualisation cartographique plus intuitive5.La carte glissante est en fait un composant Ajax - JavaScript sexécute dans le navigateur, quidemande dynamique les tuiles du serveur en arrière-plan sans recharger toute la page HTML. Cecifournit une carte facile à utiliser.[2]https://developers.google.com/maps/documentation/javascript/streetview[3]Tuiles : une map 2d est segmentée en petits carreaux appelés tuiles
  22. 22. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 16Le rendu des tuiles est un processus gourmand en termes de des ressources. Cest la raisonpour laquelle le serveur ne rend pas les tuiles en temps réel, pour chaque utilisateur naviguant sur lacarte.Plusieurs Framework permettent d’intégrer les Slippy Maps en se connectant à des servicestels que Google Maps, OpenStreetMaps, Bing Maps. Pour le développement de notre module nousallons étudier les deux librairies OpenLayes et Leaflet.1 OpenLayersOpenLayers rend facile de mettre une carte dans nimporte quelle page web. Il peut afficherdes tuiles de carte et des marqueurs chargés à partir de nimporte quelle source. OpenLayers a étédéveloppé pour favoriser lutilisation de linformation géographique de toutes sortes. OpenLayers estentièrement gratuit, Open Source JavaScript, publié sous la licence 2-clause BSD (également connusous le nom de FreeBSD)6.OpenLayers offre plusieurs fonctionnalités telles que la gestion des claques où on peutintégrer plusieurs couches au même temps, la gestion des marqueurs où on peut dessiner desmarqueurs à partir des géométries[4]ou des images.Une Map créée avec OpenLayers est composé principalement de :- Layers ou couches : Chaque map OpenLayers possède une ou plusieurs couches. Les couchesaffichent les données géographiques que lutilisateur voit sur la carte.- Controls ou contrôles : En OpenLayers, les contrôles fournissent une façon pour lesutilisateurs dinteragir avec la map. Certains contrôles ont une représentation visuelle tandis quedautres sont invisibles pour lutilisateur. Lorsqu’on crée un map avec les options par défaut, ondispose de quelques contrôles par défaut visibles. Ces contrôles permettent aux utilisateurs denaviguer avec les mouvements de la souris (par exemple, faire glisser dans la poêle, double-cliquez pour zoomer) et les boutons de pan & zoom.- VectorLayers ou couches vectorielles : est généralement utilisé pour afficher les données surune map et permettre une interaction en temps réel avec les données. Fondamentalement, celasignifie que nous pouvons charger des données géo spatiales à partir d’un fichier, comme KML ouGeoJSON, et afficher le contenu sur une carte.[4]Géométrie : un ensemble des point constituant une forme (par exemple pour dessiner uncarré on a besoin de quatre point)
  23. 23. Chapitre 2Etude de l’existantRapport de projet de fin d’étude Page 17Figure 2.4 : Exemple d’utilisation de calque OpenLayersLa figure 2.4 montre un exemple d’utilisation des calques OpenLayers où les deux couchesGoogle Street et OpenStreetMap sont intégrées dans la même fenêtre.2 LeafletLeaflet est une bibliothèque JavaScript open-source moderne pour cartes interactivesmobile-friendly. Elle est développée par Vladimir Agafonkin avec une équipe de collaborateursdévoués. Pesant seulement 28 Ko de code JS, elle possède toutes les fonctionnalités pour lavisualisation de cartes en ligne.Leaflet est conçu avec simplicité, performance et facilité dutilisation à lesprit. Il fonctionnede manière efficace dans toutes les plateformes mobiles et bureaux, profitant de HTML5 et CSS3 surles navigateurs modernes tout en étant accessible sur les anciens. Elle peut être étendue avec denombreux plugins7.ConclusionCe chapitre a permis de présenter l’étude de l’existant et la solution proposée. Le chapitresuivant présentera l’analyse et la conception, une étape primordiale dans l’élaboration et la créationdu projet.
  24. 24. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 18Chapitre 3Analyse et conceptionAu Sommaire de ce ChapitreIntroductionMéthodologieItération 1 : GéocodageItération 2 : Google Street ViewItération 3 : Slippy Maps 2DConclusion
  25. 25. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 19IntroductionDans cette partie, nous allons définir notre méthodologie de travail par un processus dedéveloppement. Ensuite nous allons présenter l’analyse et la conception de notre projet paritération.I Méthodologie :Le Processus de développement logiciel est un ensemble structuré d’activités nécessairespour développer un logiciel. C’est une représentation abstraite d’un processus. Dans chacun desmodèles, les étapes sont globalement divisées en quatre phases, à savoir la phase de planification,mise en œuvre, tester et documenter la scène et à la fin de la phase de déploiement et demaintenance. Peu importe le modèle choisi pour le développement logiciel, le logiciel à la fin doitpasser par ces étapes. Lordre dans lequel le logiciel passe par le modèle peut varier. Chacun desmodèles qui peuvent être utilisés dans le cycle de vie du développement logiciel, a ses avantages etses inconvénients8.1 Cycle de vieLe modèle en spirale est définit par Barry Boehm dans son article «Un modèle en spirale dedéveloppement de logiciels et damélioration» en 1986. Bien que ce modèle ne vient pas aveclapproche itérative dans le développement logiciel, il a été le premier modèle, ce qui expliquelimportance de litération dans le développement de logiciels. Le modèle de cycle de vie en spiralecombine les éléments tant dans leur conception, ainsi que des prototypes dans les stades. Pour cetteraison il peut bénéficier des avantages des deux hauts vers le bas, ainsi qu’approche bottom-up aussi.Nous avons divisé notre projet en quatre modules indépendants. Chacun d’entre euxprésente une itération. Pour cela nous avons choisi de suivre le cycle de vie en spirale. La figure 3.1illustre les étapes du développement où chaque module passe indépendamment par les quatreétapes : analyse, conception, réalisation et test.
  26. 26. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 20Figure 3.1 : Modèle en spiraleChaque itération va contenir l’analyse et la conception du module associé, ensuite nousallons terminer par la réalisation et test dans le chapitre suivant.2 Identification des acteursNotre projet est la réalisation des librairies réutilisables. Le développeur l’utilise pour ajouterdes services à une application intégrant une scène du plugin Spaceyes. Par la suite l’utilisateur accèdeà cette application et exploite ces services.Donc notre projet a deux acteurs :- Le développeur : c’est l’acteur direct des librairies.- L’utilisateur : c’est l’acteur indirect des librairies en utilisant l’application crée par ledéveloppeur.Pour présenter les acteurs, nous allons utiliser le diagramme de contexte illustré par la figure3.2. Un diagramme de contexte est un diagramme qui représente dune manière globale le systèmesans le détailler. Il permet de délimiter le périmètre du système étudié9.
  27. 27. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 21Figure 3.2 : diagramme de contexteDescription :Le développeur réutilise nos librairies afin de créer une nouvelle application qui inclut leplugin Spaceyes. L’utilisateur accède à la page « index.html » pour utiliser ce nouveau système.
  28. 28. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 22II Itération 1 (Géocodage)Introduction :Dans cette première itération, nous allons entamer les trois étapes de cycle de vie du modulede géocodage. Commençant par l’analyse.1 Analyse et spécificationDans cette section, nous allons définir les besoins fonctionnels, non fonctionnels et semiformel des besoins.1.1 Besoin fonctionnelsDaprès la norme AFNOR NF X 50-151, lanalyse fonctionnelle est une démarche qui consisteà rechercher, ordonner, caractériser, hiérarchiser et / ou valoriser les fonctions du produit attendupar lutilisateur.Pour le développeur :Le développeur doit avoir accès aux fonctionnalités suivantes :- Ajouter le service de géocodage Google, OSM et/ou Bing, en spécifiant un ensemble desoptions tel que le style du marqueur à dessiner, et la fonction à exécuter si l’utilisateur clique surun résultat.- Ajouter le service de géocodage inverse Google, OSM et/ou Bing.- Ajouter le service de l’auto-complétion aux champs de saisie.Pour l’utilisateur :L’utilisateur de l’application doit pouvoir :- Géocoder une adresse.- Géocoder l’inverse d’un point en cliquant sur la map 3d.- Zoomer sur un des résultats obtenus.1.2 Besoins non fonctionnelsLes spécifications non-fonctionnelles sont celles qui nexpriment pas une fonction du logiciel.Ces spécifications, qui expriment des contraintes, sont essentiellement de deux types:- Les contraintes dinterface. L’application doit tourner sur tous les navigateurs web (InternetExplorer, Mozilla Firefox, Chrome et Safari).
  29. 29. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 23- Les contraintes de performance. L’application doit tourner sur des machines de moyennesperformances.1.3 Spécification des besoins fonctionnelsNous avons choisi de concevoir notre librairie à l’aide du langage UML (Unified ModelingLanguage) grâce à ses nombreux points forts, car UML est un langage universel pouvant servir desupport pour tout autre langage et que c’est un moyen simple pour définir la structure d’unprogramme.Diagramme de cas d’utilisationLes diagrammes de cas dutilisation sont des diagrammes UML utilisés pour donner unevision globale du comportement fonctionnel dun système. Un cas dutilisation représente une unitédiscrète dinteraction entre un utilisateur (humain ou machine) et un système.
  30. 30. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 24Figure 3.3 : Diagramme de cas d’utilisation général pour le développeur–géocodage
  31. 31. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 25Description :La figure 3.3 montre un diagramme de cas d’utilisation général pour le premier acteur« développeur ». Le développeur peut ajouter les fonctionnalités du géocodage et auto-complétion àun champ de texte. Il peut notamment utiliser le géocodage directement sans utiliser un champ detexte.2 ConceptionParmi tous les facteurs qui concourent à la qualité d’un logiciel, nous avons introduit lanotion de réutilisabilité comme étant l’aptitude d’un logiciel à être réutilisé, en tout ou en partie,dans de nouvelles applications. Or, la notion de classe, à part sa faible granularité et ses connexionsfigées (les associations avec les autres classes matérialisent des liens structurels), ne constitue pasune réponse adaptée à la problématique de la réutilisation.Pour faire face à ce problème, les notions de patrons et de canevas d’applications ont percédans les années 1990 pour ensuite laisser la place à un concept plus générique et fédérateur : celuide composant. La programmation par composants constitue une évolution technologique soutenuepar de nombreuses plateformes. Ce type de programmation met l’accent sur la réutilisation ducomposant et l’indépendance de son évolution vis-à-vis des applications qui l’utilisent10.La programmation orientée composant s’intègre très bien dans le contexte de laprogrammation orientée objet puisqu’il ne s’agit, finalement, que d’un facteur d’échelle. En effet,l’utilisation de composants est assimilable à une approche objet, non pas au niveau du code, mais auniveau de l’architecture générale du logiciel.Pour cela nous allons présenter le diagramme de composant.2.1 Diagramme de classeDans cette section, nous allons présenter le résultat de l’étude que nous avons fait. Nousallons décrire la conception du module de géocodage sous forme de diagramme de classe desdiagrammes de séquences pour illustrer le fonctionnement et la communication entre les différentesclasses.
  32. 32. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 26Figure 3.4 : Diagramme de classe du module de géocodageComme montre la figure 3.4, les classes Google, Bing et OSM héritent de la classe mère Base.Cette dernière est une classe abstraite qui définit le fonctionnement du module. « PluginParam » estune classe singleton, elle ne sera instanciée qu’une seule fois au moment de l’exécution. La première
  33. 33. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 27classe parmi Google, Bing et Osm qui va être utilisée crée cette instance et les autres la récupèrentpar la suite. Cette classe contient des paramètres calculés suivant le map chargé par le pluginSpaceyes3d. Ces paramètres sont principalement :- Un tableau pour sauvegarder les combinaisons de touches pour faire le géocodageinverse.Exemple : aKeyEvent [0] = {‘Google’,’w’} signifie que si on clique sur la map 3d et la touche‘w’ est appuyée, on lance une requête de géocodage inverse sur ce point.- BoundBox1 : c’est un objet contenant les deux points sud-ouest et nord-est du map chargé.- BoundBox2 : c’est un objet contenant les deux points nord -ouest et sud –est.Ces points sont calculés à partir du map 3d chargé. Les étapes suivies pour les extraire sont : Récupérer les coordonnées des points Haut-Gauche, Bas-Gauche, Haut-Droit et Bas-Droit. Projeter ces points en projection cartographiques. Calculer les coordonnées (Min Longitude, Max longitude, Min Latitude, Max Latitude)de rectangle englobant (en vert sur la figure 3.5)Figure 3.5 Etapes d’extractions des points limites
  34. 34. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 282.2 Diagrammes de séquenceFigure 3.6 : Diagramme de séquence géocodage détaillé 1La figure 3.6 montre le fonctionnement du système une fois l’une des classe Google, Bing ouOsm est instanciée.Figure 3.7 : Design pattern singletonLa figure 3.7 présente la solution du design pattern singleton, ce pattern restreindrelinstanciation dune classe à un seul objet.Comme on a choisi d’utiliser LAPI Google MapsJavaScript V3, l’interrogation de service dugéocodage serait via ces classes de l’API, contrairement pour Bing et OSM où on va utiliser desrequêtes Ajax pour récupérer les données. La figure 3.8 montre le fonctionnement de la classe‘Sp3dGeoCodingService.Google’ lorsqu’un utilisateur ou une autre classe appelle cette méthode.
  35. 35. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 29Figure 3.8 : Diagramme de séquence de géocodage GooglePour Bing et OSM, la méthode du géocodage fait appel à‘Sp3dGeoCodingService.CommonClass’, car toutes les deux utilisent le web service REST. La figure 3.9illustre ce fonctionnement.Figure 3.9: Diagramme de séquence de géocodage Bing/OSMPour l’auto-complétion, puisque LAPI Google Maps fournit ce service on va l’utiliserdirectement. Pour Bing et OSM ce service n’est pas encore disponible, donc on a choisi d’utiliser lafonctionnalité du géocodage au moment de l’auto-complétion.
  36. 36. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 30La figure 3.10 du diagramme de séquence montre ce fonctionnement.Figure 3.10 : Diagramme de séquence auto-complétion Bing/OSM2.3 Diagramme de composantFigure 3.11 : diagramme de composant Géocodage
  37. 37. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 31Description :Le diagramme de composant illustré dans la figure 3.11 représente l’organisation et lesdépendances liant les éléments physiques logiciels du module de géocodage. L’utilisateur demandela page « index.html » qui instancie le plugin web déjà installé chez le client pour communiquer avecle serveur spaceyes3d. Les services de géocodage et géocodage inverse sont offerts par les classesqui seront développées dans le fichier « sp3dGeoCod.js » dessiné en orange.
  38. 38. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 32III Itération 2 (Google Street View)1 Analyse et spécification1.1 Besoins fonctionnelsLa bibliothèque doit fournir un composant qui permet au développeur d’ajouter le serviceGoogle Street View (GSV) en spécifiant un certain nombre de paramètres pour permettre àl’utilisateur de :- Naviguer sur le panorama du streetview et le système synchronise la position et l’orientationdu marqueur sur la scène 3d du map chargé.- Chercher des panoramas en déplaçant le marqueur sur la scène.- Naviguer sur la scène 3d.1.2 Besoins non fonctionnelsLes contraintes d’interface : l’application doit tourner sur tous les navigateurs web et sa tailledoit être conforme à la taille de l’élément qui va la contenir.Les contraintes de performances :- Chargement et synchronisation rapide des diaporamas avec la scène.- Réduction maximal du nombre de requête vers le serveur Google.1.3 Spécification des besoins fonctionnelsDiagramme de cas d’utilisationLa figure 3.12 montre le diagramme de cas d’utilisation pour le premier acteur du moduleGSV et qui est le développeur.Figure 3.12 : Diagramme de cas d’utilisation pour le développeur – GSVDescription :Le développeur peut ajouter la fonctionnalité du GSV à une application intégrant le moduleSpaceyes. Pour cela il doit spécifier quelques paramètres tels que l’élément html qui va la contenir, lacouleur et la taille de la flèche.
  39. 39. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 332 Conception2.1 Diagramme de classeLa figure 3.13 illustre le diagramme de classe du module GSV.Figure 3.13 : Diagramme de classe GSVDescription :La classe « Sp3dGoogleSV » est la classe principale, elle implémente les méthodes qui gèrentla fenêtre du diaporama du GSV. Cette dernière instancie une image de la classe« Sp3dSceneManagement », cette dernière gère les dessins des différents marqueurs sur le map 3d.La classe « Sp3dSceneMnagement » utilise la classe « Sp3dWkt.PolygonRing » de l’SDK duplugin Spaceyes3d pour dessiner la forme de la flèche.
  40. 40. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 342.2 Diagramme de séquenceFigure 3.14 : Diagramme de séquence GSV 1
  41. 41. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 35Description :La figure 3.14 du diagramme de séquence illustre le fonctionnement du module GSV une foisla classe « Sp3dGooggeSV » est instanciée. Elle initialise les éléments html, et lance l’initialisation duservice qui va demander de la classe « Sp3dSceneManagement » les coordonnées (latitude,longitude) du point central du map 3d. Une fois retournée elle crée une instance de« google.maps.StreetViewService ». Cette dernière envoie une requête asynchrone au serveur deGoogle demandant un diaporama le plus proche du point central dans un cercle de rayon de 5000mètre. Après le traitement de la requête, les résultats sont retournés à une fonction de la classe« Sp3dGooggeSV ». S’il existe un diaporama (Résultat = ok), cette fonction prépare le diaporamatrouvée et calcule ses coordonnées. Si cette fonction est appelée pour la première fois, elle initialiseles marqueurs de la scène 3d et crée les écouteurs des événements de la souris sur le map 3d, si nonun message d’erreur est affiché.Pour mieux comprendre le comportement du système lorsqu’un utilisateur interagit avecl’application, nous présentons les diagrammes de séquence relative aux scénarios d’utilisation.
  42. 42. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 36Figure 3.15 : Diagramme de séquence GSV 2
  43. 43. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 37Description :La figure 3.15 montre le fonctionnement dans le cas où l’utilisateur manipule la scène 3d. Cediagramme illustre quand est ce que les marqueurs et le diaporama sont mis à jour. Quandl’utilisateur clique au-dessus de la scène, l’application calcule les coordonnées de la souris et teste sielle est en collision avec le marqueur. Si oui et si l’utilisateur maintien le bouton de la souris cliqué :- Les marqueurs 1 « Bonhomme » suit la position de la souris- Le marqueur 2 « Cercle » reste à sa position.- Masquer le marqueur 3 « flèche ».- Afficher le marqueur 4 « Point » qui suit et indique la position du de la souris sur la scène(position après projection).Ensuite s’il fixe le marqueur pendant une seconde, l’application envoie une requête à Googlepour demander le nouvel diaporama correspondant à position actuelle du pointeur. Une fois laréponse est reçue et si elle contient un diaporama :- Mise à jour de la position du marqueur 2- Mise à jour du diaporama.- Mise à jour des marqueurs 1 et 4.Finalement, lorsque l’utilisateur lâche le clique :- Afficher le marqueur 2 « Cercle ».- Afficher le marqueur 3 « Flèche ».- Masquer le marqueur 4 « Point ».
  44. 44. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 38Figure 3.16 : Diagramme de séquence GSV 3Description :La figure 3.16 du diagramme de séquence montre le fonctionnement de l’application dans lecas où l’utilisateur manipule le diaporama. Il y’a deux types de manipulation :- Changement de diaporama : l’utilisateur avance ou recule dans le steetview avec les flèches.Dans ce cas une requête est envoyée à Google pour charger la vue suivante ou précédente, lediaporama et les marqueurs seront mis à jour.- Rotation de la vue : l’utilisateur manipule la vue caméra, dans ce cas l’orientation dumarqueur « Flèche » sera mise à jours.
  45. 45. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 392.3 Diagramme de composantFigure 3.17 : Diagramme de composant GSVDescriptionLe diagramme de composant du module GSV illustré dans la figure 3.17 représentel’organisation et les dépendances liant les éléments physiques logiciels du module.- La page « index.html » utilise la librairie « spaceyes » et communique avec le serveur« spaceyes3d » pour instancier le plugin web déjà installé chez le client.
  46. 46. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 40- Le composant « sp3dGoogleSV.js » que nous développons assure le service du Street View.Les classes de ce composant utilisent les librairies JavaScript « Spaceyes » et communique avec leserveur Google.- La page « index.html » intègre Le service de Street View exposé par le module« sp3dGoogleSV ».
  47. 47. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 41IV Itération 3 (Slippy Maps)1 Analyse et spécification1.1 Besoins fonctionnelsPour le développeur :Le développeur peut ajouter le service SlippyMaps dans une application utilisant le pluginspaceyes3d soit en utilisant l’implémentation OpenLayers soit Leaflet. Et pour les deux cas, ledéveloppeur doit pouvoir :- Ajouter une couche du map Google, Osm ou Bing (il peut également ajouter les trois aumême temps).- Spécifier un certain nombre d’options tel que : La restriction de manipulation sur zone de la scène 3d. Le style des marqueursPour l’utilisateur :L’utilisateur de l’application exploitant le plugin Spaceys doit pouvoir :- Naviguer sur la scène 3d et le système synchronise la map 2d avec la vue 3d.- Manipuler la map 2d et le système synchronise la scène 3d suivant ces manipulations.- Commuter entre les couches des map chargées (Google, Osm, Bing).- Activer/Désactiver les calques des marqueurs.- Glisser le marqueur sur la map 2d, et le système synchronise la position du marqueurcorrespondant sur la scène 3d, et inversement.1.2 Besoin non fonctionnelsLes contraintes d’interface : l’application doit tourner sur tous les navigateurs web et sa tailledoit être conforme à la taille de l’élément qui va la contenir.Les contraintes de performances :- Synchronisation rapide entre les deux vue 2d/3d.1.3 Spécification des besoins fonctionnelsDiagramme de cas d’utilisationLa figure 3.18 montre le diagramme de cas d’utilisation pour le premier acteur du moduleSlippyMaps et qui est le développeur.
  48. 48. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 42Figure 3.18 : Diagramme de cas d’utilisation SlippyMaps - développeurDescription :Le développeur peut utiliser les fonctionnalités du OpenLayers ou Leafet pour ajouter lesmaps du Google, Osm et/ou Bing dans un élément html dans la même application intégrant le pluginSpaceyes. Pour cela il doit spécifier les options.2 ConceptionPour ce module, on va développer deux solutions pour offrir le service de Slippy Maps, lapremière se base sur la librairie OpenLayers, et la deuxième se base sur la librairie Leaflet.2.1 Diagramme de classeLa figure 3.19 montre le diagramme de classe du module SlippyMaps pour la solutionimplémentée avec OpenLayers.
  49. 49. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 43Figure 3.19 : Diagramme de classe SlippyMaps – OpenLayersDescription :
  50. 50. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 44Les deux classes illustrées en orange, sont communes aux deux solutions OpenLayers etLeaflet.« sp3dOpenLayersService.OpenLayersManagement » : gère la map 2d et offre des méthodesde synchronisation de cette map.« sp3dSlippyMaps.SceneManagement » gère la scène 3d chargé via un fichier d’extension« .spv », cette classe offre des méthodes de synchronisation et manipulation de la scène.« sp3dSlippyMaps.GlobalManagement » : est une classe singleton qui initialise les élémentshtlm et communiquent avec les deux classes précédentes pour synchroniser les deux vue 2d et 3d.« sp3dOpenLayersService.Base » est la classe mère de trois classes filles« sp3dOpenLayersService.Google », « sp3dOpenLayersService.Bing » et« sp3dOpenLayersService.Osm ». Elle permet d’ajouter des calques de carte.Cette structure sera utilisée pour l’implémentation avec Leaflet avec la conservation desdeux classes du package « sp3dSlipyMaps » (dessinées en orange sur la figure 32), et le réimplémentation des classes du package « sp3dOpenLayersService» qui sera nommé«sp3dLeafletService ».2.2 Diagramme de séquence
  51. 51. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 45Figure 3.20 : Diagramme de séquence SlippyMaps – OpenLayers
  52. 52. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 46Description :La figure 3.20 du diagramme de séquence illustre le fonctionnement du module Slippy Mapsimplémenté en se basant sur OpenLayers lorsque le développeur instancie une des classes «sp3dOpenLayersService.Google », « sp3dOpenLayersService.Osm » et « sp3dOpenLayersService.Bing». Ces classes utilisent la même instance de « sp3dSlippyMaps.GlobalManagement » qui crée uneinstance de :- « sp3dSlippyMaps.SceneManagement » : cette classe calcule le cadre englobant de la scèneet crée le marqueur central du map 3d.- « sp3dOpenLayersService.OpenLayersManagement » : cette classe initialise la map 2d et créele marqueur central dessus.Après la création de ces deux classes, « GlobalManagement » initialise les élèments html, etla fonction « createInstance » retourne la classe singleton « sp3dSlippyMaps.GlobalManagement ».Finalement, la classe instanciée par le développeur crée le calque.Après avoir illustré le comportement du système lors de création du service, nous allonsprésenter les diagrammes de séquence illustrant l’interaction de l’utilisateur avec le système.Figure 3.21 : Diagramme de séquence SlippyMaps – utilisateur 1
  53. 53. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 47Description :La figure 3.21 du diagramme de séquence montre l’interaction de l’utilisateur avec la scène3d. Quand il manipule la scène, le système recalcule le Viewport[5]et met à jours la map 2d, cettedernière envoie une requête au fournisseur du service (Google, Bing ou Osm) demandant lesnouvelles données. Une fois le serveur renvoie le données, la map 2d sera mis à jours pour qu’ellesoit synchronisée avec la scène 3d.La figure 3.22 du diagramme de séquence SlippyMaps montre le fonctionnement du systèmequand l’utilisateur manipule le marqueur 3d de la scène.Figure 3.22 : Diagramme de séquence SlippyMaps – Utilisateur 2Description :Quand l’utilisateur manipule le marqueur, le système calcule la position au fur et à mesuredu déplacement du marqueur, mis à jour sa position et la position du marqueur de la map 2d.Le déplacement du marqueur 3d est réalisé de la même que le deuxième module.2.3 Diagramme de composant[5]Un Viewport est une zone de visualisation rectangulaire projette ce que voit la caméra
  54. 54. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 48Figure 3.23 : Diagramme de composant – SlippyMaps
  55. 55. Chapitre 3Analyse et conceptionRapport de projet de fin d’étude Page 49Description :Le diagramme de composant illustré dans la figure 3.23 du module Slippy Maps illustré par lafigure 36 montre l’organisation et les dépendances liant les éléments physiques logiciels du module.Le fonctionnement de celui-ci est similaire aux deux premiers modules ou l’utilisateur accède à lapage « index.html » qui instancie le plugin spaceyes et contient offre le service. Les composants àdévelopper dans ce module sont celle dessinés en orange.Si le développeur veut utiliser le service SlippyMaps en se basant sur OpenLayers, il éliminele composant « sp3dLeafletService ». S’il veut utiliser le service en se basant sur Leaflet, il élimine lecomposant « sp3dOpenLayersService ».ConclusionDans ce chapitre on a présenté dans un premier lieu la méthodologie de notre travail, ainsique l’analyse et la conception détaillée de chaque module notre bibliothèque.
  56. 56. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 50Chapitre 4Réalisation et testAu Sommaire de ce ChapitreIntroductionEnvironnement de développementAperçu sur le travail réaliséConclusion
  57. 57. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 51IntroductionCette section est consacrée à la présentation de l’environnement matériel et logiciel utilisépour le développement de la solution, nous allons expliquer éventuellement nos choix techniquesdes langages de programmation et des outils utilisés. Nous donnerons ensuite une description desrésultats aboutis approuvés par quelques captures d’écrans.I Environnement de développementDans cette partie on va présenter l’environnement de développement utilisé pour les troismodules de notre projet.1 Choix technique Langage :JavaScriptLorsqu’il est apparu en 1995, son objectif principal était de gérer une partie de la validationdes entrées qui avaient été laissés au serveur - langues secondaires tels que Perl. Avant cette date,un aller - retour au serveur été nécessaire pour déterminer si un champ obligatoire est laissé vide ouune valeur entrée est invalide11.C’est un langage de programmation de scripts principalement utilisé dans les pages webinteractives mais aussi côté serveur (NodeJs par exemple). Cest un langage orienté objet àprototype, cest-à-dire que les bases du langage et ses principales interfaces sont fournies par desobjets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurspermettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet dencréer des objets héritiers personnalisés. Framework:Prototype JavaScript Framework : Supporte la programmationorientée objet, ce Framework est créée par Sam Stephenson enFévrier 2005 dans le cadre de la Fondation pour lAjax en Ruby onRails. Il est implémenté comme un seul fichier de code JavaScript,« prototype.js » généralement nommés. Prototype est utilisé par5,1% de tous les sites12.jQuery : est une bibliothèque JavaScript rapide, petit et riche enfonctionnalités. Cela rend les choses comme document HTMLtraversée et la manipulation, la gestion des événements, lanimationet Ajax beaucoup plus simple avec une API facile à utiliser quifonctionne sur une multitude de navigateurs.Il est utilisé par 91.6 %de tous les sites, ce qui en fait lune des bibliothèques les pluspopulaires JavaScript.
  58. 58. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 52Spaceyes3d SDK : permet de développer une application tierce baséesur le SpacEyes3D Component Plugin.SpacEyes3D Plugin est uncomposant basé sur la technologie SpacEyes3D Viewer, et permetdinclure la technologie SpacEyes3D Viewer dans une application debureau ou dans une application Web.2 Environnement matérielPour la réalisation de notre projet, nous avons utilisé un ordinateur de bureau Dual-CoreCPU.3 Environnement logicielCe projet a été réalisé sous Windows 7 en utilisant les outils suivants :- JetbrainsWebStorm qui est un IDE commercial pour JavaScript, CSS et HTML construit surJetBrains IntelliJ IDEA platform. Il propose lachèvement automatique de code et l’analyse à lavolée code.- Firebug pour déboguer le code JavaScript.- Visual Paradigm For UML 10.0II Aperçu sur le travail réaliséUne fois la phase de conception est terminée, nous avons procédé à la réalisation de noslibrairies. Le long de la phase de développement nous avons réalisé des tests unitaires pour vérifier lebon fonctionnement des bibliothèques.Dans une deuxième étape nous avons voulu valider nos bibliothèques dans des conditionsréelles d’utilisation. Nous avons procéder à la réalisation de trois applications qui valident les troismodules développés.
  59. 59. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 53function createViewer() {oViewer = new Sp3dViewer("container", "Sp3dPlugin", 1000, 600);if (oViewer.loaded()) {oViewer.addEventHandler(SceneProjectCreatedEvent,onProjectLoaded);oViewer.plugin().SceneLoadProject("http://www.spaceyes3d.com/plugin/demos/projects/pointapitre.spv");}elsealert("Viewer creation failed !");}function onProjectLoaded(iErrorCode) {// Lintegration des modules ici}Code 1 : Aperçu de code généraleLe Code 1 est le code JavaScript que le développeur met dans la page « index.html » pourintégrer les modules souhaités avec le plugin Spaceyes.La fonction « createViewer » est appelée lorsque la page html est chargée, elle crée uneinstance du plugin et charge la scène à partir d’un fichier d’extension « .spv », une fois la scènechargée, elle fait appel à la fonction « onProjectLoaded » où le développeur intervient et intègre lesmodules voulus.1 Module géocodage1.1 Diagramme de cas d’utilisation
  60. 60. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 54La figure 4.1 illustre le diagramme de cas d’utilisation pour le deuxième acteur « utilisateur »Figure 4.1 : Diagramme de cas d’utilisation général pour l’utilisateur– géocodageDescription :L’utilisateur peut utiliser le géocodage du Google, Bing et Osm. Il peut aussi géocoderinversement un point (longitude, latitude) en cliquant sur la map 3dchargé par le plugin.1.2 Diagramme de séquenceLes diagrammes de séquences permettent de représenter les interactions entre les objetsselon un point de vue temporel. En général une séquence porte sur un type spécifique d’action dontla description devrait être renforcée.Dans la figure 4.2 nous allons représenter le diagramme de séquence correspondant auxactions de l’internaute.
  61. 61. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 55Figure 4.2 : Diagramme de séquence pour l’utilisateur – géocodageDescriptionLorsque l’utilisateur commence la saisie de l’adresse dans le champ de texte, le systèmeprépare la requête et invoque un web service (requête asynchrone) pour auto compléter l’adressedésirée. Une fois renvoyés, le système affiche les suggestions. L’utilisateur valide son choix encliquant sur une des adresses affichées, le système prépare et envoie la requête au fournisseur. Lefournisseur traite alors la demande et envoie au système une ou plusieurs résultats. Finalement, lesystème filtre ces résultats et les affiche à l’utilisateur pour lui permettre de choisir une et zoomersur la map 3d.1.3 Exemple de code et capture d’écranLe code 2 représente un exemple d’intégration du ce module, où on va utiliser Google.
  62. 62. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 56function onProjectLoaded(iErrorCode) {var geoGoogle = new Sp3dGeoCodingService.Google(GeoContainer, oViewer);var oGeocodeOption = {ActivateBoundsLimit:true,callbackFunction:onGeocodingComplete};var oAutoCompleteOptionGoogle = {inputName:"inputgoogle",onClickSuggestion:{tFunction:geocode,geocodingOption:oGeocodeOption},minLength:2};geoGoogle.gcdAutoComplete(oAutoCompleteOptionGoogle);geoGoogle.gcdAddMouseEvent(x,reverseGeoComplete);function onGeocodingComplete(aResults,sProviderService,oCaller) {}function reverseGeoComplete(sAddresss,sProviderService,oCaller){alert(sAddresss);}}Code 2 : Exemple d’intégration du module de géocodage – GoogleDans la fonction « onProjectLoaded », le développeur instancie la classe qui offre le servicede géocodage Google, appelle les deux méthodes de géocodage et son inverse en passant desparamètres tel que le nom de la fonction à appeler une fois le géocodage est terminé.Figure 4.3 : Géocodage GoogleLa figure 4.3 montre un exemple où l’utilisateur géocode une adresse en utilisant Google.Dès qu’il commence à saisir dans le champ, les suggestions sont affichées.
  63. 63. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 57Figure 4.4 : Affichage du marqueurLa figure 4.4 montre l’affichage du marqueur sur la scène 3d une fois l’utilisateur clique surune adresse.2 Module Google Street View2.1 Diagramme de cas d’utilisationLa figure 4.5 illustre le diagramme de cas d’utilisation pour le deuxième acteur « utilisateur »Figure 4.5 : diagramme de cas d’utilisation général pour l’utilisateur - GSV
  64. 64. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 58Description :L’utilisateur peut naviguer le diaporama du Google (avancer, reculer et tourner) et déplacerle marqueur sur la scène 3d. Ces actions invoquent des méthodes de synchronisation entre la scèneet le diaporama du GSV.2.2 Diagramme de séquenceDans la figure 4.6 nous allons représenter le diagramme de séquence correspondant auxactions de l’internaute pour le cas d’utilisation naviguer sur le diaporama.Figure 4.6 : Diagramme de séquence GSV – Utilisateur2.3 Exemple de code et capture d’écranLe code 3 représente un exemple d’intégration du module GSV.function onProjectLoaded( iErrorCode ) {var oOptions = {arrowforegroundColor : #00FF00, // default to green arrowarrowOutlineColor : #FFFFFF, // default to white outlineArrowarrowSize : 100 // defaults to 100 m long arrow} ;var gsvModule = new Sp3dGoogleSV(GsvContainer,oViewer,oOptions);}Code 3 : Exemple d’intégration du module GSV
  65. 65. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 59Dans la fonction « onProjectLoaded », le développeur instancie la classe « Sp3dGoogleSV » etlui passe un objet contenant les options requises.Figure 4.7 : Google Street ViewLa figure 4.7 montre l’exemple d’intégration du module GSV avec le plugin Spaceyes. Lors sulancement l’application cherche le point le plus proche du centre contenant un diaporama et l’affichedans l’élément html dédié.
  66. 66. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 60Figure 4.8 : GSV – Affichage du marqueurLa figure 4.8 montre l’affichage du marqueur 3d sur la scène qui est composé de troismarqueurs :- Bonhomme (en orange) : c’est une image qui s’affiche toujours au-dessus à la position dudiaporama.- Le cercle rouge avec : ce cercle est collé à la surface du map, il prend toujours la dernièreposition trouvée- La flèche (en vert) : collée aussi sur la surface et change de direction suivant la direction de lavue sur le diaporama. Cette flèche est dessinée à partir de huit points.La figure 4.9 montre comment les points constituant la flèche.Figure 4.9 : Marqueur flèche
  67. 67. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 613 Module SlippyMaps3.1 Diagramme de cas d’utilisationFigure 4.10 : Diagramme de cas d’utilisation SlippyMaps– utilisateurDescription :La figure 4.10 illustre le diagramme de cas d’utilisation pour le deuxième acteur« utilisateur ». Ce diagramme de cas d’utilisation est valable pour l’utilisation d’OpenLayers ainsi quepour Leafet. L’utilisateur peut manipuler la map2d ou la scène 3d et le système synchronise les vues.Aussi il peut déplacer le marqueur sur la map 2d et le système mis à jour la position du marqueur surl scène 3d et inversement. Finalement l’utilisateur peut commuter enre les couches des maps etactiver/désactiver des couches vecteurs.
  68. 68. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 623.2 Diagramme de séquenceLa figure 4.11 illustre le diagramme de séquence pour le cas d’utilisation « Manipuler la map2d ». Lorsque l’utilisateur manipule le map 2d (Google, Osm ou Bing), le système envoie une requêteasynchrone au fournisseur de service pour récupérer les nouvelles données. Une fois la réponsereçue, le système mis à jours le map 2d, et la scène 3d.Figure 4.11 : Diagramme de séquence SlippyMaps 13.3 Diagramme de séquenceLe code 4 représente un exemple d’intégration du module SlippyMaps en utilisant la librairieOpenLayers.function onProjectLoaded(iErrorCode) {var oUserOptions = {container : OpenLayersContainer}var oOlyGoogle = new sp3dOpenLayersService.Google(oViewer,oUserOptions);oOlyGoogle.addMapService();var oOlyBing = new sp3dOpenLayersService.Bing(oViewer, oUserOptions);oOlyBing.addMapService();var oOlyOsm = new sp3dOpenLayersService.Osm(oViewer, oUserOptions);oOlyOsm.addMapService();}Code 4 : Exemple d’intégration du module SlippyMap–OpenLayersDans la fonction « onProjectLoaded », le développeur instancie les classes de service voulu(Google, Bing, Osm), et appelle la fonction « addMapService ».
  69. 69. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 63Figure 4.12 : SlippyMaps - OpenLayersLa figure 4.12 montre un exemple d’intégration du module SlippyMaps en utilisantOpenLayers. La fenêtre bleue permet de commuter entres les couches map Google, Osm et Bing, etpermet aussi d’activer/désactiver les marqueurs dessinés sur la vue 2d.ConclusionAu cours de ce chapitre, nous avons décrit les plates-formes matérielles et logicielles surlesquelles nous avons construit nos librairies. Nous avons, ensuite, présenté trois applications de testpour chaque module de la bibliothèque.
  70. 70. Chapitre 4Réalisation et testRapport de projet de fin d’étude Page 64Conclusion généraleRappelons que l’objectif de ce travail était enrichir le SDK du plugin Spaceyes. Pour cela, nousavons réalisé une librairie réutilisable permettant d’intégrer plusieurs services dans la même fenêtreque le plugin Spaceyes3D.Notre travail A débuté par la compréhension du contexte du projet, à savoir Spaceyes, sesconcepts et ses activités. Ensuite, nous avons réalisé une étude de l’existant concernant les servicesde webmapping existants ce qui nous a permis de fixer les anomalies à éviter et les objectifs àréaliser pour avoir un système satisfaisant. Puis, nous sommes passé à l’étude conceptuelle de notreapplication selon une approche orientée objet tout en se basant sur le modèle UML. Par la suite,nous avons effectué le codage et l’implémentation de l’application. Enfin nous avons effectué lestests nécessaires à la validation de notre application.Ce projet a été très avantageux pour moi car il m’a permis de renforcer et enrichir mesconnaissances théoriques dans le domaine de la conception, et de mettre en application mesconnaissances acquises le long de me études. Il m’a encore donné l’occasion de maîtriser le langagede programmation JavaScript et ses techniques de codage, les web services et surtout la géomatique.En plus, ce projet était une bonne occasion pour réaliser un travail très concret, avec desobjectifs clairs et bien définis et de se familiariser avec l’environnement du travail et la vieprofessionnelle.En perspective, cette application peut être améliorée en ajoutant d’autres fonctionnalités(comme Google Direction). Et pour faciliter l’utilisation des librairies, nous pouvons générer unedocumentation automatique des classes et méthodes que le développeur va utiliser.
  71. 71. NethographieRapport de projet de fin d’étude Page 65Nethographie1http://cpierkot.wordpress.com/recherche/2https://developers.google.com/maps/documentation/geocoding/?hl=fr3http://openstreetmap.fr/4http://lgmorand.developpez.com/dotnet/autocompletion/5http://fantomplanet.wordpress.com/2005/06/23/definition-slippy-map/6http://openlayers.org/7http://javascript.developpez.com/actu/49445/Leaflet-afficher-des-cartes-interactives-optimisees-pour-les-mobiles-devient-chose-facile-grace-a-cette-bibliotheque-JavaScript/8http://promotionordinateur.blogspot.com/2012/11/modele-de-cycle-de-vie-en-spirale.html9http://www.memoireonline.com/01/13/6670/m_Mise-au-point-dun-systeme-de-gestion-des-panneaux-publicitaires5.html10http://laurent-audibert.developpez.com/Cours-UML/html/Cours-UML050.html11http://w3techs.com/technologies/overview/javascript_library/all12Professional JavaScript®for Web Developers2nd Edition (Nicholas C. Zakas)

×