Ce cours constitue la seconde partie d'un enseignement consacré aux bases théoriques et pratiques des systèmes d’information géographique. - Il propose une introduction aux systèmes d’information géographique qui ne requiert pas de connaissances préalables en informatique. - Il donne la possibilité d’acquérir rapidement les notions de base qui vous permettent de créer des bases de données spatiales et de fabriquer des cartes géographiques. - Il s’agit d’un cours pratique qui repose sur l’utilisation de logiciels libres, notamment QGIS. Lors de la première partie du cours, vous avez exploré les principes de base de la numérisation du territoire et du stockage des géodonnées. Vous avez notamment appris à : - Caractériser des objets et des phénomènes spatiaux (modélisation du territoire) du point de vue de leur positionnement dans l’espace (systèmes de coordonnées et projections, relations spatiales) et en fonction de leur nature intrinsèque (mode objet ou vecteur vs. mode image ou raster); - Utiliser diverses méthodes d’acquisition de données (mesure directe, géoréférencement d’images, digitalisation, source de données existantes, etc.); - Utiliser divers modes de stockage des géodonnées (fichiers simples et bases de données relationnelles); - Utiliser des outils de modélisation des données pour décrire et implémenter une base de données; - Créer des requêtes dans un langage d’interrogation et de manipulation des données. La seconde partie du cours porte sur les méthodes d'analyse spatiale et les techniques de représentation de l'information géoréférencée. Vous apprendrez notamment à: - Analyser les propriétés spatiales de variables discrètes, par exemple en quantifiant l’autocorrélation spatiale; - Travailler avec des variables continues (échantillonnage, interpolation et construction de courbes d’isovaleurs) - Utiliser les modèles numériques d'altitude et leurs dérivées (pente, orientation, etc.); - Utiliser des techniques de superposition des géodonnées; - Produire des documents cartographiques selon les règles de la sémiologie graphique; - Explorer d’autres formes de représentation spatiale (cartographie interactive sur internet, représentations 3D, et réalité augmentée). La page https://www.facebook.com/moocsig fournit un forum interactif pour les participants à ce cours.
Cartographie dynamique et interactive sur Internet
Loading...
From the course by École Polytechnique Fédérale de Lausanne
Systèmes d’Information Géographique - Partie 2
20 оценки
From the lesson
Autres formes de représentation
Cette dernière semaine est consacrée à des cas particuliers de la représentation de l'information géographique, soit à la cartographie dynamique et interactive sur Internet, à la représentation en 3 dimensions, et finalement à la réalité augmentée et à sa combinaison avec les systèmes d'information géographique.
Meet the Instructors
Marc Soutter
Laboratoire de Systèmes d'Information Géographique
Stéphane Joost
Laboratoire de systèmes d'information géographique
Fernand Koffi KouaméProfesseur
Centre Universitaire de Recherche et d'Application en Télédétection (CURAT) - Université Félix HOUPHOUET-BOIGNY d'Abidjan-Cocody (Côte d'Ivoire)
Amadou Sall
Département de Géomatique - Centre de Suivi Ecologique (CSE), Sénégal
[MUSIQUE]
[MUSIQUE]
[MUSIQUE] Me revoilà donc.
C'est avec grand plaisir que je vous retrouve pour cette leçon qui va
porter sur certains aspects de la relation entre cartographie et Internet.
Il s'agit d'un thème d'une grande actualité puisque,
de plus en plus souvent, les applications informatiques, et notamment les
applications dans le monde des systèmes d'information géographique, s'appuient
sur l'Internet pour proposer des solutions multiplateformes, donc utilisables
aussi bien sur des ordinateurs de bureau que des tablettes ou des smartphones,
et qui permettent d'utiliser différents types de système d'exploitation, que ce
soit dans le monde Windows, le monde MacOS, Linux, Android, et j'en passe.
L'objectif de cette leçon consiste donc à aborder de manière générale et
forcément un peu superficielle, le thème des relations entre systèmes d'information
géographique et Internet, puis d'approfondir un peu le
thème de l'intégration d'éléments de cartographie dynamique et interactive dans
des pages Web, ce que l'on désigne généralement par le terme de Web SIG.
Au terme de la leçon, vous devriez être en mesure de décrire les principes des
architectures client-serveur, et vous devriez être capables de
réaliser une page Web simple contenant un élément de carte.
Nous aborderons donc successivement le thème de l'architecture client-serveur,
en relation avec les systèmes d'information géographique, puis nous nous
concentrerons sur les éléments fondamentaux de la page Web, que sont le
langage HTML et le CSS, qui sont les prémices qui nous permettront d'aborder
ensuite le thème de la cartographie dans les pages Web, donc le thème du Web SIG,
et nous terminerons la leçon par un exemple d'application, donc de réalisation
d'une page Web qui contient un élément cartographique dynamique et interactif.
[MUSIQUE] Un serveur est donc un logiciel, ou une machine,
qui est capable d'écouter le réseau et qui est capable de recevoir
des requêtes émanant de différents clients et de répondre à ces requêtes.
Donc l'objectif d'un serveur est de permettre le partage de données ou
le partage de ressources matérielles ou logicielles entre plusieurs clients,
dans une architecture qualifiée d'architecture client-serveur.
Il existe un très grand nombre de types de serveur différents : des serveurs de
base de données, des serveurs simplement de fichiers, des serveurs de courriel,
des serveurs Web, des serveurs de jeux, etc., etc.
Les serveurs écoutent donc le traffic sur le réseau Internet afin d'identifier des
requêtes qui leur sont adressées, et le portail qui leur
permet d'écouter sur le réseau est ce qu'on appelle un port logiciel,
qui est en fait le point d'accès au système d'exploitation d'un ordinateur.
Les ports logiciels sont numérotés de 1 à 65 536, et sur une même machine,
en fait, on peut avoir plusieurs logiciels serveurs qui fonctionnent simultanément,
chacun écoutant ou travaillant avec un ou deux ports logiciels spécifiques,
souvent un port pour le traffic entrant et un second port pour le traffic sortant.
Comme exemple de numéros de port fréquemment utilisés,
on peut citer les ports 20/21, qui sont utilisés pour les protocoles de
transfert de fichier FTP, 20 pour le flux entrant 21 pour le flux sortant,
le port 80 pour la consultation de pages Web sur un serveur Web HTTP,
le port 443 dans le cas où ce serveur Web serait sécurisé avec le protocole HTTPS,
ou encore le port 5432 pour la connexion sur une base données PostgreSQL.
Les logiciels serveurs ne doivent pas nécessairement être hébergés sur une
machine distante mais peuvent être hébergés sur la machine locale,
en même temps que les logiciels clients,
ce qui est particulièrement utile si l'on fait du développement.
Il faut simplement que les conditions de fonctionnement soient les mêmes que
si les serveurs étaient sur une machine distante,
à savoir que la communication entre le client et le serveur passe par
les mêmes ports logiciels que si ces serveurs étaient sur une machine distante.
La machine locale, dans une adresse URL, est désignée par le terme de localhost,
qui désigne en fait l'interface logique de cette machine locale.
L'adresse localhost est également associée à une série d'adresses IP.
Dans le cas de IPv version 4,
l'adresse 127.0.0.1 qui est la plus fréquemment utilisée,
mais la série des adresses suivantes est également utilisable.
Finalement, dans une adresse URL, si l'on veut spécifier un port particulier,
on ajoute simplement deux points et le numéro de port pour viser ce port-là,
donc si on veut taper sur le port 3 000 d'une machine locale, l'URL serait du
type http://localhost:3000.
Une architecture client-serveur est donc en général constituée par un logiciel
serveur, qui donc écoute le traffic sur le réseau, qui est capable d'identifier
une requête qui lui est adressée et ensuite de renvoyer une réponse.
De l'autre côté, on a un logiciel client qui lui est capable de formuler des
requêtes, de les envoyer au serveur, et puis de récupérer la réponse du
serveur et de l'interpréter pour afficher l'information qui a été transmise.
Finalement, les échanges entre client et serveur sont souvent gérés par un logiciel
intermédiaire appelé intergiciel, ou encore middleware en anglais.
Dans le contexte particulier des systèmes d'information géographique,
le côté serveur est souvent simplement constitué d'un serveur de données.
Il arrive cependant fréquemment que l'on ait deux serveurs en série,
le premier étant destiné à gérer les requêtes et la fabrication des réponses,
alors que le second se limite à la fourniture de données.
Cette structure présente notamment des avantages du point de vue sécuritaire
puisque l'accès aux données n'est autorisé que pour le serveur intermédiaire,
qui lui peut gérer les droits d'accès des différents clients.
Du côté client, on aura une interface utilisateur composée
soit d'un logiciel SIG, QGIS, Manifold, Mapinfo, ArcGIS,
etc., soit d'un navigateur Web comprenant un composant cartographique,
association que l'on désigne généralement par l'expression Web SIG.
Et à nouveau, on retrouvera divers protocoles de communication entre
client et serveur.
Le plus répandu de ces logiciels qui gèrent les communications entre
client-serveur est le logiciel ODBC, pour Open Data Base Connectivity.
Il s'agit d'un logiciel développé au départ par Microsoft
pour le monde Windows, mais repris par la suite par d'autres éditeurs
pour les plateformes Unix/Linux et Java.
Les requêtes de manipulation de données sont formulées en langage SQL dans
le logiciel client,
puis transmises au serveur de données par l'intermédiaire de ODBC.
Le schéma de fonctionnement implique que les fabricants de logiciels de gestion de
base de données ont dû développer des pilotes ODBC spécifiques
pour chaque système de gestion de base données.
On voit ici dans le cas de QGIS que lorsque l'on ajoute, par exemple,
une couche vectorielle,
on a la possibilité d'aller rechercher cette couche dans une base de données,
et les types de connexion base de données qui sont proposés comprennent
différentes bases de données de différents fabricants, donc Oracle, MSSQL, Microsoft,
Postgres, MySQL, mais également le pilote générique ODBC qui permet
de se connecter à des bases de données en utilisant ce protocole particulier.
Deux autres exemples de middleware assez fréquemment rencontrés dans le monde
Windows : OLEDB, pour Object Linking and Embedding Database,
qui est en fait un successeur d'ODBC, basé sur les interfaces COM, et ADO.NET,
qui est le composant d'accès aux données du framework .NET de Microsoft.
Finalement, dans le cours consacré aux sources de géodonnées,
nous avions déjà parlé un petit peu du protocole HTTP, en particulier pour
interroger des géoservices, donc des serveurs VMS et VFS.
Dans le cas particulier du protocole HTTP, nous avons donc, du côté serveur, soit un
serveur HTTP, soit des géoservices de type Web Map Service ou Web Feature Service.
Côté client, un navigateur Web avec un composant SIG ou,
plus occasionnellement, le logiciel SIG, qui va généralement pas
utiliser un serveur HTTP mais qui peut aller rechercher des tuiles dans des
géoservices comme on l'a vu lors du cours sur les sources de géodonnées.
La communication dans le sens client-serveur s'appuie donc sur le
protocole HTTP, qui peut éventuellement comporter des paramètres,
comme on l'avait vu pour définir les éléments que le serveur doit retourner.
Et dans le sens client on va trouver simplement un flux d'information sous la
forme de HTML, d'images, de fichiers json, gml, etc.
Dans la suite du cours, nous allons maintenant nous concentrer plus
particulièrement sur le cas où le client est constitué d'un navigateur web
qui comprend des fonctionalités système d'information géographique.
[MUSIQUE]
Avant d'aborder la question de l'intégration de composants géographiques
dans une page web, il est nécessaire de rappeler un petit peu les fondements
de l'organisation et de la construction d'une page web, donc le langage HTML pour
HyperText Markup Language et le CSS pour les éléments de style.
C'est donc l'objet de cette deuxième partie du cours, une revue
accélérée un petit peu des principes de base de cette structuration de pages web.
Une page web est donc avant tout un document HTML, donc un fichier point HTML,
qui est un fichier de texte annoté afin de définir différents types de contenu,
l'entête, les pieds de page, les paragraphes, des titres, etc., etc.
Ces annotations qui portent le nom de Markup sont formées par des balises que
l'on appelle des tags, qui sont en fait des mots-clés placés entre chevrons
et qui signalent le début et la fin d'un élément de contenu ou élément HTML.
Dans l'exemple qu'on a ici sous les yeux, on voit que la balise principale est la
balise HTML qui définit en fait la page HTML, elle-même subdivisée en un entête,
avec la balise head qui contient un titre, avec la balise title.
Entête suivi d'une partie body qui est en fait le corps de la page,
qui contient un paragraphe avec un texte,
Bienvenue sur l'e-Atals de l'Orontes, et une image caractérisée par ses propriétés.
Le chemin d'accès à l'image a un texte de substitution au cas
où l'image ne serait pas accessible et la taille en largeur de cette image.
Les documents HTML devraient donc débuter et se terminer
par des balises de début et de fin, balises HTML.
Elles doivent contenir une section d'entête et une section de contenu,
avec les balises head et body.
Et finalement on note que la syntaxe du HTML n'est pas sensible à la casse,
mais qu'en général on utilise plus volontiers des minuscules partout,
par confort de lecture.
Et finalement, comme on l'a vu, l'entête contient des métadonnées, des références
vers des bibliothèques, vers des ressources externes, souvent le titre de
la page, et dans le corps on va placer les différents éléments de contenu, les
différents éléments HTML que l'on souhaite voir apparaître sur la page elle-même.
Quelques exemples de balises courantes avec les balises de titre
de niveau un à niveau six, la balise <p> pour les paragraphes,
et puis une série de balises qui permettent de renforcer du texte en
italique ou en gras, le saut de ligne, la ligne horizontale.
Le lien HyperText avec la balise simplement <a> qui peut pointer soit vers
un site web, lorsque l'on donne comme paramètre href,
l'adresse, l'url d'un site web, ici l'exemple du site web de l'École
Polytechnique, ou vers un élément de la page, situé plus haut ou plus bas,
qui définit par son identifiant, ici on a l'exemple d'une phrase,
this is the top, qui est caractérisée par son ID qui s'intitule top,
et la référence renvoie à cet emplacement de la page, avec le caractère dièse que
nous reverrons plus tard, qui cible en fait un objet qui porte un ID top.
Les balises permettant de définir des listes ordonnées avec la balise <ol>,
non ordonnées avec la balise <ul> et la balise <li> pour les éléments de listes.
La balise image que nous avons déjà vue,
avec pour particularité le fait que cette balise ne nécessite pas
de balise de fin et comme autre particularité que ses deux attributs,
la source et le texte de substitution, sont des attributs obligatoires.
Et on note au passage que la valeur des attributs est caractérisée par
un texte pris entre guillemets ou apostrophe.
La définition des chemins d'accès suit les règles standards,
ainsi par exemple dans le cas d'une source qui se trouve dans le même dossier que
le fichier HTML, la source sera
un peu moins constituée par le nom du fichier ou éventuellement par la syntaxe,
point, qui désigne le dossier dans lequel on se trouve, slash le nom du fichier.
Si on a un dossier image qui est placé au même niveau que le fichier HTML
sur lequel on travaille, le lien vers la source prendra la forme point,
slash, dossier image, slash, nom du fichier.
Il peut arriver que le dossier image soit au même niveau que le dossier
HTML qui contient le fichier HTML sur lequel on travaille, et dans ce cas pour
remonter d'un cran dans la hiérarchie, on va avoir une syntaxe du type deux points,
slash, dossier image, fichier, source, point jpg.
Et finalement dans le cas où l'image serait hébergée sur un site web distant,
on aurait simplement pour la source l'url de cette image.
La balise <table> qui définit une table composée donc de lignes,
avec la balise <tr> pour row,
chaque ligne étant composée de cellules décrites par la balise <td>.
On peut trouver une liste complète des balises de HTML sur le site
w3schools, dans la partie HTML de ce site.
Pour terminer encore, les éléments neutres constitués par les balises <div> et
<span>, qui sont en fait simplement des conteneurs pour
accueillir d'autres éléments HTML et qui sont principalement utilisés pour
structurer et styliser un document HTML.
L'élément div est lui encadré par des sauts de ligne,
donc il s'agit d'un élément de bloc, et chaque élément suivant va se retrouver
à la ligne suivante, alors que l'élément span lui est un élément en ligne,
il peut s'appliquer à une section de ligne, avec ici l'exemple du
moins important qui est stylisé en rouge à l'aide d'un span,
dans la phrase titre, et puis le second exemple,
un élément div qui est colorié en gris, un arrière fond en gris,
et puis un texte en bleu, style qui est appliqué au contenu
de ce conteneur, donc le titre de niveau h trois et le paragraphe qui suit.
Nous avons vu là deux exemples de style appliqués aux contenus de deux conteneurs,
d'un conteneur span et d'un conteneur div.
De manière générale, les éléments HTML ont tous un attribut style qui est composé
en fait d'une chaîne de caractères, qui liste une série de paramètres
sous une forme nom, deux points, valeur, séparés par des point-virgules.
Il existe un très grand nombre de paramètres de style que l'on peut utiliser
et l'on peut, comme on le voit ici,
aller piocher là-dedans pour trouver des détails.
On trouvera une description assez complète de nouveau sur le site w3schools,
dans la rubrique CSS.
La méthode qui consiste à définir le style des éléments HTML par des
paramètres associés à ces éléments possède un certain nombre d'inconvénients.
En premier lieu le fait que lorsque l'on veut faire un changement de style,
une mise à jour, on est obligé d'aller changer le style spécifiquement de chacun
des éléments, ce qui est une tâche assez fastidieuse.
Les éléments de style prennent de plus en plus de place,
ça alourdit en fait la lisibilité de la page web.
Et finalement, si on répète les mêmes styles de nombreuses fois,
en fait on augmente la taille des fichiers,
ce qui peut ralentir en fait les temps de chargement des pages web.
C'est pour cette raison que l'on utilise des méthodes alternatives comme on
l'illustre au travers de cet exemple, où l'on a en fait simplement deux conteneurs,
l'un au-dessus de l'autre, first div, second div.
L'un qui n'occupe que 70 % de la largeur de la page,
avec une hauteur de 50 pixels et un fond gris clair et le second
qui a un fond bleu foncé, un texte de couleur blanche,
une hauteur de 100 pixels et qui occupe la moitié de la largeur disponible.
Alors si l'on veut alléger un petit peu la définition des styles,
on va regrouper en fait les éléments de stylisation dans une section particulière.
de la page.
Section que l'on caractérise par les balises style.
Et dans laquelle,
on va référencer en fait les différents objets auxquels ces styles s'appliquent,
avec le caractère dièse pour rechercher l'élément qui porte cet identifiant.
En l'occurrence ici, div1.
Donc le style s'applique à un seul objet.
Le caractère point pour appliquer le style à une classe d'objets
dont les attributs d'un objet, définir une classe.
Et on peut avoir plusieurs objets qui ont la même classe.
Et donc, que l'on peut styliser avec un seul style.
Et finalement, le type HTML lui-même avec un style qui s'appliquerait alors
à l'ensemble des éléments HTML de ce type-là.
L'étape suivante de la rationalisation des éléments de style consiste à sortir la
section style de l'en-tête de la page HTML pour regrouper tous les styles
dans une page de style, donc une page .css que l'on référence
ensuite dans la page HTML avec une balise de type link.
Cette feuille de style que l'on crée regroupe toutes les informations
stylistiques dans un seul fichier, un fichier .css pour Cascading Style Sheet.
Et peut être appliqué à l'ensemble des pages HTML d'un site Web.
On a ici un exemple de différents types de stylisation
qui sont appliqués à une seule et même page, à un même contenu.
Mais avec des mises en formes diversifiées.
Cela, c'est la page telle qu'elle se présente sans style aucun.
Et on retourne à la case départ.
On voit donc que pour rationaliser la gestion des styles dans une page ou un
ensemble de pages web, on va commencer par référencer les différents
éléments HTML des pages web par leur identifiant, leur classe ou leur type.
Et que l'on va regrouper les informations de styles, soit dans une section
particulière caractérisée par la balise style dans l'en-tête de la page HTML,
soit dans un fichier séparé de type .css.
Avec cette façon de procéder, le style d'un élément peut être défini en fait à
plusieurs endroits et s'applique alors la hiérarchie suivante où on passe d'abord
du style par défaut de la page web au style défini dans la page CSS,
puis dans la section de la page HTML puis comme attribut de l'objet lui-même.
Et pareillement, dans la hiérarchie de la typologie,
on va aller d'abord du type général.
Et puis si un style particulier est défini pour une classe particulière,
c'est la classe qui va prendre le dessus.
Et dans le cas où l'objet même a un style défini,
c'est le style de l'objet qui va s'appliquer.
[MUSIQUE]
[MUSIQUE] Nous avons donc
vu les éléments de base de la construction et de la stylisation des pages web.
Il nous reste encore à voir comment on va pouvoir
intégrer dans ces pages web des éléments de cartographie
et faire en sorte que cette cartographie puisse être interactive.
Nous avons vu que le langage HTML est quand même limité et ne suffira
pas pour ce type d'applications un peu plus complexes.
Les possibilités qui s'offrent à nous, c'est de compléter en fait le HTML,
ce qui peut se faire soit du côté client
en ajoutant du code exécutable à l'intérieur même de la page HTML,
ce code peut prendre la forme de Javascript, de vbscript ou du dhtml,
par du code exécutable à télécharger et à utiliser avec une page HTML.
Il s'agit alors de scripts dans différents langages de programmation,
du Python par exemple, des composants activeX ou des applets Java.
Il existe une grande variété de produits disponibles pour ce genre de fonctions.
Et par des interfaces applications quasiment complets spécifiques
que l'on doit installer sur le client, ce que l'on désigne généralement sous
le nom de plug-in.
Les possibilités peuvent également être enrichies du côté serveur
en ajoutant des exécutables ou des librairies DLL, voire
même des scripts qui seraient exécutés sur le serveur et dont la fonction est en fait
de créer de manière dynamique les pages HTML qui sont renvoyées au client.
Et là, on utilise beaucoup le common gateway interface,
le CGI, ou alors par du code exécutable qui est
intégré à la page HTML mais qui est exécuté au niveau du serveur.
L'exemple le plus fréquemment utilisé est celui du PHP, donc le code PHP qui se
trouve dans la page en l'occurrence une page PHP envoyée par le client au serveur.
Le serveur doit disposer d'un interpréteur PHP pour exécuter ce code,
fabriquer la page HTML et la renvoyer au client.
Alors, nous n'avons pas le temps de passer en revue de manière
exhaustive toutes ces différentes formes d'enrichissement du HTML.
Et nous allons nous concentrer dans la suite du cours sur
la solution Javascript, donc du code exécutable Javascript
inséré dans la page HTML et exécuté du côté client.
Le Javascript a entre autres particularités le
fait d'être un langage fonctionnel.
C'est-à-dire que les fonctions sont des objets.
Ici, on a l'exemple d'une fonction de deux paramètres a et b qui renvoient le produit
de ces deux variables.
Cette fonction peut être définie dans une variable elle-même
qui s'appellerait myFunction et on peut utiliser cette variable
pour exécuter la fonction donc, dans le calcul de quatre fois trois.
Le Javascript permet d'accéder aux éléments de la page HTML
via le Document Object Model, ou DOM,
qui comme on le voit sur cette illustration permet d'accéder alors à la
page HTML qui est l'élément racine et puis à ses composants, l'en-tête et le corps.
Et dans l'en-tête, le titre, le texte du titre ou dans le corps,
les différents éléments HTML qui le composent.
Il est également possible d'accéder aux éléments du navigateur via le BOM,
Browser Object Model, qui permet d'accéder en fait à la fenêtre,
à l'historique du navigateur, au type de navigateur, etc., etc.
A nouveau, si vous voulez approfondir vos connaissances sur le Javascript,
je vous recommande de commencer par consulter le site w3schools
qui propose toutes sortes d'exercices dans ce domaine.
Nous allons nous intéresser maintenant à la manière
d'intégrer du Javascript dans une page HTML avec pour
commencer un exemple très simple d'un bouton dans une page HTML.
Et on aimerait que lorsque l'on clique sur ce bouton, s'affichent le jour,
la date, l'heure, etc.
La syntaxe du fichier HTML est simple.
Donc, ici, pas d'en-tête.
Juste le corps, avec dans le corps, le type, le bouton, et puis un
paragraphe avec l'ID demo qui doit recevoir en fait
le texte de la date et de l'heure généré par la fonction.
Et on voit que dans les attributs du bouton, on a une propriété onclick,
donc un événement qui va exécuter la fonction qui est décrite entre guillemets.
Donc, on va partir de document qui est donc le DOM.
On va rechercher l'objet qui s'appelle demo, dont l'ID est demo.
Et puis, on va assigner au contenu HTML de cet objet
la fonction Javascript date qui renvoie la date courante.
Tout comme pour les éléments de style,
nous avons aussi la possibilité ensuite d'extraire l'ensemble du code
Javascript d'une page HTML ou d'une série de pages HTML
pour les regrouper dans une page js,
Javascript et puis de référencer ensuite ces différentes fonctions dans l'en-tête
avec une balise script qui pointe sur le fichier Javascript
tout en gardant au niveau de l'événement onclick sur le bouton,
l'événement myFunction qui est défini dans la page myScript.js.
Ici à nouveau, ce procédé permet de simplifier et de faciliter la lecture de
la page HTML et de regrouper tous les éléments Javascript à un même endroit.
L'intégration d'une cartographie interactive dans une page web va donc,
en utilisant du Javascript,
va donc passer par l'utilisation de librairies SIG Javascript.
Il existe un grand nombre de ces librairies parmi lesquelles en particulier
Openlayers Leaflet, la librairie Mapstraction, Polymaps,
la librairie Cesium pour des représentations tri-dimensionelles, etc.
Au delà de ces librairies open source,
on trouve aussi une série de librairies qui sont en général libres
fournies par les grands producteurs que sont Google Microsoft ESRI etc.
C'est des librairies qui sont libres mais qui ne sont pas open source.
[MUSIQUE] [MUSIQUE]
Dans cette dernière partie du cours, nous allons
démontrer comment utiliser une de ces librairies JavaScript cartographiques,
en l'occurrence la librairie Openlayers, pour fabriquer une page HTML qui
contient une carte géographique interactive.
On commence donc par créer un fichier intitulé Openlayers_Seychelles.html
dans lequel on va retrouver les éléments de base, l'en-tête et le corps
avec un élément que l'on a encore pas vu qui est la déclaration de type !DOCTYPE
html qui en fait se substitue aux balises html.
On ajoute ensuite dans l'en-tête, un titre, puis toujours dans l'en-tête
deux références, une première référence à la librairie Openlayers,
et un lien vers un fichier CCS, un fichier de style,
par défaut qui accompagne la librairie Openlayers.
On ajoute ensuite, dans le corps de la page un conteneur,
auquel on assigne l'IDMap et on définit quelques éléments de style,
dans une section style de l'en tête, avec tout d'abord pour l'ensemble de la page
HTML et du corps ou body la volonté d'occuper tout l'espace disponible,
donc 100 % de la hauteur et de la largeur et pour l'élément MAP,
également 100 % de la hauteur et puis on donne une couleur de
fond gris clair pour pouvoir s'assurer que cet élément
HTML carte, ce conteneur va bien occuper tout l'espace disponible,
ce que l'on peut vérifier en ouvrant le fichier dans un navigateur,
en l'occurrence ici, Google Chrome ; Et on voit qu'effectivement le composant,
le conteneur MAP occupe tout l'espace disponible,
à l'exception d'une petite marge en haut et à gauche.
On ajoute ensuite une section pour héberger le code JavaScript,
avec les balises script et dans cette section
script on va ajouter le code qui permet de créer l'objet carte,
donc on crée un nouvel objet OL pour openlayers.map donc un objet MAP de
la librairie Openlayers que l'on assigne à la variable map et cet objet, dans ses
propriétés on dit que la cible que l'on vise c'est le conteneur qui s'appelle map.
Donc on va mettre cet élément cartographique dans le conteneur
ou div qu'est l'IDMap et puis on définit une vue pour cette carte,
donc on crée une nouvelle vue qui est centrée sur le point latitude,
longitude 55 47 et -4 67 qui correspond à peu
près au centre de l'île de Mahé et cette vue, on lui définit
également un niveau de zoom, ici la valeur 12.
Pour que quelque chose soit affiché dans cette carte on va
donc ajouter une couche, en l'occurrence la couche OpenStreetMap
donc on crée une nouvelle couche de type tuile avec
comme source OSM, qui est la source OpenStreetMap.
Et on ajoute cette couche OSM layer à l'objet map
qui est donc la carte Openlayers.
On peut constater que si l'on ouvre maintenant ce fichier HTML dans un
navigateur comme Google Chrome, on a la carte
OpenStreetMap des Seychelles, de l'île de Mahé, qui s'affiche dans la page.
Pour ajouter du contenu et de l'interactivité à cette carte,
il va falloir maintenant développer le code JavaScript, raison pour
laquelle on va sortir ce script de la page web pour l'héberger dans un
fichier JavaScript que l'on va intituler Openlayers_Seychelles.js et
on va référencer ce fichier dans l'en-tête de la page.
En reprenant ce code JavaScript on va commencer par séparer la définition
de la variable map de l'utilisation de celle-ci pour lui assigner
la nouvelle carte Openlayers que l'on a créé, ce qui permet de mettre
le code de création de la carte et d'ajout de la carte OpenStreetMap dans
une fonction qui sera exécutée une seule fois au moment du chargement de la page.
Une fois que la page est chargée on exécute le code qui ajoute la carte et la
couche OpenStreetMap avec les mots clés document ready, etc.
A noter au passage que le symbole $ se réfère à une
librairie de JavaScript qui s'appelle jQuery,
librairie qu'il a fallu pour pouvoir utiliser valablement ce symbole,
librairie qu'il a fallu ajouter dans la page HTML, dans les références.
Supposons maintenant que l'on veuille enrichir un petit peu notre carte,
par exemple, en ajoutant les districts des Seychelles que l'on a stocké
ici dans un fichier JSON qui se trouve,
on le voit par l'URL, dans un dossier GeoJSON qui se trouve
lui-même au même niveau que notre fichier JavaScript et notre page HTML.
Donc on crée une couche vecteur, avec un style qu'il va falloir
définir, et on définit comme source de cette couche vecteur ce fichier GeoJSON,
et on ajoute la couche à la carte.
On définit donc ici la symbologie pour la couche des districts
en créant un nouveau style composé d'un remplissage,
donc un objet remplissage créé à partir d'une couleur et d'une transparence,
et un objet stroke, qui définit le style de trait pour la bordure des
polygones basé également sur une couleur, une transparence, et sur une largeur
Alors on peut faire ensuite la même chose pour ajouter la couche des routes,
la couche des hôtels et puis si on veut vraiment ajouter de
l'interactivité on pourrait écrire le code, on ne va pas le faire ici
car ça devient un peu compliqué mais on pourrait écrire le code qui permet,
lorsque l'on clique sur un district ou sur un hôtel d'avoir un petite fenêtre
pop-up qui s'ouvre dans la page web et qui donne la liste des propriétés,
des attributs de l'hôtel, du district etc...
Mais pour que tout cela fonctionne,
il faut encore rendre ces fichiers JSON accessibles,
donc il faut pouvoir les exposer sur un serveur,
en l'occurrence on peut se contenter d'un simple serveur statique qui ne va pas
faire de manipulations et simplement servir ces fichiers, serveur statique
que l'on peut créer avec la librairie node.js, donc également du JavaScript,
dans un fichier que l'on va appeler server.js et on voit qu'en fait,
en cinq lignes de code on crée ce serveur.
On utilise une variant de node qui s'appelle Node Express
qui est une forme simplifiée de serveur Node
que l'on définit en fait, le dossier
public dans lequel se trouvent les fichiers que l'on va rendre accessible,
qui est en l'occurrence le dossier dans lequel se trouve ce fichier
serveur.js et toute l'arborescence qui est située en aval.
On va dire que le serveur doit écouter le port 3000 et puis envoyer un message
à la console pour dire que le serveur a démarré et qu'il écoute le port 3000.
Donc si on jette un petit coup d'oeil sur l'arborescence des fichiers que l'on
a créés, on a donc dans le dossier Openlayers_Samples,
ces trois fichiers HTML JavaScript,
pour la page web elle-même server.js pour le serveur,
les différents modules de la librairie node qui vont permettre
de faire tourner ce serveur, et dans un dossier GeoJSON, on va trouver les
trois fichiers contenant les districts, les hôtels et les routes des Seychelles.
On voit ici que l'étape suivante consiste, dans une fenêtre terminale,
à descendre dans l'arborescence jusqu'à ce dossier Openlayers_Samples et puis
d'envoyer la commande, node serveur.js ce qui va lancer le serveur node,
et on a le message comme quoi ce serveur a démarré et qu'il
écoute les requêtes sur le port 3000 Pour charger notre page web,
il faut donc ouvrir un navigateur internet et comme
url taper localhost puisque l'on est sur une machine local,
:3000 pour rechercher le port 3000, donc le serveur node que l'on vient de démarrer
et puis accéder à la page Openlayers_Seychelles.html
qui va exécuter le code JavaScript associé, qui va lui-même aller chercher
les fichiers GeoJSON et qui va les ajouter sur la carte, ce qui fait que l'on
retrouve ici en fait les districts, les routes et les hôtels.
Comme dit tout à l'heure, on peut développer ce code pour
ajouter de l'interactivité à cette carte sous toutes sortes
de formes [MUSIQUE]
[MUSIQUE] Voilà, dans cette leçon,
nous avons donc vu divers aspects liés à l'architecture client/serveur,
de façon générale puis spécifiquement dans le monde SIG,
avec notamment les protocoles d'échange basés sur le logiciel ODBC qui
permet en fait de transmettre des requêtes SQL du client vers le serveur et ensuite
de récupérer les données sélectionnées qu niveau du serveur de données.
Et le protocole HTTP qui permet d'envoyer des requêtes HTTP paramétrées
soit vers un serveur HTTP soit vers des géoservices types VMS, VFS.
Nous avons également ensuite vu de manière un peu plus spécifique les bases
de construction d'une page html et puis comment on pouvait enrichir du HTML
avec du JavaScript pour fabriquer des interfaces web SIG Et finalement
nous avons vu un petit exemple, de comment concrètement on pouvait développer
le code JavaScript pour aller en direction d'une cartographie interactive sur le web.
[MUSIQUE] [MUSIQUE]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
