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/12/02 14:01] oertz [1. Les bases] |
geoinf14:oltuto [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 10: | Line 10: | ||
| </code> | </code> | ||
| * 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**. | * 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 pour la suite, 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://dev.openlayers.org/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 462: | 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 472: | Line 472: | ||
| }, { singleTile: true } | }, { singleTile: true } | ||
| ); | ); | ||
| - | map.addLayer(world); | + | |
| | | ||
| cities = new OpenLayers.Layer.WMS( | cities = new OpenLayers.Layer.WMS( | ||
| Line 480: | Line 480: | ||
| layers: 'public.cities', | layers: 'public.cities', | ||
| 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 497: | Line 499: | ||
| <div id="map"></div> | <div id="map"></div> | ||
| </body> | </body> | ||
| - | </html> | + | </html>> |
| </code> | </code> | ||
| Line 621: | 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 633: | 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 684: | 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 709: | 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.1417525271.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
