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 cette même 2nde section dans le cas d'une installatio en local

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

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

Il s'agit d'ajouter une couche de données servie par CARTO dans notre application OL3 :

  1. l'application charge l'API CORE JavaScript de CARTO (cf. https://carto.com/docs/carto-engine/carto-js/core-api/)
  2. la méthode cartodb.Tiles.getTiles permet d'assembler un dataset sélectionné (sublayers/sql) avec un style donné (sublayers/cartocss) - notez bien aussi l'importance du user_name
  3. le callback construit l'URL qui correspond au cache de tuiles sous-jacent (ex. a.ashbu.cartocdn.com/ogo/api/v1/map/4c64e8d931417377282738/{z}/{x}/{y}.png)
  4. l'URL est alors utilisée pour créer une couche ol.layer.Tile sur la base de cette source tuilée avec l'habituel ol.source.XYZ
<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>

TODO

  1. Adapter l'application avec les instructions CartoCSS préparées au point 5a ci-dessus pour 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.1543354920.txt.gz · Last modified: 2018/11/27 22:42 by oertz