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

Site Tools


geoinf15:ol3tuto

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
geoinf15:ol3tuto [2016/01/09 16:57]
oertz [Ex4A : Composition server-side]
geoinf15:ol3tuto [2016/10/10 11:52]
127.0.0.1 external edit
Line 209: Line 209:
         new ol.layer.Tile({         new ol.layer.Tile({
             source: new ol.source.BingMaps({             source: new ol.source.BingMaps({
-                key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',+                key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz',
                 imagerySet: '​AerialWithLabels'​                 imagerySet: '​AerialWithLabels'​
             })             })
Line 583: Line 583:
 </​html>​ </​html>​
 </​code>​ </​code>​
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx4B.html
   - Apporter la preuve que l'​assemblage s'est fait côté client.   - 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 la superposition ? Que constate-t-on aussi et plus généralement par rapport à ce paramètre ?   - Analyser les paramètres WMS. Lequel représente l'​indispensable capacité "​server-side"​ pour la superposition ? Que constate-t-on aussi et plus généralement par rapport à ce paramètre ?
Line 745: Line 745:
 </​html>​ </​html>​
 </​code>​ </​code>​
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx4C.html
   - Analyser le code ci-dessus et identifier la principale capacité "​client-side"​ sur laquelle repose ce LayerSwitcher.   - Analyser le code ci-dessus et identifier la principale capacité "​client-side"​ sur laquelle repose ce LayerSwitcher.
   - Adapter le code pour ajouter un choix de baselayer supplémentaire basé sur la couche OSM suivante :<​code>​   - Adapter le code pour ajouter un choix de baselayer supplémentaire basé sur la couche OSM suivante :<​code>​
Line 841: Line 841:
 </​html>​ </​html>​
 </​code>​ </​code>​
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx4D.html
   - Comment fonctionne ce [[https://​github.com/​walkermatt/​ol3-layerswitcher|ol3-layerswitcher]] ? (remarquez quelques nouvelles propriétés intéressantes sur ol.layer).   - 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 une baselayer sur un base Bing Maps comme vu à l'Ex2B (ex. Aerial)
Line 912: Line 912:
 </​html>​ </​html>​
 </​code>​ </​code>​
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx4E.html
   - Adapter le style pour afficher les districts Vaudois différemment des autres (à savoir : la structure des géodonnées de la table //​g4districts98//​ possède un attribut //ak// dont la valeur est //'​VD'//​ pour les entités vaudoises)   - Adapter le style pour afficher les districts Vaudois différemment des autres (à savoir : la structure des géodonnées de la table //​g4districts98//​ possède un attribut //ak// dont la valeur est //'​VD'//​ pour les entités vaudoises)
   - Pour une solution encore plus découplée et flexible, adapter l'​application pour que le style CartoCSS soit chargé (a)synchronnement depuis un fichier //​g4districts.mss//​ (on proclame le suffixe mss signifiant Map Style Sheet).   - Pour une solution encore plus découplée et flexible, adapter l'​application pour que le style CartoCSS soit chargé (a)synchronnement depuis un fichier //​g4districts.mss//​ (on proclame le suffixe mss signifiant Map Style Sheet).
Line 965: Line 965:
 </​code>​ </​code>​
  
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx5A.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 978: Line 978:
   zoom: 10   zoom: 10
 }), }),
-</​code>​Pourquoi cela ne fonctionne pas?+</​code>​Pourquoi cela ne fonctionne pas? => **corrigé** http://​www.mediamaps.ch/​oltuto/​tutoEx5Agpx.html
   - Notons aussi le Geographic Markup Language de l'OGC qui "​consiste en un ensemble de schémas XML qui permettent de construire des modèles de données spécifiques pour des domaines spécialisés,​ comme l'​urbanisme,​ l'​hydrologie,​ la géologie, et définissent un format ouvert pour l'​échange de données géographiques"​ //(source Wikipedia)//​. Voir l'​exemple : ./​data/​fourCapitals.gml   - Notons aussi le Geographic Markup Language de l'OGC qui "​consiste en un ensemble de schémas XML qui permettent de construire des modèles de données spécifiques pour des domaines spécialisés,​ comme l'​urbanisme,​ l'​hydrologie,​ la géologie, et définissent un format ouvert pour l'​échange de données géographiques"​ //(source Wikipedia)//​. Voir l'​exemple : ./​data/​fourCapitals.gml
  
Line 1052: Line 1052:
 </​code>​ </​code>​
  
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx5B.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>​
   - Utiliser Firebug (ou équivalent) pour inspecter votre application et constater que l'​attribut a bien été pris en compte.   - Utiliser Firebug (ou équivalent) pour inspecter votre application et constater que l'​attribut a bien été pris en compte.
Line 1128: Line 1128:
 </​code>​ </​code>​
  
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx6A.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 1210: Line 1210:
 </​code>​ </​code>​
  
-__TODO__+__TODO__ ​=> corrigé http://​www.mediamaps.ch/​oltuto/​tutoEx6B.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 1312: Line 1312:
  
 __TODO__ __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...__ +  - 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...__ ​=> **corrigé** http://​www.mediamaps.ch/​oltuto/​tutoEx6C.html 
-  - Reprendre l'Ex5A avec le flux http://​earthquake.usgs.gov/​earthquakes/​feed/​v1.0/​summary/​2.5_day.geojson et faire ce qu'il faut pour que les points séismes de l'​hémisphère Nord apparaissent différemment de l'​autre. +  - Reprendre l'Ex5A avec le flux http://​earthquake.usgs.gov/​earthquakes/​feed/​v1.0/​summary/​2.5_day.geojson et faire ce qu'il faut pour que les points séismes de l'​hémisphère Nord apparaissent différemment de l'​autre. ​=> **corrigé** http://​www.mediamaps.ch/​oltuto/​tutoEx6C_1.html 
-  - 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]]).+  - 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]]). ​=> **corrigé** http://​www.mediamaps.ch/​oltuto/​tutoEx6C_2.html
 {{:​geoinf15:​earthquakes.png?​nolink|}} {{:​geoinf15:​earthquakes.png?​nolink|}}
geoinf15/ol3tuto.txt · Last modified: 2018/05/16 10:05 (external edit)