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:48] 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 1381: | Line 1396: | ||
| | | ||
| __TODO__ | __TODO__ | ||
| - | - Sur la base de Ex7C avec la couche //cities//, définir les styles //defaultPoint// et //selectPoint// suivant :<code>var defaultPoint = new ol.style.Style({ | + | - 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({ | image: new ol.style.Circle({ | ||
| fill:fill, | fill:fill, | ||
| Line 1390: | Line 1407: | ||
| var selectPoint = new ol.style.Style({ | var selectPoint = new ol.style.Style({ | ||
| image: new ol.style.Circle({ | image: new ol.style.Circle({ | ||
| - | fill:hoverFill, | + | selectFill, |
| radius: 6 | 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> | })</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.1442501316.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
