Differences

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

--- geoinf17:ol3tuto [2017/11/29 20:23]
oertz [Ex4E : Pilotage de style par le client (CartoCSS)]
+++ geoinf17:ol3tuto [2018/05/16 10:05] (current)
@@ Line 152: / Line 152: @@
 }
 </code>
-  - 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 :<code>
+  - 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 :<code>
 source: new ol.source.XYZ({
   url: "http://urbangene.heig-vd.ch/tilecache/{z}/{x}/{y}.png"
@@ Line 262: / Line 262: @@
     - 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
-      - lancer la requête avec le corps suivant - quel est ce lieu ?<code>
+      - FIXME lancer la requête avec le corps suivant - quel est ce lieu ?<code>
 {
   "considerIp": "false",
@@ Line 560: / Line 560: @@
 opacity: 0.5
 </code>
+__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.
@@ Line 681: / Line 684: @@
         <script type="text/javascript" src="js/config.js"></script>
-        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.core.js"></script>
+        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
         <script type="text/javascript">
@@ Line 739: / Line 742: @@
   - 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__
@@ Line 798: / Line 805: @@
   - 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>
-http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson
+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|}}\\ \\
@@ Line 810: / Line 817: @@
 }),
 </code>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.
@@ Line 964: / Line 974: @@
 });
 </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]]
+  - Ajouter une entité de plus dans la source - que constate-t-on ?<code>
+var feature2 = new ol.Feature({
+    geometry: new ol.geom.Point([759116, 5860375])
+});
+vectLayer.getSource().addFeature(feature2);
+</code>
   - Créer une entité de type //LineString// en remplaçant la propriété //geometry// comme suit et avec une représentation en ligne traitillé :<code>
 geometry: new ol.geom.LineString([[750393, 5862618],[759116, 5860375]])
 </code>
+__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.
+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).
 <code>
@@ Line 1008: / Line 1027: @@
                 vecLayer = new ol.layer.Vector({
-                    source: new ol.source.Vector({}),
+                    source: new ol.source.Vector({})
-                    style: style
                 });
+                vecLayer.setStyle(style);
                 var feature1 = new ol.Feature({
@@ Line 1055: / Line 1074: @@
 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é.
@@ Line 1138: / Line 1160: @@
 __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 http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson (cf Ex5A) et faire en sorte que les points séismes de l'hémisphère Nord apparaissent différemment de l'autre.
+  - 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 ?
+  - 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