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:58] adrien [Ex7D : contrôles en mode vector] |
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 1399: | Line 1414: | ||
| style: defaultPoint | style: defaultPoint | ||
| })</code> | })</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({ | + | - 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, | condition: ol.events.condition.pointerMove, | ||
| style: selectPoint | style: selectPoint | ||
| Line 1411: | Line 1426: | ||
| } | } | ||
| })</code> | })</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.1442501919.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
