Differences

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

--- ogo14:oltuto [2014/05/14 00:42]
oertz [Ex7e : des outils de dessin]
+++ 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 550: / 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 1307: / Line 1306: @@
    labelYOffset: 12
 </code>
-  - Enlever ces deux derniers paramètres; mettre en commentaire l'instruction //Filter// de la description de style //capitals.sld.xml//
+  - 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>
-\\; ajouter le paramètre suivant à la définition de la layer WMS //cities// :<code>
    SLD: remoteSLD + "/capitals.sld.xml",
 </code>
@@ Line 1377: / Line 1375: @@
   - Créer une application permettant de calculer la surface d'une zone dessinée par l'utilisateur.
-===== OpenLayers Mobile =====
+===== 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