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:ol3tuto
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
geoinf15:ol3tuto [2016/01/09 16:12] oertz [Ex2B : ol.source.BingMaps] |
geoinf15:ol3tuto [2018/05/16 10:05] (current) |
||
|---|---|---|---|
| Line 63: | Line 63: | ||
| * OpenLayers est accompagné de nombreuses prédéfinitions de déclarations CSS | * OpenLayers est accompagné de nombreuses prédéfinitions de déclarations CSS | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx1A.html | + | __TODO__ |
| - Où sont-elles décrites ? | - Où sont-elles décrites ? | ||
| - Trouvez celles qui habillent les boutons zoomin/zoomout ! | - Trouvez celles qui habillent les boutons zoomin/zoomout ! | ||
| Line 85: | Line 85: | ||
| * La méthode //[[http://openlayers.org/en/v3.9.0/apidoc/ol.View.html#fit|fit]]// termine l'initialisation en calculant l'enveloppe géographique de visualisation | * La méthode //[[http://openlayers.org/en/v3.9.0/apidoc/ol.View.html#fit|fit]]// termine l'initialisation en calculant l'enveloppe géographique de visualisation | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx1A.html | + | __TODO__ |
| - Modifier le système de projection avec la projection dite Mercator comme suit<code> | - Modifier le système de projection avec la projection dite Mercator comme suit<code> | ||
| var v0 = new ol.View({projection: "EPSG:3857"}); | var v0 = new ol.View({projection: "EPSG:3857"}); | ||
| Line 158: | Line 158: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx2A.html | + | __TODO__ |
| - Modifier le centrage et le zoom de la carte comme suit :<code> | - Modifier le centrage et le zoom de la carte comme suit :<code> | ||
| //map.getView().fit(extent, map.getSize()); | //map.getView().fit(extent, map.getSize()); | ||
| Line 202: | Line 202: | ||
| L'utilisation d'un cache serveur de tuiles a largement été popularisé par des services propriétaires comme Bing Maps. OpenLayers étant indépendant de toute source de données, l'API offre également un type de couche pour dialoguer avec de tels services. | L'utilisation d'un cache serveur de tuiles a largement été popularisé par des services propriétaires comme Bing Maps. OpenLayers étant indépendant de toute source de données, l'API offre également un type de couche pour dialoguer avec de tels services. | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx2B.html | + | __TODO__ |
| - Partir de l'état initial de l'exemple précédent en adaptant le code JavaScript comme suit :<code> | - Partir de l'état initial de l'exemple précédent en adaptant le code JavaScript comme suit :<code> | ||
| map = new ol.Map({ | map = new ol.Map({ | ||
| Line 209: | Line 209: | ||
| new ol.layer.Tile({ | new ol.layer.Tile({ | ||
| source: new ol.source.BingMaps({ | source: new ol.source.BingMaps({ | ||
| - | key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', | + | key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz', |
| imagerySet: 'AerialWithLabels' | imagerySet: 'AerialWithLabels' | ||
| }) | }) | ||
| Line 223: | Line 223: | ||
| ==== Ex2C : OpenLayers.Layer.WMTS ==== | ==== Ex2C : OpenLayers.Layer.WMTS ==== | ||
| - | Swisstopo offre un [[http://api3.geo.admin.ch/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit. | + | Swisstopo offre un [[http://api3.geo.admin.ch/services/sdiservices.html#wmts|service de tuiles basé sur le standard WMTS]] et que l'on peut exploiter comme suit. => http://ogo.heig-vd.ch/oltuto/tutoEx2C.html |
| <code> | <code> | ||
| Line 327: | Line 327: | ||
| </code> | </code> | ||
| __TODO__ | __TODO__ | ||
| - | - Remplacer le paramètre LAYERS par le paramètre comme ci-dessous :<code> | + | - Ajouter le paramètre SLD ci-dessous :<code> |
| SLD: 'http://www.mediamaps.ch/oltuto/sld/pinkWorld.sld.xml' | SLD: 'http://www.mediamaps.ch/oltuto/sld/pinkWorld.sld.xml' | ||
| </code> | </code> | ||
| - | - Avec Firefox RESTClient (ou autre équivalent), lancer la requête POST suivante sur le serveur WMS //myOWS// :<code> | + | - Avec Firefox RESTClient (ou autre équivalent), lancer la requête POST suivante sur le serveur WMS //mcWMS// :<code> |
| <?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||
| <DescribeFeatureType version="1.1.0" service="WFS" | <DescribeFeatureType version="1.1.0" service="WFS" | ||
| Line 431: | Line 431: | ||
| __TODO__ | __TODO__ | ||
| - Modifier le code nécessaire ci-dessus pour créer une application de webmapping utilisant votre style MapBox. | - Modifier le code nécessaire ci-dessus pour créer une application de webmapping utilisant votre style MapBox. | ||
| - | |||
| - | === Corrigés des exercices MapBox/CartoCSS === | ||
| - | == Ex1: == | ||
| - | - Dans la sidebar Layers du studio on découvre qu'il y a effectivement une couche de géodonnées nommé building. Définissons un style pour représenter ses entités :<code> | ||
| - | #building { | ||
| - | polygon-fill: #c1b0ad; | ||
| - | }</code> | ||
| - | - On voit que la couche landuse dispose d'une propriété class dont l'une des valeurs peut être 'parks'. Définissons un style ne représentant que ces parcs :<code> | ||
| - | #landuse[class='parks'] { | ||
| - | polygon-fill: #6db569; | ||
| - | }</code> | ||
| - | - La couche poi_label a une propriété name qui sert d'étiquette :<code> | ||
| - | #poi_label[zoom>=19] { | ||
| - | text-name: '[name]'; | ||
| - | text-face-name: @sans_bold; | ||
| - | text-size: 14; | ||
| - | }</code> | ||
| - | - Ce sont les couches road, tunnel et bridge qui vous servir comme suit :<code> | ||
| - | #road, | ||
| - | #bridge, | ||
| - | #tunnel { | ||
| - | [class='motorway'],[class='motorway_link'] { | ||
| - | line-color: #fc8; | ||
| - | line-width: 3px; | ||
| - | } | ||
| - | }</code> | ||
| - | == Ex2: == | ||
| - | En utilisant les couches liés aux "thèmes" mapbox.mapbox-terrain-v1 et mapbox.mapbox-streets-v5, on ajoute aux layers de l'exercice 1 les couches hillshade, (?) et contour. On représente les courbes de niveaux de cette dernière comme suit :<code> | ||
| - | #contour[zoom>=14] { | ||
| - | line-color: #b7b7b7; | ||
| - | line-width: 1; | ||
| - | text-name: '[ele]'; | ||
| - | text-face-name: @sans; | ||
| - | text-fill: #838383; | ||
| - | text-size: 12; | ||
| - | text-placement: line; | ||
| - | [index=5],[index=10] { | ||
| - | line-width: 3; | ||
| - | } | ||
| - | }</code> | ||
| - | |||
| - | == Ex3: == | ||
| - | Le chargement de la source de géodonnées "dans MapBox" démarre une phase de découpage des données en tuiles vectoriels selon une pyramide de tuiles. Il ne reste donc plus qu'à habiller ces tuiles vectoriels avec un style pour produire les tuiles images qui sont demandées à la volée par les clients cartographiques. | ||
| - | |||
| - | == Ex4: == | ||
| - | Après initialisation d'un nouveau style par la composition des couches des thèmes mapbox.mapboxstreets-v5 + oertz.0cf75151, on peut construire le style "by night" suivant : {{:geoinf15:style.mss.zip|style.mss}} | ||
| - | |||
| ===== 4. Composition de couches ===== | ===== 4. Composition de couches ===== | ||
| - | |||
| - | |||
| ==== Ex4A : Composition "server-side" ==== | ==== Ex4A : Composition "server-side" ==== | ||
| La composition peut se faire par un assemblage côté serveur. Ci-dessous un assemblage "à la demande". Notez bien, plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons. | La composition peut se faire par un assemblage côté serveur. Ci-dessous un assemblage "à la demande". Notez bien, plus il y a de couches disponibles sur le serveur cartographique, plus il y a de combinaisons. | ||
geoinf15/ol3tuto.1452352347.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
