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
geoinf15:oltuto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf15:oltuto [2015/09/17 16:27] adrien [Ex7B : un contrôle d'interrogation image fait maison] |
geoinf15:oltuto [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 67: | Line 67: | ||
| - Ajoutez la CSS ci-dessous | - Ajoutez la CSS ci-dessous | ||
| <code> | <code> | ||
| + | .ol-zoom:hover { | ||
| + | background: lightskyblue; | ||
| + | } | ||
| + | |||
| .ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out { | .ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out { | ||
| background-color: tomato; | background-color: tomato; | ||
| Line 337: | Line 341: | ||
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | ||
| xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"> | xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"> | ||
| - | <TypeName>world_simple</TypeName> | + | <TypeName>geoinf:world_simple</TypeName> |
| </DescribeFeatureType> | </DescribeFeatureType> | ||
| </code>puis lancer<code> | </code>puis lancer<code> | ||
| Line 345: | Line 349: | ||
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | ||
| xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"> | xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"> | ||
| - | <Query typeName="world_simple"> | + | <Query typeName="geoinf:world_simple"> |
| - | <PropertyName>region</PropertyName> | + | <PropertyName>REGION</PropertyName> |
| </Query> | </Query> | ||
| </GetFeature> | </GetFeature> | ||
| Line 475: | Line 479: | ||
| - Trouver un tel type d'assemblage parmi les [[https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes|Basic Map Types]] de l'API Google Maps. | - Trouver un tel type d'assemblage parmi les [[https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes|Basic Map Types]] de l'API Google Maps. | ||
| ==== Ex4B : Composition "client-side" ==== | ==== Ex4B : Composition "client-side" ==== | ||
| - | Un cadre applicatif de cartographie en ligne se doit de fournir la capacité de gérer la composition côté client. C'est le cas d'OpenLayers comme ci-dessous : | + | Un cadre applicatif de cartographie en ligne se doit de fournir la capacité de gérer la composition côté client. Openlayers 3 ne fournit [[https://twitter.com/RemiBovard/status/525028570780139520|pour l'instant pas]] d'outils pour gérer cela. Toutefois il existe des //controls// développé en externe comme [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] utilisé dans l'exemple ci-dessous : |
| <code> | <code> | ||
| <html> | <html> | ||
| <head> | <head> | ||
| - | <title>ol3 - Ex4A - one WMS request for two layers</title> | + | <title>ol3 - Ex4B - two WMS base layers</title> |
| <script type="text/javascript" src="js/config.js"></script> | <script type="text/javascript" src="js/config.js"></script> | ||
| <link rel="stylesheet" href="lib/layerswitcher/ol3-layerswitcher.css" type="text/css"> | <link rel="stylesheet" href="lib/layerswitcher/ol3-layerswitcher.css" type="text/css"> | ||
| Line 489: | Line 493: | ||
| target: 'map', | target: 'map', | ||
| layers: [ | layers: [ | ||
| - | new ol.layer.Image({ | + | new ol.layer.Group({ |
| 'title': 'Base maps', | 'title': 'Base maps', | ||
| - | source: new ol.source.ImageWMS({ | + | layers: [ |
| - | url: "https://eu1.mapcentia.com/wms/oertz/public", | + | new ol.layer.Image({ |
| - | title: 'World simple', | + | 'type': 'base', |
| - | type:'base', | + | 'title': 'Base maps', |
| - | params:{ | + | source: new ol.source.ImageWMS({ |
| - | VERSION: "1.1.1", | + | url: "https://eu1.mapcentia.com/wms/oertz/public", |
| - | LAYERS: 'public.world_simple', | + | title: 'World simple', |
| - | FORMAT: 'image/png' | + | type:'base', |
| - | } | + | params:{ |
| - | }) | + | VERSION: "1.1.1", |
| + | LAYERS: 'public.world_simple', | ||
| + | FORMAT: 'image/png' | ||
| + | } | ||
| + | }) | ||
| + | }) | ||
| + | ] | ||
| }), | }), | ||
| - | new ol.layer.Image({ | + | new ol.layer.Group({ |
| - | title: 'Cities', | + | 'title': 'Overlays', |
| - | source: new ol.source.ImageWMS({ | + | layers: [ |
| - | url: "https://eu1.mapcentia.com/wms/oertz/public", | + | new ol.layer.Image({ |
| - | params:{ | + | title: 'Cities', |
| - | VERSION: "1.1.1", | + | source: new ol.source.ImageWMS({ |
| - | LAYERS: 'public.cities', | + | url: "https://eu1.mapcentia.com/wms/oertz/public", |
| - | FORMAT: 'image/png' | + | params:{ |
| - | } | + | VERSION: "1.1.1", |
| - | }) | + | LAYERS: 'public.cities', |
| + | FORMAT: 'image/png' | ||
| + | } | ||
| + | }) | ||
| + | }) | ||
| + | ] | ||
| }) | }) | ||
| ] | ] | ||
| Line 1281: | Line 1296: | ||
| }) | }) | ||
| map.addInteraction(selectPointerMove) | map.addInteraction(selectPointerMove) | ||
| - | </code> | + | </code>Les [[http://openlayers.org/en/master/apidoc/ol.interaction.html|interactions]] permettent de récupérer et d'exploiter des actions déclenchées par l'utilisateur (via son clavier ou sa souris). Ces actions peuvent ensuite être utilisées pour modifier les différents éléments sur la map ou la map elle même. Dans notre cas, notre interaction permet de sélectionner (ol.interaction.Select) les features de notre carte au passage de la souris (condition: ol.events.condition.pointerMove) sur celles-ci. |
| - Enregistrer un écouteur sur le bon événement pour vider la <div> //info// quand le curseur sort d'un //feature//. | - Enregistrer un écouteur sur le bon événement pour vider la <div> //info// quand le curseur sort d'un //feature//. | ||
| - | |||
| ==== Ex7C : stratégies de chargement en mode vector ==== | ==== Ex7C : stratégies de chargement en mode vector ==== | ||
| 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. | ||
| Line 1377: | Line 1391: | ||
| })</code> | })</code> | ||
| - Quelles autres stratégies peut-on imaginer pour assurer 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 ==== | ||
| + | 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. | ||
| + | | ||
| + | __TODO__ | ||
| + | - Sur la base de Ex7C avec la couche //cities//, définir les styles //defaultPoint// et //selectPoint// suivant :<code>var fill = new ol.style.Fill({color: 'rgba(0,0,255,0.6)'}); | ||
| + | var selectFill = new ol.style.Fill({color: 'rgba(255,0,0,0.6)'}); | ||
| + | var defaultPoint = new ol.style.Style({ | ||
| + | image: new ol.style.Circle({ | ||
| + | fill:fill, | ||
| + | radius: 6 | ||
| + | }) | ||
| + | }) | ||
| + | |||
| + | var selectPoint = new ol.style.Style({ | ||
| + | image: new ol.style.Circle({ | ||
| + | selectFill, | ||
| + | radius: 6 | ||
| + | }) | ||
| + | })</code>puis les connecter en ajoutant un //styleMap// sur la couche Vector comme suit :<code>var lyr = new ol.layer.Vector({ | ||
| + | source: vectorSource, | ||
| + | style: defaultPoint | ||
| + | })</code> | ||
| + | - Puis ajouter une interaction afin d'interroger les objets et changer leur style au passage de la souris<code>var selectPointerMove = new ol.interaction.Select({ | ||
| + | condition: ol.events.condition.pointerMove, | ||
| + | style: selectPoint | ||
| + | }); | ||
| + | |||
| + | map.addInteraction(selectPointerMove) | ||
| + | |||
| + | selectPointerMove.on('select',function(e){ | ||
| + | if(e.target.getFeatures().getLength() > 0){ | ||
| + | $("#info").html(e.target.getFeatures().item(0).get('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é. | ||
| + | - Tenter d'afficher un popup au passage du curseur sur les objets. Les classes et méthodes suivants peuvent être utiles:<code>ol.Overlay(...)</code><code>feature.getGeometry().getCoordinates()</code><code>map.addOverlay(...)</code> | ||
geoinf15/oltuto.1442500076.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
