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
geoinf17:ol3tuto2
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf17:ol3tuto2 [2017/11/29 23:09] oertz [Ex7B : contrôle d'interrogation en mode image (WMS GetFeatureInfo)] |
geoinf17:ol3tuto2 [2018/12/06 21:33] (current) oertz [Ex7C : Interaction sur entités vectors] |
||
|---|---|---|---|
| Line 92: | Line 92: | ||
| - Adapter l'exemple pour que soit automatiquement utilisé comme baselayer une couche Bingmaps dès que le niveau de zoom passe à une échelle plus grande que le niveau 6 (à la http://urbangene.heig-vd.ch). | - Adapter l'exemple pour que soit automatiquement utilisé comme baselayer une couche Bingmaps dès que le niveau de zoom passe à une échelle plus grande que le niveau 6 (à la http://urbangene.heig-vd.ch). | ||
| + | __Résultat__ | ||
| + | http://www.mediamaps.ch/oltuto/Ex7A_4.html | ||
| ==== Ex7B : contrôle d'interrogation en mode image (WMS GetFeatureInfo) ==== | ==== Ex7B : contrôle d'interrogation en mode image (WMS GetFeatureInfo) ==== | ||
| Le gestionnaire d'événements cartographiques va notamment servir à déployer la dernière fonctionnalité de base d'une application de webmapping, celle qui consiste à interroger les objets de la carte. | Le gestionnaire d'événements cartographiques va notamment servir à déployer la dernière fonctionnalité de base d'une application de webmapping, celle qui consiste à interroger les objets de la carte. | ||
| Line 247: | Line 248: | ||
| vectorLayer = new ol.layer.Vector({ | vectorLayer = new ol.layer.Vector({ | ||
| source: new ol.source.Vector({ | source: new ol.source.Vector({ | ||
| - | url: "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", | + | url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", |
| format: new ol.format.GeoJSON() | format: new ol.format.GeoJSON() | ||
| }) | }) | ||
| Line 294: | Line 295: | ||
| __TODO__ | __TODO__ | ||
| - | - Utiliser l'[[http://openlayers.org/en/v3.19.1/apidoc/ol.events.condition.html|ol.events.condition]] qui va bien pour avoir le comportement type "on mouse over". Sans oublier de mettre l'IHM en cohérence. | + | - Utiliser l'[[http://openlayers.org/en/v3.19.1/apidoc/ol.events.condition.html|ol.events.condition]] qui va bien pour avoir le comportement type "on mouse over". Sans oublier de mettre l'IHM en cohérence (voir [[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.Select.Event.html#event:select|ol.interaction.Select.Event]] select). |
| - | - Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. http://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}} | + | - Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. https://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}} |
| - | + | ||
| - | ==== Ex7D : stratégies de chargement vector ==== | + | |
| - | Le chargement en mode vector d'entités géographiques ouvre des possibilités intéressantes en terme d'interaction utilisateur au point d'être tenté de toujours tout charger dans le navigateur. Une telle approche peut s'avérer piégeuse et 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. Des stratégies de chargement peuvent alors s'avérer utiles afin d'éviter des écueils. | + | |
| - | + | ||
| - | Avant d'aller plus loin, charger le **script proxy1.php** dans le dossier php du projet : https://github.com/camel113/geoinf15-ol3/blob/tutoOL3.9.0/php/proxy1.php. | + | |
| - | + | ||
| - | L'exemple ci-dessous utilise la stratégie ol.loadingstrategy.all qui charge simplement tous les objets d'une couche donnée (autrement dit c'est la stratégie "no strategy" !). | + | |
| - | + | ||
| - | <code> | + | |
| - | <html> | + | |
| - | <head> | + | |
| - | <title>Ex7D - Vector overlay loading strategies</title> | + | |
| - | <script type="text/javascript" src="js/config.js"></script> | + | |
| - | <script type="text/javascript"> | + | |
| - | var map; | + | |
| - | $(document).ready(function () { | + | |
| - | map = new ol.Map({ | + | |
| - | target: 'map', | + | |
| - | view: new ol.View({ | + | |
| - | center: ol.proj.transform([8, 47], "EPSG:4326", "EPSG:3857"), | + | |
| - | zoom: 5 | + | |
| - | }) | + | |
| - | }); | + | |
| - | + | ||
| - | var osmLayer = new ol.layer.Tile({ | + | |
| - | source: new ol.source.OSM(), | + | |
| - | opacity: 0.3 | + | |
| - | }); | + | |
| - | map.addLayer(osmLayer); | + | |
| - | + | ||
| - | var vectorSource = new ol.source.Vector({ | + | |
| - | loader: function (extent, resolution, projection) { | + | |
| - | // Web Feature Service parameters | + | |
| - | url = unWFS + "?" + $.param({ | + | |
| - | service: 'WFS', | + | |
| - | version: '1.1.0', | + | |
| - | request: 'GetFeature', | + | |
| - | typename: 'Cities_esri', | + | |
| - | srsname: 'EPSG:3857' | + | |
| - | }); | + | |
| - | + | ||
| - | // Pass it through the proxy | + | |
| - | $.ajax({ | + | |
| - | url: "php/proxy1.php?url=" + url, | + | |
| - | dataType: 'xml', | + | |
| - | success: function (response) { | + | |
| - | var wfsFormat = new ol.format.WFS(); | + | |
| - | vectorSource.addFeatures(wfsFormat.readFeatures(response)); | + | |
| - | }, | + | |
| - | error: function (jqXHR, textStatus, errorThrown) { | + | |
| - | alert("The request has failed: " + textStatus + errorThrown); | + | |
| - | } | + | |
| - | }); | + | |
| - | }, | + | |
| - | strategy: ol.loadingstrategy.all, | + | |
| - | projection: "EPSG:3857" | + | |
| - | }); | + | |
| - | + | ||
| - | var lyr = new ol.layer.Vector({ | + | |
| - | source: vectorSource | + | |
| - | }); | + | |
| - | map.addLayer(lyr); | + | |
| - | }) | + | |
| - | </script> | + | |
| - | + | ||
| - | <style type="text/css"> | + | |
| - | #map { | + | |
| - | width: 100%; | + | |
| - | height: 100%; | + | |
| - | } | + | |
| - | </style> | + | |
| - | </head> | + | |
| - | <body> | + | |
| - | <div id="map"></div> | + | |
| - | <div id="info"></div> | + | |
| - | </body> | + | |
| - | </html> | + | |
| - | </code> | + | |
| - | + | ||
| - | __TODO__ | + | |
| - | - Scruter le flux client/serveur : compter les appels au serveur géographique et vérifier le(s) volume(s) des entités géographiques transférées | + | |
| - | - Modifier la stratégie comme suit :<code>ol.loadingstrategy.bbox</code>ajouter le paramètre suivant aux paramètres Web Feature Service<code>bbox: extent.join(',') + ',EPSG:3857'</code>Tout en naviguant dans la carte, rescruter le flux client/serveur. | + | |
| - | + | ||
| - | ==== Pour aller plus loin ... ==== | + | |
| - | Quelques autres stratégies qui cherchent à contrôler le flux client/serveur et l'expérience utilisateur selon les besoins d'interactivité de l'interface homme-machine : | + | |
| - | * Scalable interactions : https://www.mapbox.com/help/an-open-platform/#scalable-interactions (tester avec : http://bit.ly/1HNgHrp) | + | |
| - | * Vector tiles : https://en.wikipedia.org/wiki/Vector_tiles | + | |
| - | + | ||
| - | + | ||
geoinf17/ol3tuto2.1511993370.txt.gz · Last modified: 2018/05/16 10:05 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
