<!DOCTYPE html>
\n<html>
\n<head>
\n<title>Recherche d’itin\u00e9raire avec pgRouting <\/title>
\n<meta charset=\u00a0\u00bbutf-8″>
\n<style>
\n#map {
\nwidth: 100%;
\nheight: 800px;}
\n<\/style>
\n<\/head>
\n<body>
\n<div id=\u00a0\u00bbmap\u00a0\u00bb><\/div>
\n<div id=\u00a0\u00bbdesc\u00a0\u00bb>Cliquez sur la carte pour d\u00e9finir le point de d\u00e9part – cliquez \u00e0 nouveau pour d\u00e9finir le point d’arriv\u00e9e – la route sera trac\u00e9e<\/div><div align=\u00a0\u00bbcenter\u00a0\u00bb><img src=\u00a0\u00bb0.png\u00a0\u00bb id=\u00a0\u00bbimage\u00a0\u00bb width=\u00a0\u00bb60″ height=\u00a0\u00bb60″><\/div>
\n<button id=\u00a0\u00bbclear\u00a0\u00bb>Effacer<\/button>
\n<script src=\u00a0\u00bbhttp:\/\/openlayers.org\/en\/v3.16.0\/build\/ol.js\u00a0\u00bb><\/script>
\n<script type=\u00a0\u00bbtext\/javascript\u00a0\u00bb>
\nvar map = new ol.Map({
\ntarget: ‘map’,
\nlayers: [
\nnew ol.layer.Tile({
\nsource: new ol.source.OSM()
\n})
\n],
\nview: new ol.View({
\ncenter: [-500000, 6172000],
\nzoom: 12
\n}),
\ncontrols: ol.control.defaults({
\nattributionOptions: {
\ncollapsible: false
\n}
\n})
\n});<\/p>\n

\/\/ Les points de d\u00e9part et d’arriv\u00e9e.
\nvar startPoint = new ol.Feature();
\nvar destPoint = new ol.Feature();<\/p>\n

\/\/ La couche vecteur utilis\u00e9e pour afficher les points de d\u00e9part et d’arriv\u00e9e.
\nvar vectorLayer = new ol.layer.Vector({
\nsource: new ol.source.Vector({
\nfeatures: [startPoint, destPoint]})
\n});<\/p>\n

map.addLayer(vectorLayer);
\nvar params = {
\nLAYERS: ‘pgrouting:itineraire’,
\nFORMAT: ‘image\/png’
\n};
\n\/\/ La fonction de transformation des coordonn\u00e9es \u00e0 partir de l’EPSG:3857
\n\/\/ vers\u00a0 EPSG:4326<\/a>.
\nvar transform = ol.proj.getTransform(‘EPSG:3857’, ‘EPSG:4326’);<\/p>\n

\/\/ Mise en place d’une \u00e9coute sur les \u00e9venements de la carte.
\nmap.on(‘click’, function(event) {
\nif (startPoint.getGeometry() == null) {
\n\/\/ Premier click.
\nstartPoint.setGeometry(new ol.geom.Point(event.coordinate));
\n} else if (destPoint.getGeometry() == null) {
\n\/\/ Deuxi\u00e8me click.
\ndestPoint.setGeometry(new ol.geom.Point(event.coordinate));
\n\/\/ Transformations des coordonn\u00e9es \u00e0 partir de celle de la carte (EPSG:3857)
\n\/\/ vers celle du serveur (EPSG:4326).
\nvar startCoord = transform(startPoint.getGeometry().getCoordinates());
\nvar destCoord = transform(destPoint.getGeometry().getCoordinates());
\nvar viewparams = [
\n‘x1:’ + startCoord[0], ‘y1:’ + startCoord[1],
\n‘x2:’ + destCoord[0], ‘y2:’ + destCoord[1]
\n];
\nparams.viewparams = viewparams.join(‘;’);
\nvar source =new ol.source.ImageWMS({
\nurl: ‘http:\/\/localhost:8080\/geoserver\/pgrouting\/wms’,
\nparams: params
\n})
\nresult = new ol.layer.Image({
\nsource: source
\n});
\nsource.on(‘imageloadstart’, function() {
\ndocument.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbchargement…\u00a0\u00bb;
\ndocument.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbtree_loading.gif\u00a0\u00bb;
\n});
\nsource.on(‘imageloadend’, function() {
\ndocument.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbtermin\u00e9 OK!\u00a0\u00bb;
\ndocument.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbOK.jpg\u00a0\u00bb;
\n});
\nsource.on(‘imageloaderror’, function() {
\ndocument.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bberreur!\u00a0\u00bb;
\ndocument.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbno.png\u00a0\u00bb;
\n});
\nmap.addLayer(result);
\n}
\n});<\/p>\n

