GIS and Media fusion
"The explosive growth of the GeoWeb and geographic information has made GIS powerful media for the general public to communicate, but perhaps more importantly, GIS have also become media for constructive dialogs and interactions about social issues." - Sui & Goodchild
User Tools
Table of Contents
GéoInf17 : Evaluation - partie 1
Barème : ~ équipondéré.
1) Initialisation de vue cartographique
(A) Présenter les deux approches permttant de 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.
2 approches en effet :
- approche se basant sur une enveloppe géographique dont l'étendue est défini par un tableau [minx, miny, maxx, maxy] (par exemple [-18, 37, 38, 57])
- méthodes utilisées : ol.View.fit, ol.Map.setView
- quelque-soit la taille et le ratio de la fenêtre d'exécution de l'application, cette approche garantie que cette étendue est complètement rendue visible à l'utilisateur. Mais l'effet de bord est que l'échelle peut varier.
- approche se basant sur un point de centrage de la carte (par exemple [10, 47]) et un niveau de zoom
- méthodes utilisées : ol.View.setCenter, ol.View.setZoom
- c'est en quelque-sorte l'inverse de la première approche - quelque-soit la taille et le ratio de la fenêtre d'exécution de l'application, cette approche garantie que l'échelle de visualisation est toujours la même, pour tous les utilisateurs. L'effet de bord est l'étendue de ce qui est visible peut varier.
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
2) Ordonnancement de couches
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 :
- toutes les couches sont considérées de type “overlay” par défaut,
- en ajoutant à la création d'une couche
ol.layerle 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
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 appliquer 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 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;
}
}
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
montesten 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
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
