Differences

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

--- geoinf16:ol3tuto [2016/11/02 21:59]
oertz [1. Les éléments de base]
+++ geoinf16:ol3tuto [2019/02/13 11:29] (current)
oertz [Ex3A : Styling avec WMS]
@@ Line 7: / Line 7: @@
   * Pour ce workshop, télécharger le matériel de départ {{:geoinf16:geoinf16-ol3.zip|}}
   * Décompresser l'archive dans un répertoire projet dans votre serveur web et découvrez le fichier **js/config.js**
-  * (optionnel) Vous pouvez télécharger la librairie OL3 en local dans le répertoire //lib// depuis http://openlayers.org/download/
   * De nombreux exemples sont basés sur les géodonnées suivantes : {{:geoinf15:cities.zip|}}, {{:geoinf15:world.zip|}}
   * Il est aussi nécessaire d'avoir les logiciels suivants fonctionnels (ou équivalents) : [[https://addons.mozilla.org/fr/firefox/addon/firebug/|Firebug]], [[https://addons.mozilla.org/fr/firefox/addon/restclient/|REST Client]]
+  * (optionnel) Vous pouvez télécharger la librairie OL3 en local dans le répertoire //lib// depuis http://openlayers.org/download/
 ==== Ex1A : créer une carte, un premier exemple pour comprendre ====
@@ Line 67: / Line 67: @@
 === Initialisation de la carte ===
-  * L'objet //[[http://openlayers.org/en/v3.9.0/apidoc/ol.Map.html?unstable=true|ol.Map]]// est associé à l'ID de la cible de visualisation
+  * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.Map.html?unstable=true|ol.Map]]// est associé à l'ID de la cible de visualisation
-  * L'objet //[[http://openlayers.org/en/v3.9.0/apidoc/ol.View.html?unstable=true|ol.View]]// représente la vue 2D de la map. Il permet de définir le centre, la résolution et la rotation de la map
+  * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html?unstable=true|ol.View]]// représente la vue 2D de la map. Il permet de définir le centre, la résolution et la rotation de la map
-  * L'objet //[[http://openlayers.org/en/v3.9.0/apidoc/ol.layer.html?unstable=true|ol.Layer]]// est utilisé pour définir chaque couche à ajouter à la carte
+  * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.layer.html?unstable=true|ol.Layer]]// est utilisé pour définir chaque couche à ajouter à la carte
-  * L'objet //[[http://openlayers.org/en/v3.9.0/apidoc/ol.source.ImageWMS.html?unstable=true|ol.source.ImageWMS]]// permet de définir les paramètres d'une requête WMS pour obtenir une couche servie par un serveur cartographique conforme au standard OGC WMS (http://www.opengeospatial.org/standards/wms)
+  * L'objet //[[http://openlayers.org/en/v3.19.1/apidoc/ol.source.ImageWMS.html?unstable=true|ol.source.ImageWMS]]// permet de définir les paramètres d'une requête WMS pour obtenir une couche servie par un serveur cartographique conforme au standard OGC WMS (http://www.opengeospatial.org/standards/wms)
-  * 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.19.1/apidoc/ol.View.html#fit|fit]]// termine l'initialisation en calculant l'enveloppe géographique de visualisation
 __TODO (II)__
@@ Line 236: / Line 236: @@
         <title>ol3 - Ex2C - webmap with Swisstopo WMTS</title>
         <script type="text/javascript" src="js/config.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
+        <script src="http://epsg.io/21781.js"></script>
         <script type="text/javascript">
             var map;
             $(document).ready(function () {
-                var projection = new ol.proj.Projection({
-                    code: 'EPSG:21781',
+                var projection = ol.proj.get('EPSG:21781');
-                    units: 'm'
+                projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
-                });
-                ol.proj.addProjection(projection);
+                map = new ol.Map({
-                var map = new ol.Map({
                     target: 'map',
                     view: new ol.View({
                         projection: ol.proj.get("EPSG:21781"),
                         center: [600000, 200000],
-                        zoom: 14,
+                        zoom: 6
                     })
                 });
@@ Line 269: / Line 271: @@
                 });
                 map.addLayer(layer);
                 console.log(map.getView().getProjection().getCode());
-            })
+            });
         </script>
         <style type="text/css">
@@ Line 285: / Line 289: @@
 </html>
 </code>