var clearButton = document.getElementById(‘clear’);
\nclearButton.addEventListener(‘click’, function(event) {
\n\/\/ R\u00e9initialise les entit\u00e9s\u00a0 \u00ab\u00a0start\u00a0\u00bb et \u00ab\u00a0destination\u00a0\u00bb .
\nstartPoint.setGeometry(null);
\ndestPoint.setGeometry(null);
\ndocument.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbCliquez sur la carte pour d\u00e9finir le point de d\u00e9part – cliquez \u00e0 nouveau pour d\u00e9finir le point d’arriv\u00e9e – la route sera trac\u00e9e\u00a0\u00bb;
\ndocument.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bb0.png\u00a0\u00bb;
\n\/\/ Remove the result layer.
\nmap.removeLayer(result);
\n});
\n<\/script>
\n<\/body>
\n<\/html><\/div><\/div>\n

<\/p>\n

Voyons maintenant en d\u00e9tail les diff\u00e9rentes parties du code.<\/p>\n

Pour ce qui est du d\u00e9but, que du classique:<\/p>\n

Nous d\u00e9finissons la taille de la carte sur notre page: elle occupera toute la largeur de la page et aura 800 pixels en hauteur.<\/p>\n

<div id=\u00a0\u00bbmap\u00a0\u00bb><\/div><\/em>
\n <div id=\u00a0\u00bbdesc\u00a0\u00bb>Cliquez sur la carte pour d\u00e9finir le point de d\u00e9part – cliquez \u00e0 nouveau pour d\u00e9finir le point d’arriv\u00e9e – la route sera trac\u00e9e<\/div><\/em>
\n <div align=\u00a0\u00bbcenter\u00a0\u00bb><img src=\u00a0\u00bb0.png\u00a0\u00bb id=\u00a0\u00bbimage\u00a0\u00bb width=\u00a0\u00bb60″ height=\u00a0\u00bb60″><\/div><\/em>
\n <button id=\u00a0\u00bbclear\u00a0\u00bb>Effacer<\/button><\/em><\/p>\n

Nous pla\u00e7ons donc le div de la carte, en dessous une ligne de texte qui nous servira comme zone de messages, puis une image pour indiquer l’\u00e9tat de transfert et tout en dessous un bouton Effacer<\/strong> qui permettra de r\u00e9initialiser la page. L’image 0.png est une image vide.<\/p>\n

Nous retrouvons la r\u00e9f\u00e9rence \u00e0 la biblioth\u00e8que openlayers utilis\u00e9e:<\/p>\n

<script src=\u00a0\u00bbhttp:\/\/openlayers.org\/en\/v3.16.0\/build\/ol.js\u00a0\u00bb><\/script><\/em><\/p>\n

et ensuite la cr\u00e9ation de notre carte :<\/p>\n

Nous chargeons dans notre carte la couche OpenStreetMaps, nous centrons l’affichage sur les coordonn\u00e9es EPSG:3857 du centre de notre zone d’int\u00e9r\u00eat, nous d\u00e9finissons l’\u00e9tendue affich\u00e9e au d\u00e9part avec le facteur de zoom (12) et finalement les contr\u00f4les souhait\u00e9s.<\/p>\n

La suite du code traite les points de d\u00e9part et d’arriv\u00e9e.<\/p>\n

Nous cr\u00e9ons deux entit\u00e9s (features) pour accueillir ces points<\/p>\n

\/\/ Les points de d\u00e9part et d’arriv\u00e9e.<\/em>
\n var startPoint = new ol.Feature();<\/em>
\n var destPoint = new ol.Feature();<\/em><\/p>\n

Puis nous d\u00e9finissons une couche vecteur pour les afficher<\/p>\n

\/\/ La couche vecteur utilis\u00e9e pour afficher les points de d\u00e9part et d’arriv\u00e9e.<\/em>
\n var vectorLayer = new ol.layer.Vector({<\/em>
\n source: new ol.source.Vector({<\/em>
\n features: [startPoint, destPoint]})<\/em>
\n });<\/em><\/p>\n

map.addLayer(vectorLayer);<\/em><\/p>\n

Nous cr\u00e9ons une variable params avec certains param\u00e8tres fixes de notre requ\u00eate \u00e0 envoyer \u00e0 Geoserver, le nom de a couche Geoserver \u00e0 interroger et le format sous lequel nous voulons recevoir le r\u00e9sultat.<\/p>\n

var params = {<\/em>
\n LAYERS: ‘pgrouting:itineraire’,<\/em>
\n FORMAT: ‘image\/png’<\/em>
\n };<\/em><\/p>\n

Puis nous d\u00e9fissons une fonction de transformatons de coordonn\u00e9es. OpenStreetMap travaille en coordonn\u00e9es sph\u00e9riques Pseudo-Mercator (EPSG:3857). Mais nos donn\u00e9es PostGis<\/a> sont en coordonn\u00e9es g\u00e9ographiques (EPSG:4326).<\/p>\n

Quand nous allons r\u00e9cup\u00e9rer le clic sur la carte, les coordonn\u00e9es seront en 3857. Nous devrons es transformer en 4326 avant d’envoyer la requ\u00eate vers Geoserver.
\n\/\/ La fonction de transformation des coordonn\u00e9es \u00e0 partir de l’EPSG:3857<\/em>
\n \/\/ vers\u00a0 EPSG:4326.<\/em>
\n var transform = ol.proj.getTransform(‘EPSG:3857’, ‘EPSG:4326’);<\/em><\/p>\n

Maintenant nous mettons en place l’\u00e9coute de l’\u00e9v\u00e9nement click sur notre carte. Cette partie du code sera activ\u00e9e quand l’utilisateur cliquera sur la carte.<\/p>\n

