Differences

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

--- geoinf15:ol3tuto [2015/11/16 07:59]
oertz [Workshop OpenLayers v3]
+++ geoinf15:ol3tuto [2016/11/01 23:10]
oertz
@@ Line 209: / Line 209: @@
         new ol.layer.Tile({
             source: new ol.source.BingMaps({
-                key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+                key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz',
                 imagerySet: 'AerialWithLabels'
             })
@@ Line 223: / Line 223: @@
 ==== 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>
@@ Line 327: / Line 327: @@
 </code>
 __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'
 </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"?>
 <DescribeFeatureType version="1.1.0" service="WFS"
@@ Line 431: / Line 431: @@
 __TODO__
   - 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 =====
 ==== 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.
@@ Line 1314: / Line 1265: @@
   - Modifier ce qu'il faut pour visualiser des étiquettes comme suit __Gollum says: The precious is here!__ et __Gandalf says: The hobbits are far away...__
   - Reprendre l'Ex5A avec le flux http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson et faire ce qu'il faut pour que les points séismes de l'hémisphère Nord apparaissent différemment de l'autre.
-  - Sur la base de ce même flux, proposer une représentation thématique des points par intensité des séismes (exploiter l'attribut //mag//, voir aussi [[http://fr.wikipedia.org/wiki/Magnitude_d%27un_s%C3%A9isme#.C3.89chelle_de_Richter|Echelle de Richter]]).
+  - Sur la base de ce même flux, proposer une représentation thématique des points séismes en exploitant leur propriété d'intensité/magnitude (voir l'attribut //mag//, voir aussi [[http://fr.wikipedia.org/wiki/Magnitude_d%27un_s%C3%A9isme#.C3.89chelle_de_Richter|Echelle de Richter]]).
 {{:geoinf15:earthquakes.png?nolink|}}
-===== 7. Contrôles et interactions =====
-OpenLayers offre un ensemble de fonctionnalités permettant d'interagir avec la carte. Par défaut, les interactions de zoom et pan sont actives mais il en existe d'autres ([[http://openlayers.org/en/v3.9.0/apidoc/ol.control.html?unstable=true|ol.control]]). En plus de la gestion événementielle offerte par ces contrôleurs, OpenLayers permet d'enregistrer des écouteurs sur de nombreux événements. Maintenant que les techniques de visualisation cartographique sont maîtrisées, tant côté serveur que client, il s'agit de découvrir comment interagir avec les objets géographiques représentés.
-==== Ex7A : découverte de la gestion événementielle cartographique ====
-Cet exemple démontre qu'il est nécessaire qu'un gestionnaire s'occupe spécifiquement d'évenements cartographiques comme ceux en lien avec la vie d'un ol.Map (voir [[http://openlayers.org/en/v3.9.0/apidoc/ol.MapBrowserEvent.html?unstable=true#event:click|ol.MapBrowserEvents]]) ou ceux relatifs à la vie d'une [[http://openlayers.org/en/v3.9.0/apidoc/ol.layer.Vector.html|ol.layer.Vector]].
-On reprend ici l'exemple 5A :
-<code>
-<html>
-    <head>
-        <title>ol3 - Ex7A - ol.ObjectEvent</title>
-        <script type="text/javascript" src="js/config.js"></script>
-        <script type="text/javascript">
-            var map, vectorLayer;
-            $(document).ready(function () {
-                map = new ol.Map({
-                    view: new ol.View({
-                        center: [0, 0],
-                        zoom: 2
-                    }),
-                    target: 'map',
-                    layers: [
-                        new ol.layer.Tile({
-                            opacity: 0.5, // !!
-                            source: new ol.source.OSM()
-                        })
-                    ]
-                });
-                vectorLayer = new ol.layer.Vector({
-                    source: new ol.source.Vector({
-                        url: "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson",
-                        format: new ol.format.GeoJSON()
-                    })
-                });
-                map.addLayer(vectorLayer);
-                $(document).keypress(function () {
-                    var fts = vectorLayer.getSource().getFeatures();
-                    $("#info").html("");
-                    for (var i = 0; i < fts.length; i++) {
-                        $("#info").append($("<p>").html(fts[i].get("title")));
-                    }
-                });
-            });
-        </script>
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-            #info {
-                position: absolute;
-                top: 50px;
-                left: 50px;
-                background-color: #fff;
-                padding: 5px;
-            }
-            p {
-                font-size: small;
-                margin: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map"></div>
-        <div id="info"></div>
-    </body>
-</html>
-</code>
-__TODO__
-  - On souhaite supprimer l'interaction imposée à l'utilisateur (keypress) pour afficher la liste des descriptions. Comment faire ? Qu'est-ce qui ne marche justement pas ?
-  - Remplacer le callback keypress par ce qui suit :<code>
-// Set listener on addfeature (ol.source.VectorEvent)
-vectorLayer.getSource().on("addfeature", function (e) {
-    $("#info").append($("<p>").html(e.feature.get("title")));
-});
-</code>
-  - De nombreuses propriétés des classes OpenLayers sont "observable", comme celles de la classe [[http://openlayers.org/en/v3.9.0/apidoc/ol.View.html|ol.View]]. Ajouter à l'exemple ce qui suit :<code>
-// Set listener on change:center (ol.ObjectEvent)
-map.getView().on('change:center', function (e) {
-    console.log(e.target.getCenter());
-});
-</code>
-  - Adapter l'exemple pour que soit automatiquement utilisé comme baselayer une couche Bingmaps dès que le niveau de zoom "descend" sous le niveau 6 (à la http://urbangene.heig-vd.ch).
-==== Ex7B : contrôle d'interrogation en mode image (WMS GetFeatureInfo) ====
-Le gestionnaire d'événements cartographiques va notamment servir à déployer la dernière fonctionnalité de base d'une application de webmapping, celle qui consiste à interroger les objets de la carte.
-Avant d'aller plus loin, ajouter le serveur cartographique ci-dessous dans le fichier **config.js** (voir aussi https://github.com/camel113/geoinf15-ol3/blob/tutoOL3.9.0/js/config.js) :
-<code>
-/*
- * With the UNEP GRID GeoServer you can play with layers
- * (see the Global Risk Data Platform map at http://preview.grid.unep.ch/index.php?preview=map):
- * - World
- * - NationalParks
- * - Cities_esri
- * - etc (see http://preview.grid.unep.ch/geoserver/wms?REQUEST=GetCapabilities)
- */
-var unWMS = "http://preview.grid.unep.ch/geoserver/wms";
-var unWFS = "http://preview.grid.unep.ch/geoserver/wfs";
-</code>
-Cet exemple illustre l'interrogation des objets de la carte par le simple clic d'un pixel sur la carte. On enregistre un écouteur sur la map à l'aide de la méthode [[http://openlayers.org/en/v3.9.0/apidoc/ol.Map.html?unstable=true#on|ol.Map.on]] afin d'exécuter du code lors d'un click sur la map. On utilise ensuite la méthode [[http://openlayers.org/en/v3.9.0/apidoc/ol.source.ImageWMS.html?unstable=true#getGetFeatureInfoUrl|ol.source.ImageWMS.getGetFeatureInfoUrl]] pour construire l'URL qui permet d'interroger le WMS. Enfin, la fonction //getFeatureInfo(url)// permet d'envoyer une requête au serveur WMS à l'aide de l'URL précédemment construite. C'est l'équivalent bien mieux structuré que http://www.mediamaps.ch/oltuto/Ex0c_navmap.html.
-<code>
-<html>
-    <head>
-        <title>ol3 - Ex7B - interaction with WMS GetFeatureInfo control</title>
-        <script type="text/javascript" src="js/config.js"></script>
-        <script type="text/javascript">
-            var map, vectors, wmsLayer;
-            $(document).ready(function () {
-                var wmsSource = new ol.source.ImageWMS({
-                    url: unWMS,
-                    params: {
-                        VERSION: "1.1.1",
-                        LAYERS: 'World',
-                        FORMAT: 'image/png',
-                        STYLES: 'polygon'
-                    }
-                });
-                wmsLayer = new ol.layer.Image({
-                    source: wmsSource
-                });
-                map = new ol.Map({
-                    target: 'map',
-                    view: new ol.View({
-                        center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'),
-                        zoom: 4
-                    })
-                });
-                // Create/Add a WMS baselayer
-                wmsLayer = new ol.layer.Image({
-                    source: wmsSource
-                });
-                map.addLayer(wmsLayer);
-                map.on('singleclick', function (evt) {
-                    var url = wmsSource.getGetFeatureInfoUrl(
-                            evt.coordinate,
-                            map.getView().getResolution(),
-                            "EPSG:3857",
-                            {
-                                INFO_FORMAT: "text/plain"
-                            }
-                    );
-                    if (url)
-                        getFeatureInfo(url);
-                });
-                function getFeatureInfo(url) {
-                    var url2 = encodeURIComponent(url);
-                    var request = $.ajax({
-                        url: "php/proxy2.php?url=" + url2,
-                        dataType: "text",
-                    });
-                    request.done(function (data) {
-                        $("#info").html(data);
-                    });
-                    request.fail(function (jqXHR, textStatus) {
-                        alert("Request failed: " + textStatus);
-                    });
-                }
-            });
-        </script>
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-            #info {
-                position: absolute;
-                top: 20px;
-                left: 50px;
-                background-color: white;
-                border: solid gray 1px;
-                padding: 5px;
-                font-size: smaller;
-                z-index: 1000000000;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map"></div>
-        <div id="info">Click on the map to get feature info</div>
-    </body>
-</html>
-</code>
-__TODO__
-  - Modifier paramètre INFO_FORMAT et ajouter le paramètre FEATURE_COUNT comme suit :<code>
-{
-    INFO_FORMAT: "text/html",
-    FEATURE_COUNT: 50
-}</code> et cliquer la carte aux alentours du Liechtenstein (sans changer de zoom !).
-  - Modifier encore une fois INFO_FORMAT comme suit :<code>
-INFO_FORMAT: "application/json",
-</code> que se passe-t-il à l'interrogation de la carte ? Regarder le flux client/serveur ...
-  - Remplacer la toute la **fonction getFeatureInfo** par celle-ci :<code>
-function getFeatureInfo(url) {
-    var url2 = encodeURIComponent(url);
-    var request = $.ajax({
-        url: "php/proxy2.php?url=" + url2,
-        dataType: "json",
-    });
-    request.done(function (data) {
-        decoder = new ol.format.GeoJSON();
-        features = decoder.readFeatures(data, {
-            dataProjection: "EPSG:4326",
-            featureProjection: "EPSG:3857"
-        });
-        //console.log(features);
-        if (features.length > 0) {
-            sldUrl = "http://www.mediamaps.ch/oltuto/php/GetWorldSLD.php?ID=" + features[0].get("terr_id");
-            console.log(sldUrl);
-            wmsLayer.getSource().updateParams({
-                VERSION: "1.1.1",
-                FORMAT: 'image/png',
-                SLD: sldUrl
-            });
-            $("#info").html(features[0].get("terr_name"));
-        }
-    });
-    request.fail(function (jqXHR, textStatus) {
-        alert("Request failed: " + textStatus);
-    });
-}
-</code>
-==== Ex7C : WMS GetFeature avec chargement vector d'entité(s) et interaction ====
-La réponse de la requète GetFeature étant un flux GeoJSON complet, le navigateur reçoit la géométrie de l'entité "sous le clique cartographique". On peut l'exploiter et interagir comme suit :
-<code>
-<html>
-    <head>
-        <title>ol3 - Ex7C - interaction with WMS GetFeatureInfo + vector loading</title>
-        <script type="text/javascript" src="js/config.js"></script>
-        <script type="text/javascript">
-            var map, vectors, wmsLayer;
-            $(document).ready(function () {
-                var wmsSource = new ol.source.ImageWMS({
-                    url: unWMS,
-                    params: {
-                        VERSION: "1.1.1",
-                        LAYERS: 'World',
-                        FORMAT: 'image/png',
-                        STYLES: 'polygon'
-                    }
-                });
-                map = new ol.Map({
-                    target: 'map',
-                    view: new ol.View({
-                        center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'),
-                        zoom: 4
-                    })
-                });
-                // Create/Add a WMS baselayer
-                wmsLayer = new ol.layer.Image({
-                    source: wmsSource
-                });
-                map.addLayer(wmsLayer);
-                // Create/add an empty vector layer
-                vectors = new ol.layer.Vector({
-                    source: new ol.source.Vector()
-                });
-                map.addLayer(vectors);
-                map.on('singleclick', function (evt) {
-                    var url = wmsSource.getGetFeatureInfoUrl(
-                            evt.coordinate,
-                            map.getView().getResolution(),
-                            "EPSG:3857",
-                            {
-                                INFO_FORMAT: "application/json",
-                                FEATURE_COUNT: 1
-                            }
-                    );
-                    if (url)
-                        getFeatureInfo(url);
-                });
-                function getFeatureInfo(url) {
-                    var url2 = encodeURIComponent(url);
-                    var request = $.ajax({
-                        url: "php/proxy2.php?url=" + url2,
-                        dataType: "json",
-                    });
-                    request.done(function (data) {
-                        decoder = new ol.format.GeoJSON();
-                        features = decoder.readFeatures(data, {
-                            dataProjection: "EPSG:4326",
-                            featureProjection: "EPSG:3857"
-                        });
-                        if (features.length > 0) {
-                            vectors.getSource().clear();
-                            vectors.getSource().addFeatures(features);
-                            $("#info").html(features[0].get("terr_name"));
-                        }
-                    });
-                    request.fail(function (jqXHR, textStatus) {
-                        alert("Request failed: " + textStatus);
-                    });
-                }
-            });
-        </script>
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-            #info {
-                position: absolute;
-                top: 20px;
-                left: 50px;
-                background-color: white;
-                border: solid gray 1px;
-                padding: 5px;
-                font-size: smaller;
-                z-index: 1000000000;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map"></div>
-        <div id="info">Click on the map to get feature info</div>
-    </body>
-</html>
-</code>
-__TODO__
-  - Adapter l'exemple pour afficher dans l'infobox aussi la capitale du pays en question (ex. Liechtenstein [capital: Vaduz]).
-  - Modifier aussi l'affichage de l'infobox selon goût.
-  - Modifier FEATURE_COUNT à 50 et cliquer aux alentours du Liechtenstein. Quelle critique peut-on formuler sur cet état de l'exemple ?
-  - Ajouter l'[[http://openlayers.org/en/v3.9.0/apidoc/ol.interaction.html|ol.interaction]] suivante :<code>
-var selectPointerMove = new ol.interaction.Select({
-    condition: ol.events.condition.pointerMove,
-    layers: [vectors]   // in our case this is optional as we only one vector layer in the map
-});
-map.addInteraction(selectPointerMove);
-selectPointerMove.on('select', function (e) {
-    if (e.target.getFeatures().getLength() > 0) {
-        $("#info").html(e.target.getFeatures().item(0).get('terr_name'));
-    } else {
-        $("#info").empty();
-    }
-});
-</code>
-  - Mettre en commentaire la ligne :<code>
-vectors.getSource().clear();
-</code>
-  - Modifier le style de sélection en exploitant la propriété **style** de la classe [[http://openlayers.org/en/v3.9.0/apidoc/ol.interaction.Select.html|ol.interaction.Select]].
-==== Ex7D : stratégies de chargement vector ====
-Le chargement en mode vector d'entités géographiques ouvre des possibilités intéressantes en termme d'interaction utilisateur au point d'être tenté de toujours tout charger dans le navigateur. Une telle approche peut s'avérer piégeuse et néfaste en terme d'expérience utilisateur du fait d'une latence provoquée (1) par le volume important de données à charger pour une bande passante donnée et (2) par les performances et l'aptitude du moteur de rendu cartographique à digérer ces données. Des stratégies de chargement peuvent alors s'avérer utiles afin d'éviter des écueils.
-Avant d'aller plus loin, charger le **script proxy1.php** dans le dossier php du projet : https://github.com/camel113/geoinf15-ol3/blob/tutoOL3.9.0/php/proxy1.php.
-L'exemple ci-dessous utilise la stratégie ol.loadingstrategy.all qui charge simplement tous les objets d'une couche donnée (autrement dit c'est la stratégie "no strategy" !).
-<code>
-<html>
-    <head>
-        <title>Ex7D - Vector overlay loading strategies</title>
-        <script type="text/javascript" src="js/config.js"></script>
-        <script type="text/javascript">
-            var map;
-            $(document).ready(function () {
-                map = new ol.Map({
-                    target: 'map',
-                    view: new ol.View({
-                        center: ol.proj.transform([8, 47], "EPSG:4326", "EPSG:3857"),
-                        zoom: 5
-                    })
-                });
-                var osmLayer = new ol.layer.Tile({
-                    source: new ol.source.OSM(),
-                    opacity: 0.3
-                });
-                map.addLayer(osmLayer);
-                var vectorSource = new ol.source.Vector({
-                    loader: function (extent, resolution, projection) {
-                        // Web Feature Service parameters
-                        url = unWFS + "?" + $.param({
-                            service: 'WFS',
-                            version: '1.1.0',
-                            request: 'GetFeature',
-                            typename: 'Cities_esri',
-                            srsname: 'EPSG:3857'
-                        });
-                        // Pass it through the proxy
-                        $.ajax({
-                            url: "php/proxy1.php?url=" + url,
-                            dataType: 'xml',
-                            success: function (response) {
-                                var wfsFormat = new ol.format.WFS();
-                                vectorSource.addFeatures(wfsFormat.readFeatures(response));
-                            },
-                            error: function (jqXHR, textStatus, errorThrown) {
-                                alert("The request has failed: " + textStatus + errorThrown);
-                            }
-                        });
-                    },
-                    strategy: ol.loadingstrategy.bbox,
-                    projection: "EPSG:3857"
-                });
-                var lyr = new ol.layer.Vector({
-                    source: vectorSource
-                });
-                map.addLayer(lyr);
-            })
-        </script>
-        <style type="text/css">
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map"></div>
-        <div id="info"></div>
-    </body>
-</html>
-</code>
-__TODO__
-  - Scruter le flux client/serveur : compter les appels au serveur géographique et vérifier le(s) volume(s) des entités géographiques transférées
-  - Modifier la stratégie comme suit :<code>ol.loadingstrategy.bbox</code>ajouter le paramètre suivant aux paramètres Web Feature Service<code>bbox: extent.join(',') + ',EPSG:3857'</code>Tout en naviguant dans la carte, rescruter le flux client/serveur.
-==== Pour aller plus loin ... ====
-Quelques autres stratégies qui cherchent à contrôler le flux client/serveur et l'expérience utilisateur selon les besoins d'interactivité de l'interface homme-machine :
-  * Scalable interactions : https://www.mapbox.com/help/an-open-platform/#scalable-interactions (tester avec : http://bit.ly/1HNgHrp)
-  * Vector tiles : https://en.wikipedia.org/wiki/Vector_tiles

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools