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

Site Tools


geoinf18:oltuto2

This is an old revision of the document!


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

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

Objectif 3 : intégration avec OpenLayers

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

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) :

/* This 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.

  1. Choisir le dataset geoinf_contour_yverdon (fabriqué avec QGIS à partir du MNT N46E006.hgt, Modèle Numérique de Terrain)
  2. Choisir “Create map” (le cas échéant créer un compte)
  3. Renommer la carte “Jouons avec CARTO!”
  4. Elle se compose d'une layer nommé “cartodb_query_N”, la renommer “contour_yverdon_label”
  5. Sélectionner cette layer et utiliser le sélecteur MAP|DATA
  6. Editer le style pour afficher les altitudes sur les lignes de contour :

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

  1. 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)
  2. 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)
  3. 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).

Et avec WMS/SLD ?

geoinf18/oltuto2.1546972508.txt.gz · Last modified: 2019/01/08 19:35 by oertz