"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
This shows you the differences between two versions of the page.
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 plus, ajouter 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 >= 8 ? true : false); |
- | lyr.setVisibility(zoom >= 6 ? 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 (dessin) on 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]] | ||
- | |||