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
geoinf16:ol3tuto2
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf16:ol3tuto2 [2016/11/09 21:32] oertz [Ex7C : Interaction sur entités vectors] |
geoinf16:ol3tuto2 [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Workshop OpenLayers (2016, part 2) ====== | ====== Workshop OpenLayers (2016, part 2) ====== | ||
| ===== 7. Contrôles et interactions ===== | ===== 7. Contrôles et interactions ===== | ||
| - | OpenLayers offre un ensemble de fonctionnalités permettant d'interagir avec la carte. Par défaut, les interactions de zoom et pan sont actives mais il en existe d'autres ([[http://openlayers.org/en/v3.9.0/apidoc/ol.control.html?unstable=true|ol.control]]). En plus de la gestion événementielle offerte par ces contrôleurs, OpenLayers permet d'enregistrer des écouteurs sur de nombreux événements. Maintenant que les techniques de visualisation cartographique sont maîtrisées, tant côté serveur que client, il s'agit de découvrir comment interagir avec les objets géographiques représentés. | + | OpenLayers offre un ensemble de fonctionnalités permettant d'interagir avec la carte. Par défaut, les interactions de zoom et pan sont actives mais il en existe d'autres ([[http://openlayers.org/en/v3.9.0/apidoc/ol.control.html?unstable=true|ol.control]]). En plus de la gestion événementielle offerte par ces contrôleurs, OpenLayers permet d'enregistrer des écouteurs sur de nombreux événements. Maintenant que les techniques de visualisation cartographique sont maîtrisées, tant côté serveur que client, il s'agit de découvrir comment interagir avec la carte, ses couches et les objets géographiques représentés. |
| ==== Ex7A : découverte de la gestion événementielle cartographique ==== | ==== Ex7A : découverte de la gestion événementielle cartographique ==== | ||
| - | Cet exemple démontre qu'il est nécessaire qu'un gestionnaire s'occupe spécifiquement d'évenements cartographiques comme ceux en lien avec la vie d'un ol.Map (voir [[http://openlayers.org/en/v3.19.1/apidoc/ol.MapBrowserEvent.html?unstable=true#event:click|ol.MapBrowserEvents]]) ou ceux relatifs à la vie d'une [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html|ol.layer.Vector]]. | + | Cet exemple démontre qu'il est nécessaire qu'un gestionnaire s'occupe spécifiquement d'évenements cartographiques comme ceux en lien avec la vie d'un ol.Map (voir [[http://openlayers.org/en/v3.19.1/apidoc/ol.MapBrowserEvent.html?unstable=true#event:click|ol.MapBrowserEvents]]) ou ceux relatifs à la vie d'une [[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.Vector.html|ol.layer.Vector]], d'une [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.Vector.html|ol.source.Vector]], etc. |
| On reprend ici l'exemple 5A : | On reprend ici l'exemple 5A : | ||
| Line 95: | Line 95: | ||
| ==== 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. | ||
| - | |||
| - | :!: Avant tout, veillez à mettre à jour votre **config.js** à partir de la dernière version de l'archive {{:geoinf16:geoinf16-ol3.zip|}} (celle-ci ajoute le serveur http://geoteach.heig-vd.ch:8080/geoserver/geoinfo/wms) | ||
| Cet exemple illustre l'interrogation des objets de la carte par le simple clic d'un pixel sur la carte. On enregistre un écouteur sur la map à l'aide de la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.Map.html?unstable=true#on|ol.Map.on]] afin d'exécuter du code lors d'un click sur la map. On utilise ensuite la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.ImageWMS.html?unstable=true#getGetFeatureInfoUrl|ol.source.ImageWMS.getGetFeatureInfoUrl]] pour construire l'URL qui permet d'interroger le WMS. Enfin, la fonction //getFeatureInfo(url)// permet d'envoyer une requête au serveur WMS à l'aide de l'URL précédemment construite. C'est l'équivalent bien mieux structuré que http://www.mediamaps.ch/oltuto/Ex0c_navmap.html. | Cet exemple illustre l'interrogation des objets de la carte par le simple clic d'un pixel sur la carte. On enregistre un écouteur sur la map à l'aide de la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.Map.html?unstable=true#on|ol.Map.on]] afin d'exécuter du code lors d'un click sur la map. On utilise ensuite la méthode [[http://openlayers.org/en/v3.19.1/apidoc/ol.source.ImageWMS.html?unstable=true#getGetFeatureInfoUrl|ol.source.ImageWMS.getGetFeatureInfoUrl]] pour construire l'URL qui permet d'interroger le WMS. Enfin, la fonction //getFeatureInfo(url)// permet d'envoyer une requête au serveur WMS à l'aide de l'URL précédemment construite. C'est l'équivalent bien mieux structuré que http://www.mediamaps.ch/oltuto/Ex0c_navmap.html. | ||
| Line 247: | Line 245: | ||
| ==== Ex7C : Interaction sur entités vectors ==== | ==== Ex7C : Interaction sur entités vectors ==== | ||
| - | Après les utilisations possibles pour interagir avec les entités représentées par les services cartographiques, voyons comme intergir directement avec les entités vectors "vivantes" client-side. On tulise pour cela le concept d'[[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.html?unstable=true|ol.interaction]], notamment [[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.Select.html?unstable=true|ol.interaction.Select]]. | + | Après les utilisations possibles pour interagir avec les entités représentées par les services cartographiques, voyons comme interagir directement avec les entités vectors "vivantes" client-side. On tulise pour cela le concept d'[[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.html?unstable=true|ol.interaction]], notamment [[http://openlayers.org/en/v3.19.1/apidoc/ol.interaction.Select.html?unstable=true|ol.interaction.Select]]. |
| <code> | <code> | ||
| Line 318: | Line 316: | ||
| __TODO__ | __TODO__ | ||
| - | - Utiliser un autre [[http://openlayers.org/en/v3.19.1/apidoc/ol.events.condition.html|ol.events.condition]] pour avoir le comportement type "on mouse over". 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. |
| - 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. http://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}} | ||
| ==== Ex7D : stratégies de chargement vector ==== | ==== Ex7D : stratégies de chargement vector ==== | ||
| - | Le chargement en mode vector d'entités géographiques ouvre des possibilités intéressantes en termme 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. | + | 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. | 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. | ||
geoinf16/ol3tuto2.1478723571.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
