Barème : ~ équipondéré.
(A) Présenter les deux approches permttant de définir la vue initiale d'une application de cartographie en ligne :
2 approches en effet :
La première approche est utile quand il s'agit de toujours montrer à l'utilisateur un ensemble d'éléments cartographiques dispersés dans une enveloppe géographique. La seconde est utile quand cette dispersion n'existe pas, et que par exemple il s'agit de centrer la carte sur un point précis (ex. la localisation de l'utilisateur), souvent au plus près (grande échelle).
(B) Ci-après le code d'une application de cartographie en ligne dont la vue n'est pas initialisée explicitement. Il présente le tableau possibleViews
qui offre plusieurs paramètres* pour initialiser cette vue : compléter la fonction initRandom
pour définir une initialisation qui soit aléatoire parmi les 3 possibilités offertes par ce tableau.
(*) longitude/latitude en EPSG:4326 !
<html> <head> <title>ol3 - Exa1A</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({ projection: "EPSG:3857" }), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ] }); var possibleViews = [ { // Mont-Blanc lon: 6.865234, lat: 45.832454, zoom: 13 }, { // Matterhorn lon: 7.658360, lat: 45.976536, zoom: 14 }, { // Everest lon: 86.9251707, lat: 27.9878319, zoom: 15 } ]; // let's initialize the map view initRandom(possibleViews); }); /***************************************** * Function to set the view randomly * @param {array of view parameters} viewTable */ function initRandom(views) { // some code here // ... } </script> <style type="text/css"> #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> </body> </html>
http://www.mediamaps.ch/oltuto/Exa1B.html
L'application ci-dessous n'est pas terminée. La personne qui était en charge du développement a été affectée à un autre projet et c'est à vous de prendre le relais.
<html> <head> <title>ol3 - EXA1 - Baselayer & overlay ordering</title> <script type="text/javascript" src="js/config.js"></script> <link rel="stylesheet" href="lib/layerswitcher/ol3-layerswitcher.css" type="text/css"> <script src="lib/layerswitcher/ol3-layerswitcher.js" type="text/javascript"></script> <script type="text/javascript"> var map, lyrs; $(document).ready(function () { var token = "pk.eyJ1Ijoib2VydHoiLCJhIjoiT29aUVYyRSJ9.mz-_gaaigdhurQPHZf7fig"; mapbox = new ol.layer.Tile({ title: "Mapbox pencil", source: new ol.source.XYZ({ url: 'http://api.tiles.mapbox.com/v4/mapbox.pencil/{z}/{x}/{y}.png?access_token=' + token }) }); labels = new ol.layer.Tile({ title: "Place labels", source: new ol.source.XYZ({ url: 'http://api.tiles.mapbox.com/v4/oertz.c5761840/{z}/{x}/{y}.png?access_token=' + token }) }); bing = new ol.layer.Tile({ title: "Bing aerial", source: new ol.source.BingMaps({ key: 'AqE05oJsq-bWa50FPOW2S0eQm9Oqqygc1VTi_WPhUIoKR_-jgA559CRbfndgWAIz', imagerySet: 'Aerial' }) }); zonen = new ol.layer.Image({ title: "Wildruhezonen", source: new ol.source.ImageWMS({ url: "https://wms.geo.admin.ch", params: { LAYERS: "ch.bafu.wrz-wildruhezonen_portal_polygon", SLD: "http://www.mediamaps.ch/oltuto/sld/wrz.sld.xml" } }) }); summits = new ol.layer.Vector({ title: "Summits", source: new ol.source.Vector({ url: "https://ogo.cartodb.com:443/api/v2/sql?q=select * from public.cabanes4326_merge&format=GeoJSON", format: new ol.format.GeoJSON() }) }); map = new ol.Map({ layers: [bing, labels, mapbox, summits, zonen], target: 'map', view: new ol.View({ center: ol.proj.transform([8, 46.7], "EPSG:4326", "EPSG:3857"), zoom: 9 }) }); var layerSwitcher = new ol.control.LayerSwitcher(); map.addControl(layerSwitcher); }); </script> <style type="text/css"> #map { width: 80%; height: 100%; } </style> </head> <body> <div id="map"></div> </body> </html>
Néanmoins, cette personne vous laisse la sympatique “liste à faire” suivante :
(A) Il faudrait mettre un peu d'ordre dans toutes ces couches (certaines sont cachées en l'état actuel) et définir lesquelles sont des couches de base (baselayer) ou de superposition (overlay). Note bien que j'utilise le layerswitcher très pratique de l'exemple Ex4D. En effet, j'ai activé ce layerswitcher (cf balises script et link css) pour facilité la distinction baselayer/overlay, et en plus il insère un menu de contrôle dans l'IHM. Il s'utilise comme suit :
ol.layer
le paramètre “type” avec la valeur “base” (type: “base”
), celle-ci est alors considérée comme une “baselayer”.
(B) Il faudrait aussi définir un bon style pour la couche Summits. Je pensais à une forme de triangle, disons de couleur rouge. C'est possible avec ol.style.RegularShape
, à toi de voir.
(C) Il faudrait encore améliorer l'affichage de la couche Wildruhezonen de sorte que les zones soient transparentes à 50% (on verrait alors les courbes de niveau en transparence). Mais comment faire ?
http://www.mediamaps.ch/oltuto/Exa2A-B-C.html
On part du résultat Ex4E_2.html de l'exemple Ex4E qui personnalise une représentation des districts de Suisse avec les instructions cartographiques CartoCSS définies dans ce fichier http://www.mediamaps.ch/oltuto/sld/g4districts.mss. Pour rappel :
[ak='VD']
) pour appliquer un style différent pour les districts vaudois
(A) Adapter les instructions CartoCSS pour distinguer les districts qui ont répondu NON à l'adhésion à l'UE à plus de 75% (à colorer en rouge) des autres districts (à colorer en vert). Utiliser la colonne uemars2001
de la géotable sous-jacente.
#g4districts98 { polygon-fill: green; [uemars2001 > 75] { polygon-fill: red; } }
(B) Adapter les instructions CartoCSS pour distinguer en plus, les districts qui ont répondu NON à plus de 80%, puis les districts qui ont répondu NON à plus de 85%
#g4districts98 { polygon-fill: green; [uemars2001 > 75] { polygon-fill: yellow; } [uemars2001 > 80] { polygon-fill: orange; } [uemars2001 > 85] { polygon-fill: red; } }
montest
en sélectionnant Rename dataset dans le menu supérieur (3 points verticaux) - répondre Ok rename it!INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('POINT(6.64763 46.78106)', 4326), 'pieton1', 'Simon'); INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('POINT(6.64465 46.78159)', 4326), 'pieton2', 'Henri'); INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('POINT(6.64890 46.77856)', 4326), 'pieton3', 'Adonaldo'); INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('POINT(6.64764 46.78042)', 4326), 'pieton4', 'Paula'); INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('LINESTRING(6.64547 46.78299,6.65159 46.78078)', 4326), 'route1', 'De la patinoire au badminton'); INSERT INTO montest (the_geom, name, description) VALUES (ST_GeometryFromText('LINESTRING(6.64841 46.77851,6.65108 46.78337)', 4326), 'route2', 'De la plage vers le Sud');
Voici donc une géotable montest
prête pour quelques questions de manipulations géospatiales :
(A) Quelle est la longueur de chaque entité de type ST_LineString
de la table ? - ST_Length
select ST_Length(the_geom), description from montest where ST_GeometryType(the_geom) = 'ST_LineString'
(B) Quelles sont les coordonnées du point d'intersection entre la route1 et la route2 ? - ST_Intersection
select ST_AsText(ST_Intersection(the_geom, (select the_geom from montest where name = 'route2'))) from montest where name = 'route1'
(C) A quelle distance sont les deux piétons les plus proches ? - ST_Distance
select A.name as aname, B.name as bname, ST_Distance(A.the_geom, B.the_geom) as dist from montest A, montest B where A.name <> B.name and A.name like 'pieton%' and B.name like 'pieton%' order by dist limit 1