Differences

This shows you the differences between two versions of the page.

--- geoinf18:oltuto3 [2018/11/27 22:53]
oertz created
+++ geoinf18:oltuto3 [2019/01/08 18:53] (current)
oertz [A. Source de données OpenLayers.Format]
@@ Line 1: / Line 1: @@
 ====== OpenLayers3 (2018, part 3) ======
 ===== 6. ol.layer de type "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).
+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é, avec 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 (rappel : Feature en anglais).
-  * Télécharger l'archive {{:geoinf15:data.zip|}} et la déployer dans votre dossier de projet web.
+  * Si nécessaire, télécharger l'archive {{:geoinf15:data.zip|}} et insérer son contenu dans votre dossier de projet web.
-==== Ex5A : Source de données OpenLayers.Format ====
+==== A. 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
+Une couche [[http://openlayers.org/en/v3.20.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.20.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.20.1/apidoc/ol.format.GPX.html?unstable=true|ol.format.GPX]], [[http://openlayers.org/en/v3.20.1/apidoc/ol.format.TopoJSON.html?unstable=true|ol.format.TopoJSON]], [[http://openlayers.org/en/v3.20.1/apidoc/ol.format.KML.html?unstable=true|ol.format.KML]], sans oublier le Geographic Markup Language ([[http://openlayers.org/en/v3.20.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
 <code>
 <html>
     <head>
-        <title>ol3 - Ex5A - GeoJSON vector overlay</title>
+        <title>ol3 - Ex6a - GeoJSON vector overlay</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
@@ Line 49: / Line 49: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex6a-3.html https://www.mediamaps.ch/oltuto/Ex6a-4.html
   - 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<code>
 https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson
 </code>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|}}\\ \\
+  - 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.20.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:<code>
 url: 'https://drive.switch.ch/index.php/s/ISW7xzNmVTAkwQM/download',
@@ Line 65: / Line 65: @@
 </code>Pourquoi cela ne fonctionne pas ? Et pourquoi ça fonctionnait alors avant avec le flux GeoJSON des séismes ?
-__Résultat__
+==== B. L'objet ol.source.Vector sous la loupe ====
-http://www.mediamaps.ch/oltuto/Ex5A_3.html
+Cette section décrit en détail ce qu'est une source de donnée [[http://openlayers.org/en/v3.20.1/apidoc/ol.source.Vector.html?unstable=true|ol.source.Vector]] pour une couche [[http://openlayers.org/en/v3.20.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.20.1/apidoc/ol.source.Vector.html?unstable=true|ol.source.Vector]] est composée d'entités géographiques ([[http://openlayers.org/en/v3.20.1/apidoc/ol.Feature.html?unstable=true|ol.Feature]]) chacune composée d'une géométrie ([[http://openlayers.org/en/v3.20.1/apidoc/ol.geom.html?unstable=true|ol.geom]]) et d'une liste d'attributs.
-==== 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:
@@ Line 80: / Line 78: @@
 <html>
     <head>
-        <title>ol3 - Ex5B - custom format for vector overlay</title>
+        <title>ol3 - Ex6b - custom format for vector overlay</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
@@ Line 139: / Line 137: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex6b.html
   - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :<code>2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Suisse,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain</code>
-  - 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).
+  - Montrer que l'attribut a bien été pris en compte (par exemple en créant une interaction similaire à celle demandée dans le point A, avec une liste de descriptions des entités).
-===== 6. Style "vector" =====
+===== 7. 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]].
+OpenLayers met à disposition un ensemble de classes [[http://openlayers.org/en/v3.20.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.20.1/apidoc/ol.layer.Vector.html|ol.vector]].
-==== Ex6A : Style d'entité ====
+==== A. Style d'entité ====
 Openlayers applique un style par défaut aux features, mais il est possible de redéfinir ce style (forme, couleur, etc.).
@@ Line 152: / Line 150: @@
 <html>
     <head>
-        <title>ol3 - Ex6A - One feature, one style</title>
+        <title>ol3 - Ex7a - One feature, one style</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
@@ Line 213: / Line 211: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex7a.html
   - Remplacer le style avec les propriétés suivantes :<code>
 var style =  new ol.style.Style({
@@ Line 220: / Line 218: @@
     })
 });
-</code>... 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]]
+</code>... 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.20.1/doc/|docs/API]]
   - Ajouter une entité de plus dans la source - que constate-t-on ?<code>
 var feature2 = new ol.Feature({
@@ Line 231: / Line 229: @@
 </code>
-__Résultat__
+==== B. Style de couche ====
-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).
@@ Line 240: / Line 235: @@
 <html>
     <head>
-        <title>ol3 - Ex6B - One layer, one style</title>
+        <title>ol3 - Ex7b - One layer, one style</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
@@ Line 301: / Line 296: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex7b.html
   - Ajouter une entité géographique de plus comme suit :<code>
 var feature2 = new ol.Feature({
@@ Line 321: / Line 316: @@
 Adapter la représentation des lignes avec un style //highway// comme illustré ci-après :{{:geoinf15:highway.png?nolink|}}
-__Résultat__
+==== C. Fonction de style ====
-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é.
@@ Line 330: / Line 322: @@
 <html>
     <head>
-        <title>ol3 - Ex6C - Styling function</title>
+        <title>ol3 - Ex7c - Styling function</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
@@ Line 405: / Line 397: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex7c-1.html https://www.mediamaps.ch/oltuto/Ex7c-2.html https://www.mediamaps.ch/oltuto/Ex7c-3.html
   - 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.
+  - Ajouter une couche vector utilisant le flux https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson et faire en sorte que les points séismes soient représentés différemment dans chaque hémisphère.<code>
+function createQuakeStyle(feature, resolution) {
+    var quakeStyleS = new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 5,
+          fill: new ol.style.Fill({
+            color: '#ff0000'
+          })
+        })
+    });
+    var quakeStyleN = new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 5,
+          fill: new ol.style.Fill({
+            color: '#0000ff'
+          })
+        })
+    });
+    coords = feature.getGeometry().getCoordinates();
+    console.log(coords);
+    if (coords[1] < 0)
+      quakeStyle = quakeStyleS;
+    else
+      quakeStyle = quakeStyleN;
+    return quakeStyle;
+}
+</code>
   - 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

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools