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
geoinf14:oltuto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf14:oltuto [2014/11/30 22:26] oertz [1. Les bases] |
geoinf14:oltuto [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 9: | Line 9: | ||
| var myWFS = "https://eu1.mapcentia.com/wfs/oertz/public/4326"; | var myWFS = "https://eu1.mapcentia.com/wfs/oertz/public/4326"; | ||
| </code> | </code> | ||
| - | * Il faut alors **utiliser ce {{:geoinf14:proxy_2.php.zip|proxy_2.php}}** qui fonctionne aussi avec des requêtes HTTPS | + | * Il faut alors **utiliser ce {{:geoinf14:proxy_2.php.zip|proxy_2.php}}** qui fonctionne aussi avec des requêtes HTTPS et qui est **à utiliser dans js/config.js**. |
| - | * A noter ceci qui pourra être très utile : [[http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers-js.html|OpenLayers API docs]], [[http://openlayers.org/dev/examples/|OpenLayers examples]] | + | * A noter pour la suite, ceci qui pourra être très utile : [[http://dev.openlayers.org/docs|OpenLayers API docs]], [[http://dev.openlayers.org/examples|OpenLayers examples]] |
| ==== Ex1A : créer une carte, un premier exemple pour comprendre ==== | ==== Ex1A : créer une carte, un premier exemple pour comprendre ==== | ||
| Line 400: | Line 400: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| + | __TODO__ | ||
| - Modifier le nécessaire de ci-dessus pour créer une application geoweb utilisant votre style MapBox. | - Modifier le nécessaire de ci-dessus pour créer une application geoweb utilisant votre style MapBox. | ||
| ===== 4. Composition de couches ===== | ===== 4. Composition de couches ===== | ||
| Line 461: | Line 462: | ||
| $(document).ready(function(){ | $(document).ready(function(){ | ||
| map = new OpenLayers.Map('map'); | map = new OpenLayers.Map('map'); | ||
| - | map.addControl(new OpenLayers.Control.LayerSwitcher()); | + | map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); |
| | | ||
| world = new OpenLayers.Layer.WMS( | world = new OpenLayers.Layer.WMS( | ||
| Line 467: | Line 468: | ||
| myWMS, | myWMS, | ||
| { | { | ||
| - | layers: 'ogo:world_simple', | + | layers: 'public.world_simple', |
| - | styles: 'giant_polygon', | + | |
| format: 'image/png' | format: 'image/png' | ||
| }, { singleTile: true } | }, { singleTile: true } | ||
| ); | ); | ||
| - | map.addLayer(world); | + | |
| | | ||
| cities = new OpenLayers.Layer.WMS( | cities = new OpenLayers.Layer.WMS( | ||
| Line 478: | Line 478: | ||
| myWMS, | myWMS, | ||
| { | { | ||
| - | layers: 'ogo:cities', | + | layers: 'public.cities', |
| - | styles: 'capitals', | + | |
| format: 'image/png' | format: 'image/png' | ||
| - | }, { singleTile: true } | + | }, { singleTile: true,isBaseLayer:false } |
| ); | ); | ||
| + | map.addLayer(world); | ||
| map.addLayer(cities); | map.addLayer(cities); | ||
| + | |||
| map.setCenter(new OpenLayers.LonLat(7, 47), 5); | map.setCenter(new OpenLayers.LonLat(7, 47), 5); | ||
| }); | }); | ||
| Line 498: | Line 499: | ||
| <div id="map"></div> | <div id="map"></div> | ||
| </body> | </body> | ||
| - | </html> | + | </html>> |
| </code> | </code> | ||
| Line 509: | Line 510: | ||
| - Ajouter en superposition votre style MapBox représentant les communes de Suisse (cf. Ex3C - Introduction) comme ci-dessous : \\ \\ Illustration du résultat attendu : {{:geoinf14:communes-overlay.png?200|}} | - Ajouter en superposition votre style MapBox représentant les communes de Suisse (cf. Ex3C - Introduction) comme ci-dessous : \\ \\ Illustration du résultat attendu : {{:geoinf14:communes-overlay.png?200|}} | ||
| - Remplacer la couche de base Google Maps par la couche MapBox //examples.map-i86nkdio// | - Remplacer la couche de base Google Maps par la couche MapBox //examples.map-i86nkdio// | ||
| + | |||
| + | Corrigé : http://ogo.heig-vd.ch/ol2014/Ex4B_3.html | ||
| ==== Ex4C : On-the-fly CartoCSS with CartoDB ==== | ==== Ex4C : On-the-fly CartoCSS with CartoDB ==== | ||
| Line 566: | Line 569: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| + | __TODO__ | ||
| - Adapter le style pour afficher les districts Vaudois différemment des autres (utiliser l'attribut //ak// avec sa valeur //'VD'//) | - Adapter le style pour afficher les districts Vaudois différemment des autres (utiliser l'attribut //ak// avec sa valeur //'VD'//) | ||
| - | - Adapter l'application pour que le style CartoCSS soit chargé asynchronnement depuis un fichier //monStyle.mss//. | + | - Adapter l'application pour que le style CartoCSS soit chargé synchronnement depuis un fichier //monStyle.mss//. |
| ===== 5. Couche "vector" ===== | ===== 5. Couche "vector" ===== | ||
| Dans les sections précédentes nous avons inséré des couches cartographique sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire. | Dans les sections précédentes nous avons inséré des couches cartographique sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire. | ||
| Line 619: | Line 623: | ||
| http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson | http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson | ||
| </code>Pourquoi cela ne fonctionne pas ? ... | </code>Pourquoi cela ne fonctionne pas ? ... | ||
| - | - Dans une div HTML, afficher la liste des descriptions des séismes | + | - Dans une div HTML, afficher la liste des descriptions des séismes --> corrigé : http://ogo.heig-vd.ch/ol2014/0Ex5A.html |
| - Modifier le paramètre //protocol// comme suit :<code> | - Modifier le paramètre //protocol// comme suit :<code> | ||
| protocol: new OpenLayers.Protocol.HTTP({ | protocol: new OpenLayers.Protocol.HTTP({ | ||
| Line 631: | Line 635: | ||
| - | ==== Ex5B : OpenLayer.Layer.Vector sous la loupe ==== | + | ==== Ex5B : OpenLayers.Layer.Vector sous la loupe ==== |
| - | L'exemple ci-dessous décrit en détail ce qu'est une couche OpenLayer.Layer.Vector en montrant comment la créer et l'alimenter à partir d'un format de source de données "fait maison". | + | L'exemple ci-dessous décrit en détail ce qu'est une couche OpenLayers.Layer.Vector en montrant comment la créer et l'alimenter à partir d'un format de source de données "fait maison". |
| - | En résumé, une couche [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Layer/Vector-js.html|OpenLayer.Layer.Vector]] est composée d'entités géographiques ([[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector|OpenLayers.Feature.Vector]]) chacune composée d'une géométrie (ex. [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Geometry/Point-js.html|OpenLayers.Geometry.Point]]) et d'une liste d'attributs. | + | En résumé, une couche [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Layer/Vector-js.html|OpenLayers.Layer.Vector]] est composée d'entités géographiques ([[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector|OpenLayers.Feature.Vector]]) chacune composée d'une géométrie (ex. [[http://dev.openlayers.org/releases/OpenLayers-2.13/doc/apidocs/files/OpenLayers/Geometry/Point-js.html|OpenLayers.Geometry.Point]]) et d'une liste d'attributs. |
| La source de données est un fichier texte formaté comme suit: | La source de données est un fichier texte formaté comme suit: | ||
| Line 682: | Line 686: | ||
| // on construit et ajoute au tableau une feature composé d'une géométrie (ici Point) | // on construit et ajoute au tableau une feature composé d'une géométrie (ici Point) | ||
| ptGeom = new OpenLayers.Geometry.Point(tabCapital[0],tabCapital[1]); | ptGeom = new OpenLayers.Geometry.Point(tabCapital[0],tabCapital[1]); | ||
| - | ptGeom = ptGeom.transform("EPSG:4326", "EPSG:900913"); | + | ptGeom = ptGeom.transform("EPSG:4326", "EPSG:3857"); |
| // que le constructeur utilise pour alimenter la propriété feature.geometry | // que le constructeur utilise pour alimenter la propriété feature.geometry | ||
| features[i] = new OpenLayers.Feature.Vector(ptGeom); | features[i] = new OpenLayers.Feature.Vector(ptGeom); | ||
| // et d'un tableau asssociatif feature.attributes pour chaque attribut à y associer (ici un seul, nom) | // et d'un tableau asssociatif feature.attributes pour chaque attribut à y associer (ici un seul, nom) | ||
| - | features[i].attributes["nom"] = tabCapital[2]; | + | features[i].attributes.nom = tabCapital[2]; |
| } | } | ||
| // le tableau est ajouté à la couche pour afficher les entités | // le tableau est ajouté à la couche pour afficher les entités | ||
| Line 707: | Line 711: | ||
| __TODO__ | __TODO__ | ||
| - | - Inspecter l'objet OpenLayers qui gère la persistence de ces entités géographiques persistentes côté client (ex. avec Firebug) | + | - Inspecter l'objet OpenLayers qui gère la persistence de ces entités géographiques côté client (ex. avec Firebug) |
| - | - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :<code>2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Germany,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain</code> | + | - Adapter le code pour une source de données similaire contenant un attribut de plus comme suit :<code>2.3332999999999999 48.866700000000002 Paris France,7.4333 46.950000000000003 Bern Suisse,12.5 41.883299999999998 Rome Italy,-3.71 40.409999999999997 Madrid Spain</code> |
| - et réinspecter pour vérifier. | - et réinspecter pour vérifier. | ||
| ===== 6. Style "vector" ===== | ===== 6. Style "vector" ===== | ||
geoinf14/oltuto.1417382805.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
