OpenLayers3 (2018, part 2)

Dans un contexte client/serveur web, comment piloter les styles à appliquer aux couches de données à afficher dans l'application de webmapping. C'est l'objet de cette partie.

4. Pilotage server-side

Pré-requis : avoir accès à une installation de GeoServer

suivre la 1ère section du Tutoriel GeoServer@jElastic

ou installer GeoServer en local : https://docs.geoserver.org/stable/en/user/installation/index.html

A. Publier une couche de données

Il s'agit de publier une couche de gédonnées qui peut être un shapefile (le cas ici) ou une géotable dans une base de données PostgreSQL/PostGIS. Il faut donc d'abord alimenter/connecter GeoServer avec ces géodonnées.

Objectif 1 : copier le shapefile vers GeoServer

Dans le cas d'un déploiement GeoServer avec Jelastic, se connecter en Web SSH sur le serveur de déploiement GeoServer sur Jelastic

Charger la couche de données dans le dossier de stockage des données de GeoServer en exécutant les commandes suivantes avec la console Web SSH

cd /var/geoserver/datadir/
mkdir geodata
cd geodata
wget 'https://drive.switch.ch/index.php/s/Eb56mUvMSrKkKqo/download' -O pk25.zip
unzip pk25.zip

Remarque : dans le cas d'une installation en local, il faut localiser le dossier de stockage qui peut aussi dépendre de l'OS utilisé, exemple /home/olivier/Applications/geoserver-2.14.0/data_dir

Objectif 2 : configurer la publication avec GeoServer

Retourner se loguer au back-office web de GeoServer

Créer un Workspace par défaut (exemple : geoinf -> http://mediamaps.ch/geoinf)

Créer un Store de type Directory of spatial files (shapefiles)

nommer le Store, par exemple geoinf-data

explorer/pointer le dossier geodata préalablement créé
et sauver le Store

Publier la couche de données pk25_decoupage_251 comme le propose immédiatemment d'interface

Dans l'onglet Data

raccourcir le nom de la Layer avec l'intitulé pk25

définir le SRS approprié pour la géodonnées à publier (ici EPSG:4326) - utiliser le SRS finder si besoin

faire calculer l'enveloppe géographique en SRS natif --> Compute from data

de même en Lat/Lon --> Compute from native bounds

sauvegarder la configuration de la Layer

Avec l'outil Layer Preview, visualiser le rendu cartographique par défaut servi par le géoservice WMS de GeoServer (ex. format PNG)

Résultat :
http://docker4785-env-5840548.jcloud.ik-server.com/geoserver-master/geoinf/wms?service=WMS&version=1.1.0&request=GetMap&layers=geoinf:pk25&styles=&bbox=5.873513,45.802669,10.684721,47.86446&width=768&height=330&srs=EPSG:4326&format=image%2Fpng

Objectif 3 : intégration avec OpenLayers

Ajouter cette couche dans votre application de webmapping réalisée au point 3d.

Publier une autre couche de données de votre choix et l'intégrer dans votre application (ex. avec les shapefiles ici https://drive.switch.ch/index.php/s/0BjD03Uz4zF5eYW)

B. Personnaliser un style avec l'extension GeoCSS

Il s'agit de créer un code cartographique pour personnaliser le rendu fait par GeoServer. Pour cela le langage utilisé est GeoCSS, s'inspirant fortement du CSS du W3C.

Pré-requis : avoir accès un GeoServer avec l'extension GeoCSS

suivre la 2nde section du Tutoriel GeoServer@jElastic

pour une installation en local, voir cette même 2nde section

Objectif 1 : définition d'un style interne personnalisé Le style créé a pour but de représenter le découpage PK25 d'une autre manière que le style par défaut polygon

Se connecter au back-office de GeoServer

Créer un Style et le nommer pk25style

Choisir le format CSS (uniquement avec l'extension GeoCSS correctement installée)

Générer une base de code cartographique pour la représentation d'entités géographiques de type POLYGON

Ajouter la propriété GeoCSS de contrôle de la transparence comme suit:

* {
stroke: #000000;
stroke-width: 2;
fill: #ffcc00;
fill-opacity: 0.6;
}

Sauvegarder le style

Visualiser la layer pk25 avec le Layer Preview par une requête WMS qu formqt PNG

Dans la requête définir le paramètre styles= comme suit

http://...&request=GetMap&layers=geoinf:pk25&styles=pk25style&...

Objectif 2 : utilisation du style interne personnalisé avec OpenLayers Ajouter dans l'application réalisée au point 3d la layer pk25 avec le style personnalisé pk25style en configurant l'instance ol.source.ImageWMS comme suit (avec le ##MYSERVERNAME## qui va bien) :

source: new ol.source.ImageWMS({
url: "http://##MYSERVERNAME##.jcloud.ik-server.com/geoserver-master/geoinf/wms",
params: {
VERSION: "1.0.0",
LAYERS: 'pk25',
FORMAT: 'image/png',
STYLES: 'pk25style'
}
})

TODO : “labeling” GeoCSS offre des possibilités d'étiquettage des entités géographiques à représenter (on parle de labeling) :

Ajouter un label avec l'attribut Name (voir https://docs.geoserver.org/stable/en/user/styling/css/properties.html#text-symbology-labeling-part-1)

Limiter l'affichage du labeling à partir d'un certain niveau d'échelle (voir https://docs.geoserver.org/stable/en/user/styling/css/filters.html#filtering-by-rendering-context-scale)

/* These GeoCSS instructions should work as a scale-controlled display of labels */
* {
stroke: #000000;
stroke-width: 2;
/* no fill
fill: #ffcc00;
fill-opacity: 0.6;
*/
[@sd <= 800k] {
label: [Name];
label-anchor: 0.5, 0.5;
font-fill: black;
font-size: 40;
font-weight: bold;
halo-color: white;
halo-radius: 2;
}
}

5. Pilotage client-side

Jusqu'à présent, c'est le serveur qui fait tourner son moteur cartographique pour créer une représentation image des données géographiques et ceci sur la base de styles prédéfinis (ex. avec les langages SLD ou GeoCSS dans GeoServer). Voyons comment le client peut dire son mot et piloter le style “à distance”.

A. Préliminaire CartoCSS

Découverte d'une intéressante plateforme cartographique, CARTO (aka CartoDB) et du langage CartoCSS.

Naviguer vers https://oertz.carto.com/datasets

Choisir le dataset geoinf_contour_yverdon (fabriqué avec QGIS à partir du MNT N46E006.hgt, Modèle Numérique de Terrain)

Choisir “Create map” (le cas échéant créer un compte)

Renommer la carte “Jouons avec CARTO!”

Elle se compose d'une layer nommé “cartodb_query_N”, la renommer “contour_yverdon_label”

Sélectionner cette layer et utiliser le sélecteur MAP|DATA

Editer le style pour afficher les altitudes sur les lignes de contour :

l'UI Style Editor est pratique et avec le sélecteur VALUES|CARTOCSS on peut passer dans un mode “code cartographique” pour affiner la description de style et accéder aux instructions CartoCSS

voir aussi Custom basemap tiles with CartoCSS, J. Freyre, 2014

/* These CartoCSS instructions should display elevation labels along the contour lines */
#layer {
line-width: 2;
line-color: #890500;
line-opacity: 1;
}
#layer::labels {
text-name: [elevation];
text-face-name: 'DejaVu Sans Book';
text-size: 14;
text-fill: #ffffff;
text-label-position-tolerance: 0;
text-halo-radius: 1;
text-halo-fill: #000000;
text-dy: 4;
text-allow-overlap: true;
text-placement: line;
text-placement-type: dummy;
}

B. Pilotage client-side avec OL3 & l'API CARTO

La classe ol.source.CartoDB permet d'ajouter une couche de données hébergée par CARTO dont la représentation servie par CARTO est contrôlée client-side par une configuration (mapConfig).

<html>
<head>
<title>ol3 - 5b - On demand CartoCSS</title>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function () {
map = new ol.Map({
view: new ol.View({
center: ol.proj.transform([6.45, 46.7], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
}),
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
});
// Control client-side the map rendering that will happen server-side
var mapConfig = {
'layers': [{
'type': 'cartodb',
'options': {
'cartocss_version': '2.1.1',
'cartocss': '#geoinf_contour_yverdon{line-color:#FF6600;line-width:2;line-opacity:0.7;}',
'sql': 'SELECT * FROM geoinf_contour_yverdon'
}
}]
};
var contourLyr = new ol.layer.Tile({
source: new ol.source.CartoDB({
account: 'oertz',
config: mapConfig
})
});
map.addLayer(contourLyr);
});
</script>
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

TODO

Adapter l'application avec les instructions CartoCSS permettant d'afficher les altitudes sur les lignes de contour, uniquement pour les altitudes supérieures à 800m (voir aussi Custom basemap tiles with CartoCSS, J. Freyre, 2014)

/* This would be the new mapConfig (just adding a filter instruction) */
var mapConfig = {
'layers': [{
'type': 'cartodb',
'options': {
'cartocss_version': '2.1.1',
'cartocss': '#geoinf_contour_yverdon[elevation > 800]{line-color:#FF6600;line-width:2;line-opacity:0.7;}',
'sql': 'SELECT * FROM geoinf_contour_yverdon'
}
}]
};

Ajouter une couche ol.layer.Tile à partir du dataset des districts de Suisse https://ogo.cartodb.com/tables/g4districts98/public et en construisant un style qui affiche les districts Vaudois différemment des autres (selon votre goût et en dézoomer un peu)

/* This would be the new mapConfig (again using a filter instruction) */
var mapConfig = {
'layers': [{
'type': 'cartodb',
'options': {
'cartocss_version': '2.1.1',
'cartocss': '#g4districts98{polygon-fill:#FF6600;polygon-opacity:0.3;[ak = "VD"]{polygon-fill:#FF0000;}}',
'sql': 'SELECT * FROM g4districts98'
}
}]
};

Adapter l'application pour que le style CartoCSS soit chargé asynchronnement depuis un fichier myGreatRemoteStyle.mss (on proclame le suffixe mss pour Map Style Sheet). https://www.mediamaps.ch/oltuto/Ex5b-3.html

Et avec WMS/SLD ?

Quelles similitudes et différences entre l'approche précédente et celle-ci, qui peut se résumer à une requête : https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetMap&FORMAT=image/png&LAYERS=ch.swisstopo.pixelkarte-pk25.metadata-kartenblatt&SRS=EPSG:3857&STYLES=&WIDTH=2285&HEIGHT=897&BBOX=174582,5648084,1571851,6196597&SLD=https://drive.switch.ch/index.php/s/brNwxHVjcBeZVDc/download