GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
geoinf17:ol3tuto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf17:ol3tuto [2017/12/12 13:27] oertz [Ex4C : Gestion de composition cartographique - LayerSwitcher] |
geoinf17:ol3tuto [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 684: | Line 684: | ||
| <script type="text/javascript" src="js/config.js"></script> | <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"> | <script type="text/javascript"> | ||
| Line 742: | 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) | - 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). | - 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__ | __TODO B__ | ||
| Line 813: | Line 817: | ||
| }), | }), | ||
| </code>Pourquoi cela ne fonctionne pas ? Et pourquoi ça fonctionnait alors avant avec le flux GeoJSON des séismes ? | </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 ==== | ==== 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. | 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 976: | Line 983: | ||
| geometry: new ol.geom.LineString([[750393, 5862618],[759116, 5860375]]) | geometry: new ol.geom.LineString([[750393, 5862618],[759116, 5860375]]) | ||
| </code> | </code> | ||
| + | |||
| + | __Résultat__ | ||
| + | http://www.mediamaps.ch/oltuto/Ex6A_3.html | ||
| ==== Ex6B : Style de couche ==== | ==== Ex6B : Style de couche ==== | ||
| Line 1064: | Line 1074: | ||
| Adapter la représentation des lignes avec un style //highway// comme illustré ci-après :{{:geoinf15:highway.png?nolink|}} | 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 ==== | ==== 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é. | 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 1150: | Line 1163: | ||
| - 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|}} | {{: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 | ||
geoinf17/ol3tuto.1513081644.txt.gz · Last modified: 2018/05/16 10:05 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