+__TODO__
+  - Ajouter l'instruction suivante :<code>
+navigator.geolocation.getCurrentPosition(locationFixed, locationError);
+</code>ainsi que les deux fonctions callback qui vont avec :<code>
+function locationFixed(position) {
+    map.getView().setCenter(ol.proj.transform([position.coords.longitude, position.coords.latitude],"EPSG:4326","EPSG:21781"));
+}
+function locationError(e) {
+    console.log(e);
+}
+</code>
+  - Intéressant pour aider à démystifier le fonctionnement et l'utilisation de l'HTML5 Geolocation API :
+    - [[http://www.andygup.net/html5-geolocation-api-%E2%80%93-how-accurate-is-it-really|HTML5 Geolocation API – how accurate is it, really?]]
+    - [[http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html|Géolocalisation en HTML5]]
+    - [[http://www.mmaglobal.com/files/documents/location-data-accuracy-v3.pdf|MMA Demystifying Location Data Accuracy]]
+    - [[http://www.mmaglobal.com/files/whitepapers/MMA-Location-Terminology-Guide_FINAL.pdf|MMA Location Terminology Guide]]
+    - {{:geoinf16:ng-souriez.pdf|Souriez, vous êtes géolocalisés !}}
 ===== 3. Style de couche "image" =====
@@ Line 295: / Line 319: @@
     <head>
         <title>ol3 - Ex3A - use of a custom SLD style</title>
-        <script type="text/javascript" src="js/config.js"></script>
+        <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
+        <script src="https://openlayers.org/en/v3.20.1/build/ol-debug.js" type="text/javascript"></script>
+        <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
         <script type="text/javascript">
             var map;
-            $(document).ready(function(){
+            var mcWMS = "https://eu1.mapcentia.com/wms/oertz/public";
+            var mcWFS = "https://eu1.mapcentia.com/wfs/oertz/public/4326";
+            $(document).ready(function(){
                 map = new ol.Map({
                     view: new ol.View({
@@ Line 320: / Line 352: @@
             });
         </script>
         <style type="text/css">
             #map {
                 width: 100%;
                 height: 100%;
             }
         </style>
     </head>
     <body>
@@ Line 400: / Line 432: @@
         <title>ol3 - Ex3B - webmap with your own MapBox basemap</title>
         <script type="text/javascript" src="js/config.js"></script>
         <script type="text/javascript">
-        var map;
+            var map;
-        $(document).ready(function() {
+            $(document).ready(function () {
-          var token = "pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig";
+                var token = "pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig";
-          var styleId = "oertz.b9becbcf";
-          map = new ol.Map({
+                var styleIdClassic = "oertz.c80497f1";
-            layers: [
+                //var styleIdWeb = "oertz/civjyzx4o00hq2kl80xkaz832";
-              new ol.layer.Tile({
-                source: new ol.source.XYZ({
+                map = new ol.Map({
-                  url: 'http://api.tiles.mapbox.com/v4/'+styleId+'/{z}/{x}/{y}.png?access_token=' + token
+                    layers: [
-                })
+                        new ol.layer.Tile({
-              })
+                            source: new ol.source.XYZ({
-            ],
+                                // version avec le MapBox Studio "classic"
-            target: 'map',
+                                url: 'http://api.tiles.mapbox.com/v4/' + styleIdClassic + '/{z}/{x}/{y}.png?access_token=' + token
-            view: new ol.View({
-              center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'),
+                                // version avec le MapBox Studio "web"
-              zoom: 10
+                                //url: 'https://api.mapbox.com/styles/v1/' + styleIdWeb + '/tiles/256/{z}/{x}/{y}?access_token=' + token
+                            })
+                        })
+                    ],
+                    target: 'map',
+                    view: new ol.View({
+                        center: ol.proj.transform([6.7, 46.7], 'EPSG:4326', 'EPSG:3857'),
+                        zoom: 10
+                    })
+                });
             })
-          });
-        })
         </script>
         <style type="text/css">
@@ Line 439: / Line 478: @@
     - exemple de rendu pour l'exercice 4 {{:geoinf16:cartocss_ex4.png?200|}}
   - 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 un découpage en pyramide (appelé //gridset// par MapBox). Il ne reste donc plus qu'à habiller ces tuiles vectoriels avec un style pour produire la pyramide des tuiles images qui seront 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.mapbox-streets-v5,oertz.4bf1beab**, on peut construire le style “by night” suivant : {{:geoinf16:mynightstyle.mss.zip|}}
 ===== 4. Composition de couches =====

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools