====== Workshop OpenLayers (2017, part 1) ====== Dans OpenLayers (acronyme OL3, http://openlayers.org), une carte est un ensemble de couches associée à des contrôles pour gérer l'interaction avec l'utilisateur. Une carte se construit avec trois ingrédients de base : du balisage HTML, des déclarations de style CSS, et du code JavaScript. Pour la suite, le point d'entrée pour se documenter sur l'utilisation de cette API est ici (__en version 3.19.1 pour ce tutoriel__) : ([[http://openlayers.org/en/v3.19.1/doc/|docs/API]], [[http://openlayers.org/en/v3.19.1/examples/|examples]], [[https://github.com/openlayers/ol3|code]]). Aussi, profitez de cette {{:geoinf15:openlayers.pdf|présentation OL3}} partagée par les collègues du département Géomatique. ===== 1. Les éléments de base ===== * Pour ce workshop, télécharger le matériel de départ {{:geoinf16:geoinf16-ol3.zip|}} * Décompresser l'archive dans un répertoire projet dans votre serveur web et découvrez le fichier **js/config.js** * De nombreux exemples sont basés sur les géodonnées suivantes : {{:geoinf15:cities.zip|}}, {{:geoinf15:world.zip|}} * Il est aussi nécessaire d'avoir les logiciels suivants fonctionnels (ou équivalents) : [[https://addons.mozilla.org/fr/firefox/addon/firebug/|Firebug]], [[https://addons.mozilla.org/fr/firefox/addon/restclient/|REST Client]] * (optionnel) Vous pouvez télécharger la librairie OL3 en local dans le répertoire //lib// depuis http://openlayers.org/download/ ==== Ex1A : créer une carte, un premier exemple pour comprendre ==== ol3 - Ex1A - Create a first map with an OGC WMS layer
=== Balisage HTML et déclarations CSS === * Le bloc
d'ID //map// est la cible de visualisation (la vue cartographique) * C'est la position et la taille de cette div qui déterminent comment la vue s'intègre dans l'interface * OpenLayers est accompagné de nombreuses prédéfinitions de déclarations CSS === Initialisation de la carte === * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.Map.html?unstable=true|ol.Map]]// est associé à l'ID de la cible de visualisation * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html?unstable=true|ol.View]]// représente la vue 2D de la map. Il permet de définir le centre, la résolution et la rotation de la map * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.html?unstable=true|ol.Layer]]// est utilisé pour définir chaque couche à ajouter à la carte * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.ImageWMS.html?unstable=true|ol.source.ImageWMS]]// permet de définir les paramètres d'une requête WMS pour obtenir une couche servie par un serveur cartographique conforme au standard OGC WMS (http://www.opengeospatial.org/standards/wms) * La méthode //[[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html#fit|fit]]// termine l'initialisation en calculant l'enveloppe géographique de visualisation __TODO__ - Repérez les déclarations qui habillent les boutons zoomin/zoomout et les ajuster pour que ces boutons ressemblent à ça {{:geoinf16:zoominout-tomato.png?nolink|}} - Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ? var v2 = new ol.View({projection: "EPSG:4326"}); var cbox = [10, 47]; // NB: c'est le centre de l'extent_init ci-dessus v2.setCenter(cbox); v2.setZoom(5); map.setView(v2); - Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ? map.getView().setCenter(ol.proj.transform([10, 47], "EPSG:4326", "EPSG:3857")); map.getView().setZoom(5); - Redéfinir la couche wmsLayer comme suit - quelle différence en ajoutant une couche //Tile// plutôt que //Image//? : var wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: blWMS, ratio: 1, params: { VERSION: "1.0.0", LAYERS: "ne_10m_admin_0_countries", FORMAT: "image/png" } }) }); - Rechercher et tester d'autres couches de serveurs cartographiques WMS, comme par exemple celui de Swisstopo (voir config.js et http://spatialreference.org/ref/epsg/21781/) ===== 2. Cache de tuiles ===== Avec une source ol.source.TileWMS c'est le client qui contrôle une grille de tuiles et il peut la garder en cache. Néanmoins, à chaque requête initiale de tuile, tout le processus de rendu cartographique se fait. Mais puisqu'une couche de tuiles fait des requêtes d'images selon une grille régulière, il est possible pour le serveur de préparer un cache de ces images. Le service cartographique WMS permet une grande flexibilité en terme de ce que le client peut demander. Côté serveur, cela rend difficile la mise en cache. A l'extrême opposé, un service peut aussi offrir des tuiles pour un ensemble prédéfini de niveaux de zoom et pour une grille régulière prédéfinie. On parle de couches de tuiles avec une source XYZ - avec X et Y indiquant la colonne et la rangée de la grille et Z le niveau de zoom. Il faut voir cela comme une [[http://georezo.net/wiki/_media/main/standards/tilematrixset.png|pyramide de tuiles]]. ==== Ex2A : ol.source.OSM ==== ol3 - Ex2A - webmap with layer from tile server
__TODO__ - Remplacer la source de la couche comme suit : source: new ol.source.OSM({ url:"http://api.tiles.mapbox.com/v3/oertz.map-i2ak2ozc/{z}/{x}/{y}.png", attributions: [ new ol.Attribution({ html: "Restyled & based on OpenStreetMap" }) ] })et ajouter l'instruction CSS suivante : .ol-attribution { background-color: CornflowerBlue !important; right: 10px; left: initial; bottom: initial; top: 10px; } - FIXME Remplacer la source //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.OSM.html|ol.source.OSM]]// par une source //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.XYZ.html|ol.source.XYZ]]// comme suit : source: new ol.source.XYZ({ url: "http://urbangene.heig-vd.ch/tilecache/{z}/{x}/{y}.png" }) ==== Ex2B : ol.source.BingMaps ==== L'utilisation d'un cache serveur de tuiles a largement été popularisé par des services propriétaires comme Bing Maps. OpenLayers étant indépendant de toute source de données, l'API offre également un type de couche pour dialoguer avec de tels services. __TODO__ - Partir de l'état initial de l'exemple précédent en adaptant le code JavaScript comme suit : map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz', imagerySet: 'AerialWithLabels' }) }) ] }); map.getView().setCenter(ol.proj.transform([6.15,46.2],"EPSG:4326","EPSG:3857")); map.getView().setZoom(10); - Modifier le paramètre de type de couche selon la [[https://msdn.microsoft.com/en-us/library/ff701716.aspx|documentation Bing Maps]] (par exemple : 'OrdnanceSurvey'). Contrairement à un service WMS, le service de Bing Maps ne sait pas s'auto-décrire. Mais comme il n'y a qu'un seul service Bing Maps au monde, une documentation suffit. - Pas de ol.source.GoogleMaps ? La réponse ici https://github.com/openlayers/ol3/issues/2205 et ici https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4 ==== Ex2C : OpenLayers.Layer.WMTS ==== Swisstopo offre un [[http://api3.geo.admin.ch/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit. ol3 - Ex2C - webmap with Swisstopo WMTS
__TODO__ - Ajouter l'instruction suivante : navigator.geolocation.getCurrentPosition(locationFixed, locationError); ainsi que les deux fonctions callback qui vont avec : function locationFixed(position) { map.getView().setCenter(ol.proj.transform([position.coords.longitude, position.coords.latitude],"EPSG:4326","EPSG:21781")); } function locationError(e) { console.log(e); } - Intéressant pour aider à démystifier le fonctionnement et l'utilisation de l'HTML5 Geolocation API : - [[http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html|Géolocalisation en HTML5]] -- màj 2017 - [[http://www.andygup.net/html5-geolocation-api-%E2%80%93-how-accurate-is-it-really|HTML5 Geolocation API – how accurate is it, really?]] -- un peu ancien (2012/2013) - [[http://www.mmaglobal.com/files/documents/location-data-accuracy-v3.pdf|MMA Demystifying Location Data Accuracy]] -- ~2015 - [[http://www.mmaglobal.com/files/whitepapers/MMA-Location-Terminology-Guide_FINAL.pdf|MMA Location Terminology Guide]] -- ~2015 - {{:geoinf16:ng-souriez.pdf|Souriez, vous êtes géolocalisés !}} -- NG 2016{{:geoinf17:geoloc.jpg?direct&200|}} - Utilisation d'un service de géolocalisation : - Open, crowdsourced : [[https://location.services.mozilla.com/map#2/15.0/10.0|Mozilla Location Service (MLS)]] - Avec la [[https://developers.google.com/maps/documentation/geolocation/intro|Google Maps Geolocation API]], dans un client type [[https://addons.mozilla.org/fr/firefox/addon/restclient/|RESTClient]] - configurer une requête POST -> https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyBpYS569CJN6A7wbDUXokxOJAbQhBokDkc - FIXME lancer la requête avec le corps suivant - quel est ce lieu ? { "considerIp": "false", "wifiAccessPoints": [ { "macAddress": "00:25:9c:cf:1c:ac" }, { "macAddress": "00:25:9c:cf:1c:ad" } ] } ===== 3. Style de couche "image" ===== Pour l'édition 2017, optionnel (remplacé par le suffisant Ex4E). Sinon voir : * [[geoinf16:ol3tuto#ex3astyling_avec_wms|Ex3A : Styling avec WMS]] * [[geoinf16:ol3tuto#ex3bcustom_tiling_service_with_cartocss|Ex3B : Custom tiling service with CartoCSS]]. ===== 4. Composition de couches ===== ==== Ex4A : Composition "server-side" ==== Dans la section précédente, la composition de couches est pilotée "une fois pour toute" côté serveur. Ci-dessous un pilotage de la composition "à la demande" côté client (et donc plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons possibles). ol3 - Ex4A - one WMS request for two layers
__TODO__ - Vérifier que la composition est bien faite côté serveur. - Quel intérêt à utiliser cette technique ? Quels inconvénients ? Utilise-t-on tout le potentiel d'un client navigateur pour faciliter la composition "à la demande" par l'utilisateur ? ==== Ex4B : Composition "client-side" ==== Une application de cartographie en ligne se doit de permettre à l'utilisateur de personnaliser sa carte par ses choix pour la couche de référence (baselayer) et les couches à activer en superposition (overlays). Elle doit fournir la capacité de gérer la composition côté client. ol3 - Ex4B - two WMS overlayed layers
__TODO__ - Apporter la preuve que l'assemblage s'est fait côté client. - Analyser les paramètres WMS. Lequel représente l'indispensable capacité "server-side" pour permettre l'assemblage client-side par superposition ? - Ajouter dans la table des couches les //ne_10m_admin_0_countries// et //ne_10m_lakes// du GeoServer de Boundless (//blWMS//) comme suit : new ol.layer.Image({ title: "Countries", source: new ol.source.ImageWMS({ url: blWMS, params: { VERSION: "1.0.0", LAYERS: "ne_10m_admin_0_countries", FORMAT: "image/png" } }) }), new ol.layer.Image({ title: "Lakes", source: new ol.source.ImageWMS({ url: blWMS, params: { VERSION: "1.0.0", LAYERS: "ne_10m_lakes", FORMAT: "image/png" } }) }) Visualiser le résultat. Qu'est-ce qui est "baselayer", qu'est-ce qui est "overlays" ? - Remettre un peu d'ordre là où c'est possible. ==== Ex4C : Gestion de composition cartographique - LayerSwitcher ==== OL3 n'offre [[https://twitter.com/RemiBovard/status/525028570780139520|pour l'instant pas]] nativement de "UI manager" de composition cartographique. Néanmoins l'API offre ce qu'il faut pour concevoir son propre LayerSwitcher. ol3 - Ex4C - MyLayerSwitcher

Choose baselayer:

Choose overlays:

__TODO__ - Analyser le code ci-dessus et identifier la principale capacité "client-side" de l'API sur laquelle repose ce LayerSwitcher. - Adapter le code pour ajouter à l'équation la couche OSM suivante : new ol.layer.Tile({ source: new ol.source.OSM() }) - Ajouter la propriété ci-dessous à la couche des lacs opacity: 0.5 __Résultat__ http://www.mediamaps.ch/oltuto/Ex4C_0.html ==== Ex4D : Un contrôle LayerSwitcher plus souple ==== A partir des capacités offertes par l'API, la communauté de développeurs gravitant autour du core OL3 développe des //controls// parmi lesquels un LayerSwitcher un peu plus malin. ol3 - Ex4D - A clever LayerSwitcher
__TODO N°1__ - Comment fonctionne ce [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] ? (remarquez quelques nouvelles propriétés intéressantes sur ol.layer). - Ajouter une baselayer sur un base Bing Maps comme vu à l'Ex2B (ex. Aerial) - Ajouter un overlay basé sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo (//chWMS//, voir aussi la [[http://www.geo.admin.ch/internet/geoportal/fr/home/services/geoservices/display_services/services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:geoinf16:screenshot2.png?200|}} __TODO N°2__ (NB les prérequis spécifiques : [[#style_de_couche_image|Ex3A et Ex3B]]) - Utiliser la couche WMS world_simple en overlay en ne visualisant que les frontières des pays (pas de remplissage des zones). - Ajouter une baselayer MapBox comme celle avec le mapID //mapbox.pencil// (voir https://www.mapbox.com/developers/api/maps/#mapids) - Ajouter un overlay basé sur une couche MapBox de votre cru notamment avec le 3e exercice du tutoriel MapBox/CartoCSS (voir Ex3B, avec votre couche g4cantons) ==== Ex4E : Pilotage de style par le client (CartoCSS) ==== Jusqu'à présent, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis (ex. avec le langage SLD dans GeoServer). Voyons comment le client peut dire son mot et piloter le style “à distance”. **Etape 1 :** découverte d'une intéressante plateforme cartographique, CARTO (aka CartoDB) et du langage CartoCSS. - naviguer vers https://oertz.carto.com/me - choisir le dataset __geoinf_contour_yverdon__ (fabriqué avec QGIS à partir du MNT N46E006.hgt, Modèle Numérique de Terrain) - choisir "Create a map" (le cas échéant créer un compte) - renommer la carte "Jouons avec CARTO!" - cartodb_query -- c'est le dataset sous-jacent qui a été importé dans votre espace CARTO - utiliser le sélecteur MAP/DATA - renommer la layer "contour_yverdon_label" et éditer le style pour **afficher les altitudes sur les lignes de contour** - l'UI Style Editor est pratique et on peut affiner la description de style en accédant aux [[https://carto.com/docs/carto-engine/cartocss/properties/|instructions CartoCSS]] - utiliser le sélecteur VALUES/CARTOCSS **Etape 2 :** intégration dans notre application OL3 (voir l'application ci-dessous) - l'application charge l'API CORE JavaScript de CARTO (cf. https://carto.com/docs/carto-engine/carto-js/core-api/) - la méthode cartodb.Tiles.getTiles permet d'assembler un dataset sélectionné (sublayers/sql) avec un style donné (sublayers/cartocss) - NB aussi le user_name - le callback construit l'URL qui correspond à votre cache source de tuiles (ex. __a.ashbu.cartocdn.com/ogo/api/v1/map/4c64e8d931417377282738/{z}/{x}/{y}.png__) - l'URL est utilisée pour créer une couche ol.layer.Tile sur la base de cette source tuilée avec l'habituel ol.source.XYZ ol3 - Ex4E - On demand CartoCSS
__TODO A__ - Adapter l'application avec les instructions CartoCSS préparées ci-dessus pour afficher les altitudes sur les lignes de contour, uniquement pour les altitudes supérieures à 800m (**voir aussi {{:geoinf16:cartocss.pdf|Custom basemap tiles with CartoCSS, J. Freyre, 2014}}**) - Ajouter une couche ol.layer.Tile à partir du dataset des districts de Suisse https://ogo.cartodb.com/tables/g4districts98/public et en construisant un style qui affiche les districts Vaudois différemment des autres (NB : selon votre goût, et dézoomer un peu pour y voir) - Adapter l'application pour que le style CartoCSS soit chargé asynchronnement depuis un fichier //myGreatRemoteStyle.mss// (on proclame le suffixe mss pour Map Style Sheet). __Résultat__ http://www.mediamaps.ch/oltuto/Ex4E_1.html http://www.mediamaps.ch/oltuto/Ex4E_2.html (et les instructions CartoCSS http://www.mediamaps.ch/oltuto/sld/g4districts.mss) __TODO B__ Quelles similitudes et différences entre l'approche précédente et celle-ci, qui peut se résumer à une requête : ''https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetMap&FORMAT=image/png&LAYERS=ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt&SRS=EPSG:3857&STYLES=&WIDTH=2285&HEIGHT=897&BBOX=174582,5648084,1571851,6196597&SLD=https://drive.switch.ch/index.php/s/brNwxHVjcBeZVDc/download '' ===== 5. Couche "vector" ===== Dans les sections précédentes nous avons inséré des couches cartographiques sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire. A l'opposé, pour une couche ol.layer.Vector c'est le client qui joue le rôle de moteur cartographique pour créer la visualisation d'entités géographiques (Features en anglais). * Télécharger l'archive {{:geoinf15:data.zip|}} et la déployer dans votre dossier de projet web. ==== Ex5A : Source de données OpenLayers.Format ==== Une couche [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html?unstable=true|ol.layer.Vector]] peut être alimentée par une source de données au format [[http://openlayers.org/en/v3.19.1/apidoc/ol.format.GeoJSON.html?unstable=true|ol.source.GeoJSON]] (voir aussi http://geojson.org). Il existe de nombreux autres formats : [[http://openlayers.org/en/v3.19.1/apidoc/ol.format.GPX.html?unstable=true|ol.format.GPX]], [[http://openlayers.org/en/v3.19.1/apidoc/ol.format.TopoJSON.html?unstable=true|ol.format.TopoJSON]], [[http://openlayers.org/en/v3.19.1/apidoc/ol.format.KML.html?unstable=true|ol.format.KML]], sans oublier le Geographic Markup Language ([[http://openlayers.org/en/v3.19.1/apidoc/ol.format.GML.html?unstable=true|ol.format.GML]]) de l'OGC qui "consiste en un ensemble de schémas XML qui permettent de construire des modèles de données pour des domaines métiers spécifiques (urbanisme, hydrologie, géologie, ...) et définissent un format ouvert pour l'échange de données géographiques" //(source Wikipedia)//. Voir l'exemple dans votre dossier data : ./data/fourCapitals.gml ol3 - Ex5A - GeoJSON vector overlay
__TODO__ - Apporter la preuve que les données sont bien transformées en objets graphiques côté client ! - Qu'est-ce-que ce format GeoJSON http://geojson.org ? Remplacer l'URL source par https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson en dézoomant un peu le cas échéant. - Ajouter une interaction utilisateur (ex. bouton) qui affiche (ex. dans une div HTML) la liste des descriptions des séismes (propriété //title//). Ces informations sont bien sûr associées aux entités rattachées à la classe [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html|ol.layer.Vector]]. \\ \\ Illustration du résultat attendu : {{:geoinf15:earthquakeinfo.png?nolink&300|}}\\ \\ - Enlever l'interaction et modifier l'url comme suit et modifier le type de source de données en conséquence: url: 'https://drive.switch.ch/index.php/s/ISW7xzNmVTAkwQM/download', format: new ol.format.GPX() en recentrant la carte par ici : view: new ol.View({ center:[766225, 5908730], zoom: 12 }), Pourquoi cela ne fonctionne pas ? Et pourquoi ça fonctionnait alors avant avec le flux GeoJSON des séismes ? __Résultat__ http://www.mediamaps.ch/oltuto/Ex5A_3.html ==== Ex5B : ol.source.Vector sous la loupe ==== Cette section décrit en détail ce qu'est une source de donnée [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.Vector.html?unstable=true|ol.source.Vector]] pour une couche [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html?unstable=true|ol.layer.Vector]] en montrant comment la créer et l'alimenter à partir d'un format de source de géodonnées "fait maison". En résumé, une source [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.Vector.html?unstable=true|ol.source.Vector]] est composée d'entités géographiques ([[http://openlayers.org/en/v3.9.0/apidoc/ol.Feature.html?unstable=true|ol.Feature]]) chacune composée d'une géométrie ([[http://openlayers.org/en/v3.19.1/apidoc/ol.geom.html?unstable=true|ol.geom]]) et d'une liste d'attributs. La source de données est un fichier texte formaté comme suit: 2.3332999999999999 48.866700000000002 Paris,7.4333 46.950000000000003 Bern,12.5 41.883299999999998 Rome,-3.71 40.409999999999997 Madrid La structure de formatage est simple : c'est une suite de triplets "Longitude Latitude Nom" dont le séparateur interne est l'espace. Le séparateur entre triplets est la virgule. Chaque triplet correspond à une entité géographique. Le code ci-dessous décode cette structure et transforme les triplets en objects de type ol.Feature. ol3 - Ex5B - custom format for vector overlay
__TODO__ - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Suisse,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain - Montrer que l'attribut a bien été pris en compte (par exemple en créant une interaction similaire à celle demandée dans l'Ex5A, avec une liste de descriptions des entités). ===== 6. Style "vector" ===== OpenLayers met à disposition un ensemble de classes [[http://openlayers.org/en/v3.19.1/apidoc/ol.style.html|ol.style]] permettant d'appliquer des styles aux features (entités géographiques) d'une couche [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html|ol.vector]]. ==== Ex6A : Style d'entité ==== Openlayers applique un style par défaut aux features, mais il est possible de redéfinir ce style (forme, couleur, etc.). ol3 - Ex6A - One feature, one style
__TODO__ - Remplacer le style avec les propriétés suivantes : var style = new ol.style.Style({ image: new ol.style.Icon({ src: "http://urbangene.heig-vd.ch/css/img/icones/marker_saved.png" }) }); ... c'est très joli, mais il semble qu'il y ait un problème ! Lequel ? Comment le résoudre ? -> [[http://openlayers.org/en/v3.19.1/doc/|docs/API]] - Ajouter une entité de plus dans la source - que constate-t-on ? var feature2 = new ol.Feature({ geometry: new ol.geom.Point([759116, 5860375]) }); vectLayer.getSource().addFeature(feature2); - Créer une entité de type //LineString// en remplaçant la propriété //geometry// comme suit et avec une représentation en ligne traitillé : geometry: new ol.geom.LineString([[750393, 5862618],[759116, 5860375]]) __Résultat__ http://www.mediamaps.ch/oltuto/Ex6A_3.html ==== Ex6B : Style de couche ==== L'approche la plus répandue consiste à associer un style à une couche, c'est-à-dire qu'il s'applique automatiquement à toutes les entités de la couche (comme avec SLD/SE et CartoCSS). ol3 - Ex6B - One layer, one style
__TODO__ - Ajouter une entité géographique de plus comme suit : var feature2 = new ol.Feature({ geometry: new ol.geom.Point([1938600, 6840171]), name: "The hobbits are far away...", author: "Gandalf" }); vecLayer.getSource().addFeature(feature2); - Modifier la feature1 et la feature2 avec les deux //LineString// ci-dessous : var feature1 = new ol.Feature({ geometry: new ol.geom.LineString([[738600, 6840171],[1938600, 6840171]]) }); var feature2 = new ol.Feature({ geometry: new ol.geom.LineString([[738600, 5840171],[1938600, 7840171]]) }); Adapter la représentation des lignes avec un style //highway// comme illustré ci-après :{{:geoinf15:highway.png?nolink|}} __Résultat__ http://www.mediamaps.ch/oltuto/Ex6B_1.html http://www.mediamaps.ch/oltuto/Ex6B_2.html ==== Ex6C : Fonction de style ==== Plutôt que d'appliquer un style identique à toutes les entités d'une couche, il est possible d'appliquer un style différents basé sur les propriétés de chacune des entités. Pour cela, Openlayers propose de remplacer l'objet //ol.style.Style// par une fonction //ol.style.StyleFunction()//. Dans l'exemple ci-dessous on affiche une étiquette différente en fonction de la propriété "name" de chaque entité. ol3 - Ex6C - Styling function
__TODO__ - Modifier ce qu'il faut pour visualiser des étiquettes comme suit __Gollum says: The precious is here!__ et __Gandalf says: The hobbits are far away...__ - Ajouter une couche vector utilisant le flux https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson (cf Ex5A) et faire en sorte que les points séismes soient représentés différemment dans chaque hémisphère. - Sur la base de ce même flux, proposer une représentation thématique des points séismes en exploitant leur propriété d'intensité/magnitude (voir l'attribut ''mag'', voir aussi [[http://fr.wikipedia.org/wiki/Magnitude_d%27un_s%C3%A9isme#.C3.89chelle_de_Richter|Echelle de Richter]]). \\ En quoi le paramètre ''renderOrder'' de [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html|ol.layer.Vector]] est ici particulièrement intéressant ? {{:geoinf15:earthquakes.png?nolink|}} __Résultat__ http://www.mediamaps.ch/oltuto/Ex6C_1.html http://www.mediamaps.ch/oltuto/Ex6C_2.html http://www.mediamaps.ch/oltuto/Ex6C_3.html