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


geoinf18:oltuto3

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
geoinf18:oltuto3 [2018/11/27 23:00]
oertz [6. Style "vector"]
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 9: Line 9:
 <​html>​ <​html>​
     <​head>​     <​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"​ src="​js/​config.js"></​script>​
         <script type="​text/​javascript">​         <script type="​text/​javascript">​
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 78: Line 78:
 <​html>​ <​html>​
     <​head>​     <​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"​ src="​js/​config.js"></​script>​
         <script type="​text/​javascript">​         <script type="​text/​javascript">​
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 144: Line 144:
 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]]. 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.). Openlayers applique un style par défaut aux features, mais il est possible de redéfinir ce style (forme, couleur, etc.).
  
Line 150: Line 150:
 <​html>​ <​html>​
     <​head>​     <​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"​ src="​js/​config.js"></​script>​
         <script type="​text/​javascript">​         <script type="​text/​javascript">​
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 229: Line 229:
 </​code>​ </​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). 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 238: Line 235:
 <​html>​ <​html>​
     <​head>​     <​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"​ src="​js/​config.js"></​script>​
         <script type="​text/​javascript">​         <script type="​text/​javascript">​
Line 299: 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 319: Line 316:
 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__ +==== 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é. 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 328: Line 322:
 <​html>​ <​html>​
     <​head>​     <​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"​ src="​js/​config.js"></​script>​
         <script type="​text/​javascript">​         <script type="​text/​javascript">​
Line 403: 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|}}
- 
-__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 
geoinf18/oltuto3.1543356001.txt.gz · Last modified: 2018/11/27 23:00 by oertz