GéoInf17 : Evaluation - partie 1

Barème : ~ équipondéré.

1) Initialisation de vue cartographique

(A) Présenter les deux approches pour définir la vue initiale d'une application de cartographie en ligne :

indiquer les méthodes de l'API OpenLayers utilisées pour chacune des deux approches

expliquer la différence pour l'utilisateur final.

(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 la vue : compléter la fonction initRandom pour définir une initialisation de la vue 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>

2) Ordonnancement de couches

L'application ci-dessous n'est pas terminée. Son développeur a été affecté à 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>

Ce même développeur 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 :

toutes les couches sont de type “overlay” par défaut,

en ajoutant à la création d'une couche ol.layer le paramètre “type” avec la valeur “base” (type: “base”), celle-ci est alors définie comme une “baselayer”.

(B) Il faudrait 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 ?

3) Cartographie avec CartoCSS

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 :

un sélecteur filtré est utilisé ([ak='VD']) pour appliqué un style différent pour les districts vaudois

voir aussi la géotable sous-jacente https://ogo.carto.com/tables/g4districts98/public

sans oublier la documentation CartoCSS si besoin https://carto.com/docs/carto-engine/cartocss/properties

(A) Adapter les instructions CartoCSS pour distinguer les districts qui ont répondu à l'adhésion à l'UE NON à plus de 75% (à colorer en rouge) des autres districts (à colorer en vert). Utiliser la colonne uemars2001 de la géotable sous-jacente.

(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%

4) Un peu de Spatial SQL

Préparation

Se connecter à votre compte CARTO (https://carto.com)

Sélectionner Your datasets dans le menu Maps (dans la barre bleu supérieure)

Cliquer NEW DATASET

Cliquer CREATE EMPTY DATASET

Renommer la géotable avec le nouveau nom montest en sélectionnant Rename dataset dans le menu supérieur (3 points verticaux) - répondre Ok rename it!

Activer le mode console SQL avec l'interrupteur METADATA (en bas-gauche)

Remplacer le contenu de la console par les instructions suivantes et exécuter par un Ctrl-S (ou bouton APPLY)

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');

Questions

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

(B) Quelles sont les coordonnées du point d'intersection entre la route1 et la route2 ? - ST_Intersection

(C) A quelle distance sont les deux piétons les plus proches ? - ST_Distance