Differences

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

--- ogo14:oltuto [2014/05/12 10:32]
oertz
+++ ogo14:oltuto [2018/05/16 10:05] (current)
@@ Line 1: / Line 1: @@
-~~NOTOC~~
 ====== Workshop OpenLayers v2 ======
 Dans OpenLayers, une carte est un ensemble de couches associée à des contrôles pour gérer l'interaction avec l'utilisateur. Une carte se construit avec trois ingrédients de base : du balisage HTML, des déclarations de style CSS, et du code JavaScript d'initialisation.
@@ Line 129: / Line 128: @@
   - Insérer en fin de code les logs ci-dessous :<code>
 console.log("Map projection: " + map.getProjection());
+console.log("Map extent: " + map.getExtent());
 console.log("LonLat Mercator: " + new OpenLayers.LonLat(6.15,46.2).transform("EPSG:4326","EPSG:3857"));
 console.log("LonLat Google: " + new OpenLayers.LonLat(6.15,46.2).transform("EPSG:4326","EPSG:900913"));
@@ Line 431: / Line 431: @@
 __TODO__
   - Modifier le style à votre goût afin que ce soit plus lisible
+  - A lire : http://gis.stackexchange.com/questions/28089/how-are-google-serving-up-their-styled-maps
 ===== 4. Composition de couches =====
 Un intérêt d'une carte en ligne est de pouvoir la composer à partir de plusieurs couches.
@@ Line 548: / Line 549: @@
   - Créer une application de webmapping avec la composition suivante :
     - une couche de base Google (ex. TERRAIN)
-    - une superposition basée sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo \\ \\ Illustration du résultat attendu : {{:ogo14:screenshot2.png?200}}
+    - une superposition basée sur la couche //ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt// servie par le serveur WMS http://wms.geo.admin.ch de Swisstopo (voir [[http://www.geo.admin.ch/internet/geoportal/fr/home/services/geoservices/display_services/services_wms.html|doc GeoAdmin]]) \\ \\ Illustration du résultat attendu : {{:ogo14:screenshot2.png?200}}
-  - Créer une autre application avec une composition différente selon une couhe de base de votre choix et une autre couche de ce serveur WMS, ou d'un autre.
+  - Créer une autre application avec une composition différente selon une couche de base de votre choix et une autre couche de ce serveur WMS, ou d'un autre.
 ===== 5. Couche "vector" =====
 Dans les sections précédentes nous avons inséré des couches cartographique sous la forme d'images construites par le serveur avec son moteur cartographique. Un serveur cartographique était donc nécessaire.
@@ Line 1300: / Line 1301: @@
 __TODO__
-  - ...
+  - A quoi sert la Layer.Vector si son style rend ses objets invisibles (fillOpacity: 0, stroke: 0) ?
+  - Ajouter les deux paramètres suivant au style //defaultPoint// :<code>
+   label: "${wup_aggl}",
+   labelYOffset: 12
+</code>
+  - Enlever ces deux derniers paramètres; mettre en commentaire l'instruction //Filter// de la description de style //capitals.sld.xml//; ajouter le paramètre suivant à la définition de la layer WMS //cities// :<code>
+   SLD: remoteSLD + "/capitals.sld.xml",
+</code>
 ==== Ex7e : des outils de dessin ====
@@ Line 1366: / Line 1374: @@
 </code>
   - Créer une application permettant de calculer la surface d'une zone dessinée par l'utilisateur.
