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

Site Tools


geoinf18:oltuto1

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
geoinf18:oltuto1 [2018/11/27 10:28]
oertz [B. ol.source.BingMaps]
geoinf18:oltuto1 [2019/01/08 21:45] (current)
oertz [B. Créer une carte, un premier exemple pour comprendre]
Line 10: Line 10:
   * Décompresser l'​archive dans un répertoire projet dans votre serveur web PHP (local et/ou avec l'app Heroku)   * Décompresser l'​archive dans un répertoire projet dans votre serveur web PHP (local et/ou avec l'app Heroku)
   * Le fichier **js/​config.js** intialise de nombreuses variables, notamment les URL de géoservices cartographiques   * Le fichier **js/​config.js** intialise de nombreuses variables, notamment les URL de géoservices cartographiques
-  * Certains exemples sont basés sur les géodonnées ​suivantes : {{:​geoinf15:​cities.zip|}}{{:geoinf15:world.zip|}}+  * Certains exemples sont basés sur des géodonnées ​disponibles dans ce dossier (ex. cities, ​world_simple) ​https://​drive.switch.ch/​index.php/​s/​0BjD03Uz4zF5eYW
   * La maîtrise des fonctionnalités Web Developer de votre navigateur est indispensable   * La maîtrise des fonctionnalités Web Developer de votre navigateur est indispensable
   * Aussi un outil comme [[https://​addons.mozilla.org/​fr/​firefox/​addon/​restclient/​|REST Client]] peut être utile   * Aussi un outil comme [[https://​addons.mozilla.org/​fr/​firefox/​addon/​restclient/​|REST Client]] peut être utile
Line 73: Line 73:
 </​html>​ </​html>​
 </​code>​ </​code>​
-=== TODO ===+**TODO** https://​www.mediamaps.ch/​oltuto/​Ex1b.html
   - Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ?<​code>​   - Remplacer la configuration de la map view comme suit - quelle différence avec précédemment ?<​code>​
 var v2 = new ol.View({projection:​ "​EPSG:​4326"​});​ var v2 = new ol.View({projection:​ "​EPSG:​4326"​});​
Line 140: Line 140:
 </​html>​ </​html>​
 </​code>​ </​code>​
-=== TODO ===+**TODO** http://​localhost/​geoinf/​oltuto18/​Ex2a.html
   - Remplacer la source de la couche comme suit :<​code>​   - Remplacer la source de la couche comme suit :<​code>​
 source: new ol.source.OSM({ source: new ol.source.OSM({
Line 166: Line 166:
 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. La classe ol.source.BingMaps s'​occupe de construire les requêtes pour interagir avec le service de tuiles cartographiques BingMaps : https://​msdn.microsoft.com/​en-us/​library/​ff701716.aspx#​Anchor_0. 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. La classe ol.source.BingMaps s'​occupe de construire les requêtes pour interagir avec le service de tuiles cartographiques BingMaps : https://​msdn.microsoft.com/​en-us/​library/​ff701716.aspx#​Anchor_0.
  
-=== TODO ===+**TODO** https://​www.mediamaps.ch/​oltuto/​Ex2b.html
   - Partir de l'​état initial de l'​exemple précédent en adaptant le code JavaScript comme suit, exécuter et analyser la requête générée vers le serveur de tuile BingMaps :<​code>​   - Partir de l'​état initial de l'​exemple précédent en adaptant le code JavaScript comme suit, exécuter et analyser la requête générée vers le serveur de tuile BingMaps :<​code>​
 map = new ol.Map({ map = new ol.Map({
Line 257: Line 257:
 </​code>​ </​code>​
  
-=== TODO ===+**TODO** https://​www.mediamaps.ch/​oltuto/​Ex2c.html
   - Ajouter l'​instruction suivante :<​code>​   - Ajouter l'​instruction suivante :<​code>​
 navigator.geolocation.getCurrentPosition(locationFixed,​ locationError);​ navigator.geolocation.getCurrentPosition(locationFixed,​ locationError);​
Line 397: Line 397:
 </​html>​ </​html>​
 </​code>​ </​code>​
-=== TODO ===+**TODO** https://​www.mediamaps.ch/​oltuto/​Ex3b.html
   - 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 permettre l'​assemblage client-side par superposition ?   - Analyser les paramètres WMS. Lequel représente l'​indispensable capacité "​server-side"​ pour permettre l'​assemblage client-side par superposition ?
Line 559: Line 559:
 </​html>​ </​html>​
 </​code>​ </​code>​
-=== TODO ===+**TODO** https://​www.mediamaps.ch/​oltuto/​Ex3c.html
   - Analyser le code ci-dessus et identifier la principale capacité "​client-side"​ de l'API sur laquelle repose ce LayerSwitcher.   - Analyser le code ci-dessus et identifier la principale capacité "​client-side"​ de l'API sur laquelle repose ce LayerSwitcher.
   - Adapter le code pour ajouter à l'​équation la couche OSM suivante :<​code>​   - Adapter le code pour ajouter à l'​équation la couche OSM suivante :<​code>​
Line 570: Line 570:
 </​code>​ </​code>​
 ==== D. Un contrôle LayerSwitcher plus souple ==== ==== D. Un contrôle LayerSwitcher plus souple ====
-A partir des capacités offertes par l'API, la communauté de développeurs gravitant autour du core OL3 développe des //​controls//​ parmi lesquels un LayerSwitcher un peu plus malin.+A partir des capacités offertes par l'API, la communauté de développeurs gravitant autour du core OL3 développe des //​controls//​ parmi lesquels un LayerSwitcher un peu plus malin. Merci @walkermatt https://​github.com/​walkermatt/​ol3-layerswitcher.
  
 <​code>​ <​code>​
Line 655: Line 655:
 </​html>​ </​html>​
 </​code>​ </​code>​
-=== TODO 1 ===+ 
 +**TODO** https://​www.mediamaps.ch/​oltuto/​Ex3d.html
   - 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) ​- **attention** de définir la propriété //title// pour voir la couche dans le sélecteur de couches, le "​layerswitcher"​.
   - Ajouter un overlay basé sur la couche //​ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt//​ servie par le serveur WMS http://​wms.geo.admin.ch de Swisstopo (//chWMS//, voir aussi la [[http://​www.geo.admin.ch/​internet/​geoportal/​fr/​home/​services/​geoservices/​display_services/​services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:​geoinf16:​screenshot2.png?​200|}}   - Ajouter un overlay basé sur la couche //​ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt//​ servie par le serveur WMS http://​wms.geo.admin.ch de Swisstopo (//chWMS//, voir aussi la [[http://​www.geo.admin.ch/​internet/​geoportal/​fr/​home/​services/​geoservices/​display_services/​services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:​geoinf16:​screenshot2.png?​200|}}
- 
-=== TODO 2 === 
-NB: prérequis spécifiques [[https://​mediamaps.ch/​doku.php?​id=geoinf16:​ol3tuto#​ex3astyling_avec_wms|Ex3A + Ex3B]] ​ 
-  - Utiliser la couche WMS world_simple en overlay en ne visualisant que les frontières des pays (pas de remplissage des zones). 
-  - Ajouter une baselayer MapBox comme celle avec le mapID //​mapbox.pencil//​ (voir https://​www.mapbox.com/​developers/​api/​maps/#​mapids) 
-  - Ajouter un overlay basé sur une couche MapBox de votre cru notamment avec le 3e exercice du tutoriel MapBox/​CartoCSS (voir Ex3B, avec votre couche g4cantons) 
- 
-===== Pilotage de style par le client (CartoCSS) ===== 
-Jusqu'​à présent, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis (ex. avec le langage SLD dans GeoServer). Voyons comment le client peut dire son mot et piloter le style “à distance”. 
- 
-**Etape 1 :** découverte d'une intéressante plateforme cartographique,​ CARTO (aka CartoDB) et du langage CartoCSS. 
-  - naviguer vers https://​oertz.carto.com/​me 
-  - choisir le dataset __geoinf_contour_yverdon__ (fabriqué avec QGIS à partir du MNT N46E006.hgt,​ Modèle Numérique de Terrain) 
-  - choisir "​Create a map" (le cas échéant créer un compte) 
-  - renommer la carte "​Jouons avec CARTO!"​ 
-   - cartodb_query -- c'est le dataset sous-jacent qui a été importé dans votre espace CARTO - utiliser le sélecteur MAP/DATA 
-   - renommer la layer "​contour_yverdon_label"​ et éditer le style pour **afficher les altitudes sur les lignes de contour** 
-   - l'UI Style Editor est pratique et on peut affiner la description de style en accédant aux [[https://​carto.com/​docs/​carto-engine/​cartocss/​properties/​|instructions CartoCSS]] - utiliser le sélecteur VALUES/​CARTOCSS 
- 
-**Etape 2 :** intégration dans notre application OL3 (voir l'​application ci-dessous) 
-  - l'​application charge l'API CORE JavaScript de CARTO (cf. https://​carto.com/​docs/​carto-engine/​carto-js/​core-api/​) 
-  - la méthode cartodb.Tiles.getTiles permet d'​assembler un dataset sélectionné (sublayers/​sql) avec un style donné (sublayers/​cartocss) - NB aussi le user_name 
-  - le callback construit l'URL qui correspond à votre cache source de tuiles (ex. __a.ashbu.cartocdn.com/​ogo/​api/​v1/​map/​4c64e8d931417377282738/​{z}/​{x}/​{y}.png__) 
-  - l'URL est utilisée pour créer une couche ol.layer.Tile sur la base de cette source tuilée avec l'​habituel ol.source.XYZ 
- 
-<​code>​ 
-<​html>​ 
-    <​head>​ 
-        <​title>​ol3 - Ex4E - On demand CartoCSS</​title> ​       
-        <script type="​text/​javascript"​ src="​js/​config.js"></​script>​ 
- 
-        <script src="​http://​libs.cartocdn.com/​cartodb.js/​v3/​3.15/​cartodb.core.js"></​script>​ 
- 
-        <script type="​text/​javascript">​ 
-            var map; 
-            $(document).ready(function () { 
-                map = new ol.Map({ 
-                    view: new ol.View({ 
-                        center: ol.proj.transform([6.45,​ 46.7], '​EPSG:​4326',​ '​EPSG:​3857'​),​ 
-                        zoom: 14 
-                    }), 
-                    target: '​map',​ 
-                    layers: [ 
-                        new ol.layer.Tile({ 
-                            source: new ol.source.OSM() 
-                        }) 
-                    ] 
-                }); 
- 
-                cartodb.Tiles.getTiles({ 
-                    type: '​cartodb',​ user_name: '​oertz',​ sublayers: [{ 
-                            sql: '​SELECT * FROM geoinf_contour_yverdon',​ 
-                            cartocss: "#​geoinf_contour_yverdon{line-color:#​FF6600;​line-width:​2;​line-opacity:​0.7;​}"​ 
-                        }] 
-                }, function (tileTemplate) { // create layer with generated tiles URL 
-                    tilesUrl = tileTemplate.tiles[0] 
-                            .replace('​{s}',​ '​a'​) 
-                            .replace('​{z}',​ '​{z}'​) 
-                            .replace('​{x}',​ '​{x}'​) 
-                            .replace('​{y}',​ '​{y}'​);​ 
-                    ​ 
-                    console.log(tilesUrl);​ 
- 
-                    admLyr = new ol.layer.Tile({ 
-                        source: new ol.source.XYZ({ 
-                            url: tilesUrl 
-                        }) 
-                    }) 
-                    map.addLayer(admLyr);​ 
-                }); 
-            }); 
-        </​script>​ 
- 
-        <style type="​text/​css">​ 
-            #map { 
-                width: 100%; 
-                height: 100%; 
-            } 
-        </​style>​ 
-    </​head>​ 
-    <​body>​ 
-        <div id="​map"></​div>​ 
-    </​body>​ 
-</​html>​ 
-</​code>​ 
-=== TODO 1 === 
-  - Adapter l'​application avec les instructions CartoCSS préparées ci-dessus pour afficher les altitudes sur les lignes de contour, uniquement pour les altitudes supérieures à 800m (**voir aussi {{:​geoinf16:​cartocss.pdf|Custom basemap tiles with CartoCSS, J. Freyre, 2014}}**) 
-  - Ajouter une couche ol.layer.Tile à partir du dataset des districts de Suisse https://​ogo.cartodb.com/​tables/​g4districts98/​public et en construisant un style qui affiche les districts Vaudois différemment des autres (NB : selon votre goût, et dézoomer un peu pour y voir) 
-  - Adapter l'​application pour que le style CartoCSS soit chargé asynchronnement depuis un fichier //​myGreatRemoteStyle.mss//​ (on proclame le suffixe mss pour Map Style Sheet). 
- 
-=== TODO 2 === 
- 
-Quelles similitudes et différences entre l'​approche précédente et celle-ci, qui peut se résumer à une requête : 
-''​https://​wms.geo.admin.ch/?​SERVICE=WMS&​VERSION=1.0.0&​REQUEST=GetMap&​FORMAT=image/​png&​LAYERS=ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt&​SRS=EPSG:​3857&​STYLES=&​WIDTH=2285&​HEIGHT=897&​BBOX=174582,​5648084,​1571851,​6196597&​SLD=https://​drive.switch.ch/​index.php/​s/​brNwxHVjcBeZVDc/​download 
-''​ 
- 
geoinf18/oltuto1.1543310915.txt.gz · Last modified: 2018/11/27 10:28 by oertz