\/\/ Mise en place d’une \u00e9coute sur les \u00e9venements de la carte.<\/em>
\n map.on(‘click’, function(event) {<\/em><\/p>\n

Si le startpoint est vide, cela indique que c’est le premier click sur la carte et que c’est le point de d\u00e9part qui doit \u00eatre renseign\u00e9.
\n if (startPoint.getGeometry() == null) {<\/em>
\n \/\/ Premier click.<\/em>
\n startPoint.setGeometry(new ol.geom.Point(event.coordinate));<\/em><\/p>\n

Si, par contre, le startpoint est d\u00e9j\u00e0 rensign\u00e9, nous sommes en pr\u00e9sence du deuxi\u00e8me click. Nous allons donc renseigner le destPoint :
\n } else if (destPoint.getGeometry() == null) {<\/em>
\n \/\/ Deuxi\u00e8me click.<\/em>
\ndestPoint.setGeometry(new ol.geom.Point(event.coordinate));<\/em><\/p>\n

Et nous encha\u00eenons directement sur le processus de soumission de la requ^\u00f9ete \u00e0 Geoserver.<\/p>\n

Nous transformons les coordonn\u00e9es des deux points cliqu\u00e9s:
\n \/\/ Transformations des coordonn\u00e9es \u00e0 partir de celle de la carte (EPSG:3857)<\/em>
\n \/\/ vers celle du serveur (EPSG:4326).<\/em>
\n var startCoord = transform(startPoint.getGeometry().getCoordinates());<\/em>
\n var destCoord = transform(destPoint.getGeometry().getCoordinates());<\/em><\/p>\n

et nous construisons la cha\u00eene de caract\u00e8res avec les param\u00e8tres x1, y1,x2 et y2 n\u00e9cessaires \u00e0\u00a0 notre couche Geoserver (voir l’article pr\u00e9c\u00e9dent)
\n var viewparams = [<\/em>
\n ‘x1:’ + startCoord[0], ‘y1:’ + startCoord[1],<\/em>
\n ‘x2:’ + destCoord[0], ‘y2:’ + destCoord[1]<\/em>
\n ];<\/em><\/p>\n

Voil\u00e0, nous avons tous les \u00e9l\u00e9ments n\u00e9cessaires pour construire le message \u00e0 envoyer \u00e0 Geoserver. Ce mesage nous le mettons dans une variable source<\/strong><\/em>.<\/p>\n

params.viewparams = viewparams.join(‘;’);<\/em>
\n var source =new ol.source.ImageWMS({<\/em>
\n url: ‘http:\/\/localhost:8080\/geoserver\/pgrouting\/wms’,<\/em>
\n params: params<\/em><\/p>\n

Et nous envoyons la requ\u00eate vers Geoserver en demandant de mettre le r\u00e9sultat dans une nouvelle couche Image (nous avons demand\u00e9 le retour sous forme d’image png un peu plus haut) \u00e0 afficher dans notre map<\/p>\n

result = new ol.layer.Image({<\/em>
\n source: source<\/em><\/p>\n

Comme l’interrogation n’est pas instantan\u00e9e, il vaut mieux tenir au courant l’utilisateur de ce qui se passe sans l’obliger \u00e0 rester devant un \u00e9cran semblant fig\u00e9.<\/p>\n

Les lignes suivantes affichent un texte de message et une image montrant que la requ\u00eate est en cours, puis quand le transfert est termin\u00e9, indiquant s’il ‘est bien pass\u00e9 ou non.<\/p>\n

source.on(‘imageloadstart’, function() {<\/em>
\n document.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbchargement…\u00a0\u00bb;<\/em>
\n document.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbtree_loading.gif\u00a0\u00bb;<\/em>
\n });<\/em>
\n source.on(‘imageloadend’, function() {<\/em>
\n document.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbtermin\u00e9 OK!\u00a0\u00bb;<\/em>
\n document.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbOK.jpg\u00a0\u00bb;<\/em>
\n });<\/em>
\n source.on(‘imageloaderror’, function() {<\/em>
\n document.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bberreur!\u00a0\u00bb;<\/em>
\n document.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bbno.png\u00a0\u00bb;<\/em>
\n });<\/em><\/p>\n

Nous chargeons la couche dans notre carte:<\/p>\n

map.addLayer(result);<\/em><\/p>\n

Finalement, nous traitons le click sur le bouton Effacer:<\/p>\n

var clearButton = document.getElementById(‘clear’);<\/em>
\n clearButton.addEventListener(‘click’, function(event) {<\/em>
\n \/\/ R\u00e9initialise les entit\u00e9s\u00a0 \u00ab\u00a0start\u00a0\u00bb et \u00ab\u00a0destination\u00a0\u00bb .<\/em>
\n startPoint.setGeometry(null);<\/em>
\n destPoint.setGeometry(null);<\/em>
\n document.getElementById(\u00ab\u00a0desc\u00a0\u00bb).innerHTML =\u00a0\u00bbCliquez sur la carte pour d\u00e9finir le point de d\u00e9part – cliquez \u00e0 nouveau pour d\u00e9finir le point d’arriv\u00e9e – la route sera trac\u00e9e\u00a0\u00bb;<\/em>
\n document.getElementById(\u00ab\u00a0image\u00a0\u00bb).src =\u00a0\u00bb0.png\u00a0\u00bb;<\/em>
\n \/\/ Remove the result layer.<\/em>
\n map.removeLayer(result);<\/em>
\n});<\/p>\n

En vidant les entit\u00e9s startPoint et destPoint, en remettant le message d’accueil et l’image vide et en effa\u00e7ant la couche vecteur contenat l’itin\u00e9raire pr\u00e9c\u00e9dent.<\/p>\n

Nous pouvons ouvrir cette page dans notre navigateur et voir l’application tourner:<\/p>\n

http:\/\/www.sigterritoires.fr\/wp-content\/uploads\/2016\/06\/pgfrouting2.mp4<\/a><\/video><\/div>\n","protected":false},"excerpt":{"rendered":"
Nous arrivons \u00e0 la fin de cette s\u00e9rie. Apr\u00e8s avoir mis en place la base de donn\u00e9es Postgres\/Postgis, nous avons configur\u00e9 Geoserver pour servir les r\u00e9sultats de pgrouting en un lux WMS. Il ne reste plus…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[311,62],"tags":[315,337,326,227,312,58,132],"class_list":["post-3362","post","type-post","status-publish","format-standard","hentry","category-postgresql","category-qgis-2","tag-geoserver","tag-open-layers","tag-pgrouting","tag-postgis","tag-postgresql","tag-qgis","tag-wms"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t