"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
This is an old revision of the document!
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.
Pré-requis : avoir accès à une installation de GeoServer
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
cd /var/geoserver/datadir/ mkdir geodata cd geodata wget 'https://drive.switch.ch/index.php/s/Eb56mUvMSrKkKqo/download' -O pk25.zip unzip pk25.zip
Objectif 2 : configurer la publication avec GeoServer
Objectif 3 : intégration avec OpenLayers
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
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
* { stroke: #000000; stroke-width: 2; fill: #ffcc00; fill-opacity: 0.6; }
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) :
Name
(voir https://docs.geoserver.org/stable/en/user/styling/css/properties.html#text-symbology-labeling-part-1)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”.
Découverte d'une intéressante plateforme cartographique, CARTO (aka CartoDB) et du langage CartoCSS.
Il s'agit d'ajouter une couche de données servie par CARTO dans notre application OL3 :
<html> <head> <title>ol3 - Ex5b - On demand CartoCSS</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: 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() }) ] }); cartodb.Tiles.getTiles({ type: 'cartodb', user_name: 'oertz', sublayers: [{ sql: 'SELECT * FROM geoinf_contour_yverdon', cartocss: "#geoinf_contour_yverdon{line-color:#FF6600;line-width:2;line-opacity:0.7;}" }] }, 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); admLyr = new ol.layer.Tile({ source: new ol.source.XYZ({ url: tilesUrl }) }) map.addLayer(admLyr); }); }); </script> <style type="text/css"> #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> </body> </html>
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