+===== 8. OpenLayers Mobile =====
+La librairie, malgré ses 10 ans d'âge est prête pour les applications mobiles. Une version allégée de la librairie JS est disponible pour cet usage, offrant un jeu restreint de fonctionnalités. Une CSS y est également adaptée.
+==== Ex8a : OpenLayers Touch Navigation ====
+<code>
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Ex8a : OpenLayers Mobile</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <link rel="stylesheet" href="js/openlayers/theme/default/style.mobile.css" type="text/css">
+        <script src="js/openlayers/OpenLayers.mobile.js"></script>
+        <script type="text/javascript">
+            var map;
+            window.onload = function() {
+                map = new OpenLayers.Map("map", {theme: null, controls: []});
+                map.addControl(new OpenLayers.Control.Zoom());
+                map.addControl(new OpenLayers.Control.TouchNavigation(
+                        {
+                            dragPanOptions: {
+                                enableKinetic: false
+                            }
+                        }
+                ));
+                osm = new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                    transitionEffect: 'resize'
+                });
+                map.addLayer(osm);
+                map.setCenter(new OpenLayers.LonLat(6.65, 46.77).transform("EPSG:4326", "EPSG:3857"), 10);
+            };
+        </script>
+        <style>
+            html, body {
+                margin : 0;
+                padding : 0;
+                height : 100%;
+                width : 100%;
+            }
+            #map {
+                position : relative;
+                width : 100%;
+                height : 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+    </body>
+</html>
+</code>
+__TODO__
+  - modifier le paramètre //enableKinetic// à //true//
+==== Ex8b : Geolocation API ====
+<code>
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Ex8b : OpenLayers Geolocation</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <link rel="stylesheet" href="js/openlayers/theme/default/style.mobile.css" type="text/css">
+        <script src="js/openlayers/OpenLayers.mobile.js"></script>
+        <script type="text/javascript">
+            var map;
+            window.onload = function() {
+                map = new OpenLayers.Map("map", {theme: null, controls: []});
+                map.addControl(new OpenLayers.Control.Zoom());
+                map.addControl(new OpenLayers.Control.TouchNavigation(
+                        {
+                            dragPanOptions: {
+                                enableKinetic: true
+                            }
+                        }
+                ));
+                osm = new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+                    transitionEffect: 'resize'
+                });
+                map.addLayer(osm);
+                map.setCenter(new OpenLayers.LonLat(6.65, 46.77).transform("EPSG:4326", "EPSG:3857"), 12);
+                var ptSymb = {
+                    externalGraphic: 'images/markerBlue.png',
+                    graphicWidth: 36, graphicHeight: 33
+                };
+                tracker = new OpenLayers.Layer.Vector("tracker", {style: ptSymb});
+                map.addLayer(tracker);
+                navigator.geolocation.getCurrentPosition(newPoint, locationError);      //6.65, 46.77
+            };
+            function newPoint(position) {
+                ptGeom = new OpenLayers.Geometry.Point(position.coords.longitude, position.coords.latitude);
+                point = new OpenLayers.Feature.Vector(ptGeom.transform("EPSG:4326", "EPSG:3857"));
+                tracker.addFeatures([point]);
+            }
+            function locationError(e) {
+                alert(e);
+            }
+        </script>
+        <style>
+            html, body {
+                margin : 0;
+                padding : 0;
+                height : 100%;
+                width : 100%;
+            }
+            #map {
+                position : relative;
+                width : 100%;
+                height : 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+    </body>
+</html>
+</code>
+__TODO__
+  - utiliser l'émulateur //geolocation// de Chrome pour donner une position "à la main" (onglet Emulation/Sensor des Developper Tools)
+  - remplacer la dernière ligne de la fonction //window.onload// par ce qui suit :<code>
+   navigator.geolocation.watchPosition(newPoint, locationError);
+</code>et saisir les positions (lon, lat) suivantes "à la main" dans l'émulateur : (6.60, 46.77) - (6.61, 46.77) - (6.62, 46.77) - (6.63, 46.77) ...
+  - adapter cette application en appelant la fonction suivante qui créer une Layer.Vector comportant une zone de danger :<code>
+            function createZone() {
+                var points = [
+                    new OpenLayers.Geometry.Point(6.632, 46.778),
+                    new OpenLayers.Geometry.Point(6.658, 46.777),
+                    new OpenLayers.Geometry.Point(6.652, 46.761)
+                ];
+                var linearRing = new OpenLayers.Geometry.LinearRing(points);
+                polygon = new OpenLayers.Geometry.Polygon([linearRing]);
+                var feature = new OpenLayers.Feature.Vector(polygon.transform("EPSG:4326", "EPSG:3857"));
+                zone = new OpenLayers.Layer.Vector("zone");
+                zone.addFeatures([feature]);
+                map.addLayer(zone);
+            }
+</code> et ajouter la fonctionnalité qui surveille le déplacement de l'utilisateur provoquant un message d'alerte dès que sa position entre en intersection avec la zone de danger.

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools