Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Mise en place d’une solution client (page web utilisant Leaflet / OpenLayers) N

Mise en place d’une solution client (page web utilisant Leaflet / OpenLayers) Nous utiliserons l’extension ‘qgis2web’ (https://github.com/tomchadwin/qgis2web) de QGIS ainsi que ses bibliothèques de programmation Javascript OpenLayers (http://openlayers.org/) et Leaflet (http://leafletjs.com/) pour afficher des couches différentes de source différentes. L’extension ‘qgis2web’ a de nombreuses limitations et ne peut pas faire tout ce que ces deux puissantes bibliothèques peuvent faire mais c’est un excellent point de départ dans un processus de cartographie en ligne de base à partir duquel vous pourrez personnaliser davantage. On verra aussi brièvement comment programmer soi-même directement avec ses librairies. Les tâches dans cette séance sont : • la création de pages web en utilisant l'extension ‘qgis2web’ (en testant l’exportation OpenLayers3 ainsi que Leaflet) • la compréhension de la logique du système • l'écriture d'une page HTML simple avec Leaflet pour afficher des cartes avec fond de plan au choix • (et pour les rapides) utiliser Leaflet et/ou OpenLayers pour accéder à d'autres sources de données (exemple WMS IGN) Des exemples des pages sont sur le site du stage (cafesig.ulb.ac.be) : Programmation ► Langages de programmation & Onglet : HTML-CSS/Java Script/PHP - pour les pages Web dynamiques, dans la sous-section : Pages HTML exemple Ainsi vous pouvez sauvegarder ces pages exemples sur votre ordinateur et les ouvrir dans un éditeur de texte pour modifier certains éléments (retirer une couche, retirer des contrôles, ajouter un autre contrôle, changer la zone affichée, ajouter une autre couche WMS d'un autre serveur, etc). Pour voir l’effet, il suffit de recharger la carte dans un navigateur. Note ! • Pour voir le contenu html d’une page : Ctrl-U ou via le menu (Développement→ Code source de la page) ou encore via un clic droit (en dehors de la carte) • Pour éditer un fichier .html, il faut faire un clique-droit sur le fichier -> Ouvrir avec une autre application et choisir Editeur de texte. 1. Créer une page web utilisant l'extension 'Qgis2web' Cette extension est le successeur de qgis-ol3 et combine les exportations vers OpenLayers3 ainsi que Leaflet. Pour exemples voir ici : https://anitagraser.com/2015/10/01/quick-webmaps-with- qgis2web/ Dans QGIS, installer l'extension 'Qgis2web' • Quand vous avez fait un choix de couches et de symbologie, utilisez le plugin pour choisir les paramètres et l’apparence désirée (appuyer sur le bouton d’aperçu de mise à jour) et exporter le tout (après avoir sélectionner un dossier de votre choix). • Une fois l’exportation terminée, votre navigateur s’ouvrira directement et affichera votre carte web. Pour plus de détails référez vous à ce tutoriel (en anglais) : http://www.qgistutorials.com/fr/docs/web_mapping_with_qgis2web.html et/ ou cette vidéo (9:20 minutes) :https://www.youtube.com/watch?v=xBdWNT40T9g 2. Utilisation de Leaflet & 3. Openlayer (BONUS) On peut évidemment programmer soi-même directement avec la librairie Javascript Leaflet (https://leafletjs.com/) ou OpenLayers (http://openlayers.org/) pour afficher des couches différentes de source différentes. Leaflet / OpenLayers est un système client. On se connecte à un serveur Web pour chercher une page en html. Cette page contient alors des instructions (en Javascript) que notre navigateur web sur notre machine exécute alors pour composer la carte. N'importe qui peut donc créer une telle page html avec les instructions de composition de carte, et tant que les sources de données utilisées pour cette carte sont accessibles n'importe qui d'autres peut alors afficher cette page dans son navigateur. Les exemples ci-dessous sont en Leaflet version 1.2 et en OpenLayers version 2. Les liens vers les versions les plus récentes de la librairie Leaflet sont disponibles sur http://leafletjs.com/examples/quick-start/ & pour OpenLayers sur http://openlayers.org/en/latest/doc/quickstart.html Les tâches sont : • Comprendre la création simple d’une page html sous leaflet ou Openlayers et le fonctionnement des événements. • Modifier le script et créer sa 1er carte avec Leaflet ou Openlayers 2.a. Utiliser Leaflet pour accéder à des serveurs OGC Voici un exemple simple pour la prise en main de leaflet <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Exemple Leaflet</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512- M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqi SH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2 Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <style>#mapid { height: 800px; }</style> </head> <body> <div id="mapid"></div> <script> var mymap = L.map('mapid').setView([50.847, 4.350], 13); var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }); OpenStreetMap_Mapnik.addTo(mymap); var marker1 = L.marker([50.813257, 4.382554]).addTo(mymap); var marker2 = L.marker([50.820105, 4.398470]).addTo(mymap); var marker3 = L.marker([50.813658, 4.268169]).addTo(mymap); var polygon = L.polygon([ [50.813257, 4.382554], [50.820105, 4.398470], [50.813658, 4.268169] ]).addTo(mymap); marker1.bindPopup("Campus du Solbosch").openPopup(); marker2.bindPopup("Campus de la Plaine"); marker3.bindPopup("Campus Erasme"); var popup = L.popup() .setLatLng([50.847, 4.350]) .setContent("Bienvenue sur ma carte.") .openOn(mymap); var popup2 = L.popup(); function onMapClick(e) { popup2 .setLatLng(e.latlng) .setContent("Vous venez de cliquer sur " + e.latlng.toString()) .openOn(mymap); } mymap.on('click', onMapClick); </script> </body> </html> En voici l'explication étape(s) par étape(s) à suivre : • Structure du fichier HTML Commencer par créer un fichier HTML sur base du template suivant : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Exemple Leaflet</title> </head> <body> </body> </html> • Références vers les fichiers de style et script de Leaflet Ajouter dans l’en-tête (head) de la page web une référence vers les fichiers source Leaflet : <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512- M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiS H2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4t Hj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> • Créer un élément qui servira à afficher la carte Ajouter dans le corps (body) de la page web un élément div : <div id="mapid"></div> Par défaut, l’élément n’a pas de hauteur, il faut donc lui en fixer une en ajoutant une instruction de style dans l’en-tête : <style> #mapid { height: 700px; } </style> • Fixer les paramètres de la carte : Coordonnées de départ Ajouter l’instruction suivante pour fixer les coordonnées de latitude, longitude et le niveau de zoom de départ à l’intérieur des balises script : <script> var mymap = L.map('mapid').setView([50.847, 4.350], 13); </script> Fond de carte Choisir un fond de carte parmi ceux proposés sur le Web pour Leaflet. La page suivante en offre une sélection et permet de les tester avant de les intégrer : http://leaflet-extras.github.io/leaflet-providers/preview/ Lorsque le choix est fait, copier le morceau de code fourni dans la partie script de la page web afin de créer un élément avec le fond de carte : var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }); Puis, ajouter cet élément ‘fond de carte’ à la carte créée grâce à l’instruction addTo(mymap) : OpenStreetMap_Mapnik.addTo(mymap); • Ajouter des éléments à la carte De nombreux éléments peuvent être ajoutés à la carte, tels que des marqueurs, des polygones, des labels, … Nous couvrirons ici uniquement les plus importants. Une documentation complète se trouve sur http://leafletjs.com/reference-1.2.0.html De plus, la page suivante montre de nombreux exemples de ce qui peut être réalisé : http://leafletjs.com/examples.html Ajouter des marqueurs Utiliser des instructions telles que les suivantes pour ajouter des marqueurs : var marker1 = L.marker([50.813257, 4.382554]).addTo(mymap); var marker2 = L.marker([50.820105, 4.398470]).addTo(mymap); var marker3 = L.marker([50.813658, 4.268169]).addTo(mymap); Ajouter des polygones L’utilisation de polygones requière d’utiliser les coordonnées de chaque point le définissant : var polygon = L.polygon([ [50.813257, 4.382554], [50.820105, 4.398470], [50.813658, 4.268169] ]).addTo(mymap); Ajouter des popups Sur des marqueurs ou autres éléments existants : marker1.bindPopup("Campus du Solbosch").openPopup(); marker2.bindPopup("Campus de la Plaine"); marker3.bindPopup("Campus Erasme"); De manière indépendante sur la carte : var popup = L.popup() .setLatLng([50.847, 4.350]) .setContent("Bienvenue sur ma carte.") .openOn(mymap); Utiliser les événements du navigateur Leaflet permet également de réagir aux événements causés par le visiteur sur le navigateur comme des clics, des déplacements, effets de zoom, … En créant des fonctions Javascript, il est possible de déclencher certains comportements lorsque l’utilisateur fait quelque chose. Par exemple, afficher une alerte lors d’un clic avec les coordonnées de l’endroit ciblé : var popup2 = L.popup(); function onMapClick(e) { popup2 .setLatLng(e.latlng) .setContent("Vous venez de cliquer sur " + e.latlng.toString()) .openOn(mymap); } mymap.on('click', onMapClick); 3.a. Utiliser OpenLayers pour accéder à des serveurs OGC Voici un exemple utilisant le serveur WMS de l'IGN : Pages HTML exemple -> OpenLayers WMS <html><body> <div id="Demo_WMS_IGN"></div> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script> map = new OpenLayers.Map("Demo_WMS_IGN", {maxExtent: new OpenLayers.Bounds(150000,165000,154000,170000), units: 'meters', projection: "EPSG:31370"}); var topo10 = new OpenLayers.Layer.WMS( "IGN Topo 1:10.000", "http://www.ngi.be/testbed/wms/top10r_l72_fr", {layers: '0'} ); var topo50 = new OpenLayers.Layer.WMS( "IGN Topo 1:50.000", "http://www.ngi.be/testbed/wms/top50r_l72_fr", {layers: '0'} ); var topo100 = new OpenLayers.Layer.WMS( "IGN Topo 1:100.000", "http://www.ngi.be/testbed/wms/top100r_l72_fr", {layers: '0'} ); map.addLayers([topo10, topo50, topo100]); var lonLat = new OpenLayers.LonLat(151131,166852); map.setCenter(lonLat, 2); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.PanZoomBar()); </script> </body></html> En voici l'explication ligne(s) par ligne(s) <html><body> Indique que ce qui suit est du HTML et que le corps de la page commence (</body></html> indique la fin de ces instructions) <div id="Demo_WMS_IGN"></div> Création d'un élément qui contiendra la carte et qui s'appelle (arbitrairement) «Demo_WMS_IGN» <script src="http://www.openlayers.org/api/OpenLayers.js"></script> L'information pour le navigateur sur la localisation du code source de la bibliothèque OpenLayers utilisée. Ce code source contient les fonctions utilisées dans le reste du code. <script> Marque le début de notre script JavaScript, donc de notre «programme» de composition de carte. map = new OpenLayers.Map("Demo_WMS_IGN", {maxExtent: new OpenLayers.Bounds(150000,165000,154000,170000), units: 'meters', projection: "EPSG:31370"}); Crée une nouvelle carte OpenLayers avec comme paramètre le nom de l'élément div dans lequel il faut l'insérer («Demo_WMS_IGN») ainsi que l'information de projection et d'extension de la zone couverte par la carte (nécessaire pour avoir le paramètre bbox que vous connaissez déjà). Ici la carte est directement définie dans le système de projection Lambert belge 1972 (code 31370) uploads/Geographie/ approche-client-utilisationopenlayersleaflet-2019-mvd.pdf