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


geoinf14:oltuto2

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
geoinf14:oltuto2 [2014/12/07 16:58]
oertz [Ex7C : stratégies de chargement en mode vector]
geoinf14:oltuto2 [2018/05/16 10:05] (current)
Line 206: Line 206:
 Le chargement d'​entités géographiques peut s'​avérer néfaste en terme d'​expérience utilisateur du fait d'une latence provoquée (1) par le volume important de données à charger pour une bande passante donnée et (2) par les performances et l'​aptitude du moteur de rendu cartographique à digérer ces données. ​ Le chargement d'​entités géographiques peut s'​avérer néfaste en terme d'​expérience utilisateur du fait d'une latence provoquée (1) par le volume important de données à charger pour une bande passante donnée et (2) par les performances et l'​aptitude du moteur de rendu cartographique à digérer ces données. ​
  
-L'​exemple suivant montre déjà des limites avec la stratégie OpenLayers.Strategy.Fixed() qui charge simplement tous les objets dans l'​enveloppe de visualisation. Il s'agit alors d'​opter pour tes stratégies ​pour éviter ces écueils.+L'​exemple suivant montre déjà des limites avec la stratégie OpenLayers.Strategy.Fixed() qui charge simplement tous les objets dans l'​enveloppe de visualisation. Il s'agit alors d'​opter pour des stratégies ​afin d'éviter ces écueils.
  
 <​code>​ <​code>​
Line 220: Line 220:
                 map = new OpenLayers.Map('​map'​);​                 map = new OpenLayers.Map('​map'​);​
                 map.addControl(new OpenLayers.Control.LayerSwitcher());​                 map.addControl(new OpenLayers.Control.LayerSwitcher());​
-                ​+
                 osm = new OpenLayers.Layer.OSM("​Simple OSM Map");                 osm = new OpenLayers.Layer.OSM("​Simple OSM Map");
                 map.addLayer(osm);​                 map.addLayer(osm);​
Line 244: Line 244:
                 height: 100%;                 height: 100%;
             }             }
 +
 +            #info {
 +                position: absolute;
 +                top: 20px;
 +                left: 50px;
 +                background-color:​ white;
 +                border: solid gray 1px;
 +                padding: 5px;
 +                font-size: smaller;
 +                z-index: 1000000000;
 +            }   
         </​style>​         </​style>​
     </​head>​     </​head>​
     <​body>​     <​body>​
         <div id="​map"></​div>​         <div id="​map"></​div>​
 +        <div id="​info"></​div>​
     </​body>​     </​body>​
 </​html>​ </​html>​
Line 257: Line 269:
 </​code>​ </​code>​
   - Modifier la stratégie comme suit :<​code>​   - Modifier la stratégie comme suit :<​code>​
-                strategies: [new OpenLayers.Strategy.BBOX()],</​code>​Tout en naviguant dans la carte, compter les appels au serveur géographique et revérifier le(s) volume(s) des entités géographiques transférées.+                strategies: [new OpenLayers.Strategy.BBOX()],</​code>​et tout en naviguant dans la carte, compter les appels au serveur géographique et revérifier le(s) volume(s) des entités géographiques transférées.
   - Rendre la couche vector invisible au chargement de l'​application en insérant l'​instruction comme indiqué ci-dessous :<​code>​   - Rendre la couche vector invisible au chargement de l'​application en insérant l'​instruction comme indiqué ci-dessous :<​code>​
                 ...                 ...
Line 263: Line 275:
                 map.addLayer(lyr);​                 map.addLayer(lyr);​
                 ...                 ...
-</​code>​de plus ajouter les instructions ci-dessous en fin de fonction //ready// :<​code>​+</​code>​de plusajouter les instructions ci-dessous en fin de fonction //ready// :<​code>​
                 ...                 ...
                 map.myZoom = map.zoomTo;                 map.myZoom = map.zoomTo;
                 map.zoomTo = function(zoom,​ xy) {                 map.zoomTo = function(zoom,​ xy) {
-                    ​console.log(zoom);​ +                    lyr.setVisibility(zoom >= ? true : false);
-                    ​lyr.setVisibility(zoom >= ? true : false);+
                     map.myZoom(zoom,​ xy);                     map.myZoom(zoom,​ xy);
                 };                 };
 </​code>​ </​code>​
-  - Quelles autres stratégies peut-on imaginer pour garder ​une bonne expérience utilisateur ?+  - Quelles autres stratégies peut-on imaginer pour assurer ​une bonne expérience utilisateur ?
  
 ==== Ex7D : contrôles en mode vector ==== ==== Ex7D : contrôles en mode vector ====
- +Le chargement d'​entités géographiques (plutôt que leur représentation graphique image) offre des possibilités d'​interaction plus directe sur les objets vectoriels qui les représentent. Voyons quelques exemples. 
-  - Définir ​les symbolizers //​defaultPoint//​ et //​selectPoint//​ suivant :<​code>​+   
 +__TODO__ 
 +  - Sur la base de Ex7C avec la couche //cities//, définir ​les symbolizers //​defaultPoint//​ et //​selectPoint//​ suivant :<​code>​
                 defaultPoint = new OpenLayers.Symbolizer.Point({                 defaultPoint = new OpenLayers.Symbolizer.Point({
                                             graphicName:​ '​circle',​                                             graphicName:​ '​circle',​
Line 297: Line 310:
                 selectControl.activate();​                 selectControl.activate();​
 </​code>​ </​code>​
-Remarque : dans l'​exemple sur les outils d'​édition ​(dessinon découvre la 3e clé de style //​temporary//​ qui s'​applique ​le temps de l'édition ​d'un objet. +  - Ajouter encore ​les instructions suivantes pour interroger les objets :<​code>​ 
 +                lyr.events.register("​featureselected",​ lyr, function(event
 +                    var feature = event.feature;​ 
 +                    $("#​info"​).html(feature.attributes.wup_aggl);​ 
 +                }); 
 +</code> 
 +  - Faire le nécessaire pour améliorer ​l'interaction utilisateur :  
 +    - afficher aussi le nom du pays dans la boîte ​d'information;​ 
 +    - la boîte doit être vide quand aucun objet n'est sélectionné
 +  - Que peut-on faire avec :<​code>​ 
 +                feature.geometry.getBounds().getCenterLonLat() 
 +</​code>​ et une OpenLayers.Popup http://​dev.openlayers.org/​docs/​files/​OpenLayers/​Popup-js.html ?
 ===== Autres interactions et contrôles ===== ===== Autres interactions et contrôles =====
 +  * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7edes_outils_de_dessin|Des outils de dessin]] 
 +  * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7bmise_en_place_d_un_openlayerscontrolpanel|Mise en place d'un OpenLayers.Control.Panel]]
   * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7aun_premier_exemple_pour_piloter_ces_outils_d_interactions|Un autre exemple pour piloter ces outils d'​interactions]]   * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7aun_premier_exemple_pour_piloter_ces_outils_d_interactions|Un autre exemple pour piloter ces outils d'​interactions]]
-  * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7bmise_en_place_d_un_openlayerscontrolpanel|Mise en place d'un OpenLayers.Control.Panel]] 
-  * [[http://​ogo.heig-vd.ch/​wiki/​doku.php?​id=ogo14:​oltuto#​ex7edes_outils_de_dessin|Des outils de dessin]] 
- 
  
geoinf14/oltuto2.1417967883.txt.gz · Last modified: 2018/05/16 10:05 (external edit)