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
geoinf18:oltuto3
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf18:oltuto3 [2018/11/27 23:01] oertz |
geoinf18:oltuto3 [2019/01/08 18:53] (current) oertz [A. Source de données OpenLayers.Format] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== OpenLayers3 (2018, part 3) ====== | ====== OpenLayers3 (2018, part 3) ====== | ||
| - | ===== 6. Couche ol.layer de type "vector" ===== | + | ===== 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é, 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). | 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). | ||
| Line 49: | Line 49: | ||
| </code> | </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 ! | - 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> | - Qu'est-ce-que ce format GeoJSON http://geojson.org ? Remplacer l'URL source par<code> | ||
| Line 137: | Line 137: | ||
| </code> | </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> | - 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 le point A, 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). | ||
| Line 211: | Line 211: | ||
| </code> | </code> | ||
| - | __TODO__ | + | **TODO** https://www.mediamaps.ch/oltuto/Ex7a.html |
| - Remplacer le style avec les propriétés suivantes :<code> | - Remplacer le style avec les propriétés suivantes :<code> | ||
| var style = new ol.style.Style({ | var style = new ol.style.Style({ | ||
| Line 218: | 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> | - Ajouter une entité de plus dans la source - que constate-t-on ?<code> | ||
| var feature2 = new ol.Feature({ | var feature2 = new ol.Feature({ | ||
| Line 296: | Line 296: | ||
| </code> | </code> | ||
| - | __TODO__ | + | **TODO** https://www.mediamaps.ch/oltuto/Ex7b.html |
| - Ajouter une entité géographique de plus comme suit :<code> | - Ajouter une entité géographique de plus comme suit :<code> | ||
| var feature2 = new ol.Feature({ | var feature2 = new ol.Feature({ | ||
| Line 397: | Line 397: | ||
| </code> | </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...__ | - 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 ? | - 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|}} | ||
geoinf18/oltuto3.1543356097.txt.gz · Last modified: 2018/11/27 23:01 by oertz
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
