Differences

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

--- geoinf18:oltuto4 [2018/12/06 21:57]
oertz [C. Interaction avec ol.layer.Vector]
+++ geoinf18:oltuto4 [2019/01/08 17:15] (current)
oertz [A. Gestion événementielle cartographique]
@@ Line 66: / Line 66: @@
 </code>
-**TODO**
+**TODO** https://www.mediamaps.ch/oltuto/Ex8a.html
   - Utiliser l'événement //singleclick// pour s'aider à définir un centrage de carte sur un point de votre choix (par exemple les Pierres du Niton)
   - De nombreuses propriétés des classes OpenLayers sont "observables", comme celles de la classe [[http://openlayers.org/en/v3.19.1/apidoc/ol.View.html|ol.View]]. Ajouter ce qui suit :<code>
@@ Line 175: / Line 175: @@
 </code>
-**TODO**
+**TODO** https://www.mediamaps.ch/oltuto/Ex8b.html
   - Un serveur WMS peut formatter la réponse de différentes manières (voir la [[https://demo.boundlessgeo.com/geoserver/opengeo/wms?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetCapabilities|configuration du serveur]]). Par exemple, modifier INFO_FORMAT comme suit :<code>
 INFO_FORMAT: "application/json"
@@ Line 271: / Line 271: @@
 </code>
-__TODO__
+**TODO** https://www.mediamaps.ch/oltuto/Ex8c.html
   - Quel événement l'[[http://openlayers.org/en/v3.20.1/apidoc/ol.events.condition.html|ol.events.condition]] utiliser pour avoir le comportement type "onmouseover" ? Sans oublier de mettre l'IHM en cohérence (voir [[http://openlayers.org/en/v3.20.1/apidoc/ol.interaction.Select.Event.html#event:select|ol.interaction.Select.Event]] select).
   - Configurer l'interaction de sorte que l'utilisateur puisse aussi cliquer sur la bulle d'information pour aller à la page des détails du séisme (cf propriété //url//, ex. https://earthquake.usgs.gov/earthquakes/eventpage/nc72722700){{:geoinf16:selectearthquake.png?nolink|}}
 ==== D. Géoservice d'interrogation personnalisé ====
+En mode vector, l'interrogation n'a plus besoin du serveur pour révéler des données attributaires des entités représentées sur la carte. Par contre, comme déjà vu au point B, en mode image, pour que le "pixel révèle" l'information sous-jacente, le serveur doit être sollicité. Le point B fait usage du géoservice standardisé WMS et son opération GetFeatureInfo. Ci-dessous est proposé un géoservice personnalisé qui montre tout le processus d'interrogation, remontant jusque dans la base de données. CARTO (aka cartodb) est utilisé pour ses deux géoservices suivants :
+  * d'abord comme serveur cartographique pour livrer une représentation des cabanes selon des instructions cartographiques pilotées client-side
+  * puis comme serveur d'entités géographiques pour livrer les données attributaires d'une cabane selon un clic sur la carte (et donc des coordonnées)
+Cette application montre tout le potentiel d'une application de webmapping associé à un géoservice capable de "calculer une géoinformation" (ex. calculer d'un itinéraire, geocoding, geofencing, ...).
+<code>
+<html>
+    <head>
+        <title>ol3 - Ex6a - GeoJSON vector overlay</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:[738600, 5840171],
+                        zoom: 10
+                    }),
+                    target: 'map',
+                    layers: [
+                      new ol.layer.Tile({
+                          source: new ol.source.BingMaps({
+                              key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz',
+                              imagerySet: 'Aerial'
+                          })
+                      })
+                    ]
+                });
+                // Using cartodb geoservice for server-side cartography
+                cartodb.Tiles.getTiles({
+                    type: 'cartodb', user_name: 'ogo', sublayers: [{
+                            sql: 'SELECT * FROM cabanes4326_merge',
+                            cartocss: "#layer {  marker-width: 20;  marker-file: url(https://www.camptocamp.org/static/4ef52c7/img/documents/waypoints/hut.svg);  }"
+                        }]
+                }, 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);
+                    hutLayer = new ol.layer.Tile({
+                        source: new ol.source.XYZ({
+                            url: tilesUrl
+                        })
+                    })
+                    map.addLayer(hutLayer);
+                });
+                map.on('singleclick', function (e) {
+                    getFeatureInfo(ol.proj.transform(e.coordinate,"EPSG:3857","EPSG:4326"));
+                });
+            });
+            function getFeatureInfo(lonlat) {
+                    // Using cartodb geoservice for querying with SQL API
+                    // E.g. SELECT * FROM cabanes4326_merge WHERE ST_Distance(the_geom, ST_GeomFromText('POINT(6.42160 46.0101)', 4326)) < 0.01
+                    var radius = 0.01; // 1° ~111km (equator)
+                    var sqlquery = "SELECT title, the_geom FROM cabanes4326_merge WHERE ST_Distance(the_geom, ST_GeomFromText('POINT(" + lonlat[0] + " " + lonlat[1] + ")', 4326)) < " + radius;
+                    var sqlurl = "https://ogo.cartodb.com:443/api/v2/sql?format=GeoJSON&q=" + sqlquery;
+                    var request = $.ajax({
+                        url: sqlurl,
+                        dataType: "json"
+                    });
+                    request.done(function (data) {
+                        // we empty the message box
+                        $("#info").html("");
+                        if (data.features.length > 0) {
+                            // we just display the first hut in the array of features
+                            var ft = data.features[0];
+                            $("#info").append($("<p>").html(ft.properties.title));
+                        } else {
+                            // we display a default message in case of an empty array
+                            $("#info").append($("<p>").html("No hut nearby, try elsewhere ..."));
+                        }
+                    });
+                    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: 60px;
+                background-color: white;
+                border: solid gray 1px;
+                padding: 5px;
+                font-size: smaller;
+                z-index: 1000000000;
+            }
+            p {
+                margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <div id="info"></div>
+    </body>
+</html>
+</code>
+**TODO** https://www.mediamaps.ch/oltuto/Ex8d.html
+  - Ajouter un champ de saisie pour que l'utilisateur puisse contrôler le rayon de recherche (par défaut radius = 0.01° en dur dans le code ci-dessus)
+  - Plus le rayon est grand, plus la zone de recherche est vaste, trouvant ainsi plusieurs cabanes dans la zone. Adapter la solution pour que les informations de toutes les cabanes de la zone soient affichées (et pas seulement la première cabane)

GIS and Media fusion

User Tools

Site Tools

Differences

Page Tools