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 17:18] oertz [Ex6B : Style de couche] |
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 326: | Line 326: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx3A.html | + | __TODO__ |
| - Ajouter le paramètre SLD 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' | ||
| 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. | ||
| Line 525: | Line 476: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx4A.html | + | __TODO__ |
| - Apporter la preuve que l'assemblage s'est fait côté serveur | - Apporter la preuve que l'assemblage s'est fait côté serveur | ||
| - Quel intérêt à utiliser cette technique ? Quels inconvénients ? Utilise-t-on tout le potentiel d'un client navigateur pour faciliter la composition "à la demande" par l'utilisateur ? | - Quel intérêt à utiliser cette technique ? Quels inconvénients ? Utilise-t-on tout le potentiel d'un client navigateur pour faciliter la composition "à la demande" par l'utilisateur ? | ||
| Line 583: | Line 534: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx4B.html | + | __TODO__ |
| - Apporter la preuve que l'assemblage s'est fait côté client. | - Apporter la preuve que l'assemblage s'est fait côté client. | ||
| - Analyser les paramètres WMS. Lequel représente l'indispensable capacité "server-side" pour la superposition ? Que constate-t-on aussi et plus généralement par rapport à ce paramètre ? | - Analyser les paramètres WMS. Lequel représente l'indispensable capacité "server-side" pour la superposition ? Que constate-t-on aussi et plus généralement par rapport à ce paramètre ? | ||
| Line 745: | Line 696: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx4C.html | + | __TODO__ |
| - Analyser le code ci-dessus et identifier la principale capacité "client-side" sur laquelle repose ce LayerSwitcher. | - Analyser le code ci-dessus et identifier la principale capacité "client-side" sur laquelle repose ce LayerSwitcher. | ||
| - Adapter le code pour ajouter un choix de baselayer supplémentaire basé sur la couche OSM suivante :<code> | - Adapter le code pour ajouter un choix de baselayer supplémentaire basé sur la couche OSM suivante :<code> | ||
| Line 841: | Line 792: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx4D.html | + | __TODO__ |
| - Comment fonctionne ce [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] ? (remarquez quelques nouvelles propriétés intéressantes sur ol.layer). | - Comment fonctionne ce [[https://github.com/walkermatt/ol3-layerswitcher|ol3-layerswitcher]] ? (remarquez quelques nouvelles propriétés intéressantes sur ol.layer). | ||
| - Ajouter une baselayer sur un base Bing Maps comme vu à l'Ex2B (ex. Aerial) | - Ajouter une baselayer sur un base Bing Maps comme vu à l'Ex2B (ex. Aerial) | ||
| Line 912: | Line 863: | ||
| </html> | </html> | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx4E.html | + | __TODO__ |
| - Adapter le style pour afficher les districts Vaudois différemment des autres (à savoir : la structure des géodonnées de la table //g4districts98// possède un attribut //ak// dont la valeur est //'VD'// pour les entités vaudoises) | - Adapter le style pour afficher les districts Vaudois différemment des autres (à savoir : la structure des géodonnées de la table //g4districts98// possède un attribut //ak// dont la valeur est //'VD'// pour les entités vaudoises) | ||
| - Pour une solution encore plus découplée et flexible, adapter l'application pour que le style CartoCSS soit chargé (a)synchronnement depuis un fichier //g4districts.mss// (on proclame le suffixe mss signifiant Map Style Sheet). | - Pour une solution encore plus découplée et flexible, adapter l'application pour que le style CartoCSS soit chargé (a)synchronnement depuis un fichier //g4districts.mss// (on proclame le suffixe mss signifiant Map Style Sheet). | ||
| Line 965: | Line 916: | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx5A.html | + | __TODO__ |
| - Apporter la preuve que les données sont bien transformées en objets graphiques côté client ! | - Apporter la preuve que les données sont bien transformées en objets graphiques côté client ! | ||
| - Qu'est-ce-que ce format GeoJSON http://geojson.org ? Remplacer l'URL source par<code> | - Qu'est-ce-que ce format GeoJSON http://geojson.org ? Remplacer l'URL source par<code> | ||
| Line 978: | Line 929: | ||
| zoom: 10 | zoom: 10 | ||
| }), | }), | ||
| - | </code>Pourquoi cela ne fonctionne pas? => **corrigé** http://www.mediamaps.ch/oltuto/tutoEx5Agpx.html | + | </code>Pourquoi cela ne fonctionne pas? |
| - Notons aussi le Geographic Markup Language de l'OGC qui "consiste en un ensemble de schémas XML qui permettent de construire des modèles de données spécifiques pour des domaines spécialisés, comme l'urbanisme, l'hydrologie, la géologie, et définissent un format ouvert pour l'échange de données géographiques" //(source Wikipedia)//. Voir l'exemple : ./data/fourCapitals.gml | - Notons aussi le Geographic Markup Language de l'OGC qui "consiste en un ensemble de schémas XML qui permettent de construire des modèles de données spécifiques pour des domaines spécialisés, comme l'urbanisme, l'hydrologie, la géologie, et définissent un format ouvert pour l'échange de données géographiques" //(source Wikipedia)//. Voir l'exemple : ./data/fourCapitals.gml | ||
| Line 1052: | Line 1003: | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx5B.html | + | __TODO__ |
| - 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> | - 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> | ||
| - Utiliser Firebug (ou équivalent) pour inspecter votre application et constater que l'attribut a bien été pris en compte. | - Utiliser Firebug (ou équivalent) pour inspecter votre application et constater que l'attribut a bien été pris en compte. | ||
| Line 1128: | Line 1079: | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx6A.html | + | __TODO__ |
| - Remplacer le style avec les propriétés suivantes :<code> | - Remplacer le style avec les propriétés suivantes :<code> | ||
| var style = new ol.style.Style({ | var style = new ol.style.Style({ | ||
| Line 1210: | Line 1161: | ||
| </code> | </code> | ||
| - | __TODO__ => corrigé http://www.mediamaps.ch/oltuto/tutoEx6B.html | + | __TODO__ |
| - Ajouter une entité géographique de plus comme suit :<code> | - Ajouter une entité géographique de plus comme suit :<code> | ||
| var feature2 = new ol.Feature({ | var feature2 = new ol.Feature({ | ||
geoinf15/ol3tuto.1452356294.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
