40
GeoSIE – Guide intégrateur F. Pasquier R. Quique Avec la collaboration de A. Mauclerc P. Lagarde Octobre 2012 Version 1.0.0

forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

GeoSIE – Guide intégrateur

F. Pasquier R. Quique

Avec la collaboration de A. Mauclerc P. Lagarde

Octobre 2012 Version 1.0.0

Document élaboré en application duschéma national des données sur l’eau

Page 2: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent
Page 3: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

CONTEXTE

Dans le cadre du SIE, plusieurs besoins convergents ont été identifiés relatifs à la diffusion de données géographiques sur Internet. Le premier d’entre eux a concerné le Référentiel des Obstacles à l’Ecoulement (ROE), au travers de l’application d’initialisation de ce référentiel, alias GeOBS. Les autres besoins se sont rapidement fait sentir, besoins tant au niveau fonctionnel qu’au niveau charte graphique et ergonomique.

La décision a donc été prise d’extraire de GeOBS une brique réutilisable fixant des choix cohérents techniques, fonctionnels et ergonomiques. Cette brique a été baptisée GeoSIE. Elle a subi plusieurs évolutions majeures au fur et mesure de ces intégrations dans différentes applications du SIE. A l’heure de l’écriture de ce document, elle est déjà utilisée dans les applications GeOBS, GeoIF, ADES (portail public), l’Atlas SANDRE, le site Services, les applications Gest’eau et le portail producteur de la BNPE.

DOCUMENTS DE RÉFÉRENCE

- GeoSIE – Guide utilisateur - N. Fauvet (GFI), R. Quique (BRGM), A. Mauclerc (BRGM), P. Lagarde (BRGM)

AUTEURS ET CONTRIBUTEURS

F. Pasquier, analyste programmeur (BRGM)

R. Quique, analyste programmeur (BRGM)

Avec la contribution deA. Mauclerc, chef de projet SI (BRGM)

P. Lagarde, directeur de projet SI (BRGM)

Sous la coordination deL. Coudercy, chef de projet référentiel (ONEMA)H. Augu, ingénieur géomatique (ONEMA)

Droits d’usage : PublicMots-clés : brique cartographiqueCouverture géographique : FranceNiveau géographique : n/aNiveau de lecture : intégrateur, connaissance en informatique et WebSIGLangue : françaisDiffuseur : Office national de l’eau et des milieux aquatiques (Onema)

Page 4: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent
Page 5: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

OBJET ET DOMAINE D’APPLICATION

Le présent document est destiné à tout intégrateur potentiel de la brique GeoSIE dans une application du SIE ou application propre d’un partenaire SIE. Il décrit les grandes lignes architecturales de la brique ainsi que les modalités d’intégration préconisées.

AVERTISSEMENTS

Ce document se réfère à la version 4 de la brique GeoSIE, et n’est applicable qu’à cette version.

Page 6: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

SOMMAIRE

1. Introduction...........................................................................72. Présentation de l’architecture................................................7

2.1. ARCHITECTURE GENERALE...............................................................................72.2. BLOC SERVEUR....................................................................................................82.3. COMPOSANTS LOGICIELS DU BLOC CLIENT...................................................9

3. Configuration de la brique cartographique..............................93.1. INSTALLATION......................................................................................................93.2. MODULES ET COMPOSANTS............................................................................133.3. ORGANISATION GENERALE DE LA BRIQUE..................................................153.4. INTEGRATION DANS UNE PAGE HTML...........................................................153.5. FICHER DE CONFIGURATION..........................................................................173.6. GESTION DES STYLES AVEC SLD...................................................................183.7. PROXY..................................................................................................................193.8. IMPRESSION........................................................................................................20

3.8.1. Organisation générale du service d’impression.......................................203.8.2. Configuration du service.............................................................................203.8.3. Appel du service..........................................................................................213.8.4. Mise en page du template SIE.....................................................................22

3.9. AJOUTER UN NOUVEAU WIDGET DANS L'ACCORDEON.............................233.10. PREAMBULE SUR L'INITIALISATION DE L'INTERFACE.................................243.11. AJOUTER UN NOUVEAU CONTROLE SUR L’OBJET CARTO........................243.12. MINIFICATION DU JAVASCRIPT........................................................................243.13. INTEGRATION DRUPAL.....................................................................................25

4. Données cartographiques.....................................................264.1. GENERALITES.....................................................................................................264.2. WMC.....................................................................................................................27

5. Mécanisme d’événements.....................................................29

Page 7: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

GUIDE

1.Introduction

Ce document a pour but de présenter le fonctionnement et décrire l’utilisation de la brique cartographique dédiée à la publication de données cartographiques sur le Web dans le cadre du Système d’Information sur l’Eau, et ce dans le but de l’intégrer dans de nouveaux projets.

La brique cartographique a pour objectif de constituer un outil technologique réutilisable, gratuit et ouvert pour constituer des sites web cartographiques ou intégrer des composantes cartographiques dans un site web existant. Cette brique cartographique (GeoSIE) intègre l’ensemble des fonctionnalités « classiques » web en intégrant les éléments génériques suivants :

une ergonomie et charte graphique commune pour l’ensemble des interfaces cartographiques dans le SIE

des fonctionnalités communes pour tous les sites, par exemple la navigation dans les différents territoires métropolitains, DOM au regard des besoins de la Directive Cadre sur l’Eau

Le présent document a pour objet de décrire comment exploiter et utiliser cette brique cartographique en relation avec des données / services mis à disposition. Elle cible donc plus particulièrement les équipes d’architecture et de développement en charge de réaliser ou d’intégrer une interface cartographique SIE dans un projet de diffusion Web.

Le document est organisé en deux grandes parties : nous verrons tout d’abord son architecture, notamment à travers divers exemples concrets de l’utilisation des divers modules qui la compose. Ensuite, nous listerons les événements générés par la brique et son interfaçage avec des composants applicatifs.

2.Présentation de l’architecture

2.1.ARCHITECTURE GENERALE

L’architecture de cette brique s’appuie sur les principes suivants :

une architecture basée sur les principes de l’Open Geospatial Consortium (OGC), plus particulièrement sur une approche de services (SOA)

une architecture respectant les spécifications techniques du SIE (Livre vert de l’architecture & Spécifications techniques ASIE Version 1 – Services).

Sans rentrer dans les détails, le développement d’un composant cartographique web s’appuie de manière simplifiée sur deux blocs :

un bloc « serveur » composé de 2 parties :o une partie en charge de la diffusion des données sous forme de services WMS (image)

et WFS (vecteur) alias serveur cartographique, o une partie en charge du traitement des données métiers et de l’impression.

un bloc « client » dédié à l’interface, la gestion dynamique des actions de l’internaute et les fonctions « utilisateurs ».

Page 8: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

2.2.BLOC SERVEUR

Le bloc serveur n’est pas décrit en détail dans le cadre de ce document. En effet, il est supposé que les différentes données, que ce soit des référentiels géographiques ou des données métier relatives aux informations affichées dans la carte, sont administrées, organisées et diffusées via des services OGC WMS et/ou WFS.

Actuellement, la brique a été testée et mis en production avec un bloc serveur de diffusion de données via la plate-forme cartographique MapServer (GeoServer fonctionne certainement).

Les développements d’un proxy (bloc « Serveur ») ont été réalisé pour les plates-formes suivantes :

.NET 2.0+ (IIS 6+) Java 5+ (tomcat 5.5) PHP

cmp Architecture

«application»GeoSIE

«client»GeoSIE

«database»Base Métier

d'exemple

«service»WMS / WFS

GetMapGetFeature

«module»Carto

«module»Metier d'exemple

«client»Carto

«client»Metier

«data»Fonds,

référentiels...

ImpressionProxy

Contexte

Demanderafraichissement

Actions

R/W Données métier«flow»

Données autres

«flow»

Données Métier

«flow»

Images

«flow»

R/W Données métier«flow»

Données brutes

«flow»Images

«flow»

Données brutes«flow»

PDF

«flow»

Page 9: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

L’impression de la carte et de données attributaires est seulement disponible sur une plate-forme Java. Le service d’impression est basé sur le module d’impression Print du Framework MapFish (version 1.2 novembre 2010 adaptée à nos besoins (projet GeoSIE-Mapfish sur le SVN)).

2.3.COMPOSANTS LOGICIELS DU BLOC CLIENT

Le bloc « Client » est purement réalisé au travers un navigateur web exploitant largement les technologies HTML et AJAX.

La brique cartographique SIE s’appuie sur les librairies suivantes :

OpenLayers 2.10 jQuery 1.3.2 jQuery UI 1.8.12 Proj4Js

Ces librairies sont étendues par différents modules identifiés par le package « js » et «  GeoSIE ». Ces librairies exploitent les technologies web « classiques » : HTML, CSS, Javascript, XML et ne nécessitent pas de plug-in sur les navigateurs récents :

Internet Explorer 6+ Firefox 2+ Opéra 9+ Safari 3+ Chrome

3.Configuration de la brique cartographique

3.1. INSTALLATION

La librairie est disponible via SVN :Repository : https://forge.eaufrance.fr/svn/sie-geo-brick/trunk

Module : GeoSIE-BriqueTag : HEAD

Depuis Eclipse (www.eclipse.org), voici la procédure pour récupérer le projet : Menu File > Import... Déployer "SVN" et choisir 'Project from SVN" puis cliquez sur "Next"

Page 10: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

Créez ou réutilisez le repository de la forge du SIE, puis "Next":

Page 11: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

Sélectionner le projet GeoSIE-Brique de la version souhaitée (version stable dans tags, version la plus récente dans trunk)

Page 12: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

Entrez vos identifiants et cliquez sur "Next"

Page 13: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

Si demandé, importez la révision de tête. Puis donnez un nom au projet à définir pour le workspace. Dans le cadre d'un nouveau projet, utilisez le nom de votre futur projet. Utilisez "GeoSIE-Brique" ou "geo-sie-brick" s'il s'agit simplement d'importer la brique

applicative.

La procédure de récupération se lance, lorsqu’elle se termine le projet est prêt à être utilisé.

Le projet GeoSIE-MapFish contient les sources du module d’impression PDF.Le projet GeoSIE-Build permet de minifier le projet et créer la documentation.Le projet GeoSIE-Exemples contient les sources du site http://geosie.eaufrance.fr/

3.2.MODULES ET COMPOSANTS

Tous les composants du layout cartographique sont configurés dans le fichier lib/GeoSIE/Brique.js. Chaque composant est associé à un élément HTML, auquel il convient de donner l’identifiant (id) adéquat :

Page 14: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

navigationButtonBar_panel (1)(2)(3)(4) : contient tous les boutons utiles à la navigation : zooms, faire glisser la carte, vue initiale, historique. Les éléments pour l’édition, les traitements et l’impression

scale (15) : échelle numérique

mapList (12) : liste des contextes

mainMapPane (9) : carte principale

locatorMap (10) : mini carte

zoomBar (11) : barre de zoom

scaleBar (13) : échelle graphique

cursorTrack (14) : traceur de coordonnées en temps réel avec la projection associée

layerList (5) : liste des couches avec possibilité de changer l’ordre, l’opacité, la visibilité. Ceci est un widget.

legend (6) : légende des couches affichées (non représentée sur la figure; dépend des contrôles utilisés: layerList+Legend ou layerListLegend). Ceci est un widget.

layerListLegend (6) et (7): non présenté sur l’image, c’est un widget qui un mixte du widget legend et layerList.

featureList (8) : contient la liste des éléments sélectionnés. Ceci est un widget.

crsSelector (16) : sélection du système de représentation des coordonnées

sourceTrack (17) : organismes source des couches présentées

N'apparait pas visiblement sur la capture:

gazetteer (7) : formulaire de recentrage sur coordonnées ou GeoName dans un système de coordonnées choisi. Ceci est un widget.

17 8

6

5

1614

12

1110

9

15

13

4321

Page 15: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

permalink (dessous de 17) : permalien, permet de transmettre l’état de la carte sous forme de lien hypertext.

3.3.ORGANISATION GENERALE DE LA BRIQUE

L’arborescence de la brique cartographique (côté client (dossier /GeoSIE-Brique/WebContent/)) s’organise de la façon suivante :

config : contient les templates au format PDF et le fichier de layout pour l’impression PDF (print-layout.yaml ou print-layout-legend.yaml).

context : contient le fichier de paramétrage des couches exploitées ou exploitables dans le périmètre de l'application. Cette liste au format XML conditionne aussi bien le contenu du sélecteur de couche que les toutes les couches que le visualiseur pourrait gérer en arrière-plan.

images : éléments graphiques utilisés. js : le script métier sculptés pour les usages de la brique cartographique. jsbuild : contient l’ensemble des fichiers js du dossier js dans un seul fichier javascript minifié

(avec Jsbuild). Le script JsBuild est proposé dans le dossier jsbuild en racine du projet. La version déjà minifiée n'est pas présente sur SVN.

lib : contient les librairies tierces et Open Source composant la brique. OpenLayers, jQuery, Proj4Js. Ainsi que le core de la brique GeoSIE en elle-même.

sld : fichiers de style pour la mise en forme des éléments géographiques délivrés par les WFS style : fichiers CSS pour la mise en forme des éléments de la page HTML. Les images

concernées par les feuilles de style sont dans un sous-dossier relatif. main.css et viewer.css définissent les styles globaux de l'interface du visualiseur. Les autres feuilles de style définissent l'apparence des composants et widgets greffés dans l'interface.

Les éléments côté « serveur » sont inclus dans le répertoire « src », le proxy est disponible dans les technologies Java, PHP et .NET. Le service d’impression est seulement disponible avec la technologie Java.

Les sources du module d’impression sont dans le projet « GeoSIE-MapFish ».

3.4. INTEGRATION DANS UNE PAGE HTML

Le point d’entrée de la librairie cartographique est représenté par le namespace javascript « GeoSIE » inclus dans le fichier « lib/GeoSIE/GeoSIE.js » qu’il faut donc charger dans la page juste après l'inclusion de la librairie OpenLayers :

<script type="text/javascript" src="lib/GeoSIE/GeoSIE.js"></script>

Ensuite vous pourriez inclure votre script métier, ou notre bouchon "js/Business.js".

Puis, il faut créer les éléments HTML (les DIV sont préférables) destinés à recevoir les composants cartographiques, par exemple au sein d'un accordéon jQuery (id="accordion") :

<div id="container_geosie_brique"> <div id="button" style="z-index:2000"> <div id="navigationTitle">Navigation</div> <div id="editionTitle">Mode édition</div> <div id="wpsTitle">Traitement</div> <div id="navigationButtonBar"> <div id="navigationButtonBar_panel" class="olControlPanel"></div> </div> </div> <div id="others" style="z-index:3000;"> <div id="scale"></div> <div id="zones"></div> <div id="processes"><dl class="dropdownWps" id="wpsList"></dl></div> </div>

Page 16: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

<div id="map" style="z-index:1000"> <div id="mainMapPane" style="z-index:1100;"> <noscript>

this page requires Javascript to be enabled </noscript> <div id="olmap"></div> <div id="locatorContainer"> <div id="locatorMap"></div> <div id="zoomBar"></div> <div id="hideLocator"><img src="images/locator_on.png" class="hideovm1" id="hide1" alt="" title="Fermer la mini carte"></div> </div> <div id="status_loading_container"> <div id="status_loading"><img src="images/wait.gif" style="display:inline" />&nbsp;Chargement</div> </div> <div id="scalebar"></div> <div id="mapFooter"> <div id="cursorTrack"></div>

<div id="crsSelector" style="position: absolute; left: 42%;"></div> <div id="sourceTrack"></div> </div> </div> <div id="accordion" style="z-index:1100"> <div class="accordiontweak" style="z-index:60"> <h3><center><a href="#">&nbsp;Données</a></center></h3> <div id="layerListLegend" ></div> </div> <div class="accordiontweak" style="z-index:80"> <h3><center><a href="#">&nbsp;Aller à ...</a></center></h3> <div id="gazetteer"></div> </div> <div class="accordiontweak" style="z-index:400" id="accordion_results"> <h3><center><a href="#">&nbsp;Résultat</a></center></h3> <div id="featureList"></div> </div> </div> </div> </div> <div id="containerForm" style="display:block;"></div> <!-- div style="border-bottom: 1px dashed rgb(63, 100, 160); color: rgb(63, 100, 160);"></div-->

<!-- Dialog's Div --> <div id="dialog"> <div id="dialogContent"></div> </div> <div id="dialogPrint"> <div id="dialogPrintContent"></div> </div> <div id="dialogWps"> <div id="dialogWpsContent"></div> </div> <div id="dialogGetFeatureInfo"> <div id="dialogGetFeatureInfoContent"></div> </div> <div id="dialogWpsDownload"> <div id="dialogWpsDownloadContent"></div>

Page 17: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

</div> <div id="opaque"></div>

A noter que la librairie « jQuery » et « jQueryUI » est utilisé pour l'agencement des composants graphiques de la page HTML.

Pour activer le mode débug du client, décommenter la ligne :<script type="text/javascript" src="lib/OpenLayers/lib/Firebugs/firebug.js"></script>

3.5.FICHER DE CONFIGURATION

Le fichier « lib\GeoSIE\Config.js » contient les configurations du visualiseur, les éléments principaux sont :

Gérer l’affichage des contrôles (navigation, éditions…) sous forme de liste de boutons affichés.Par exemple pour la barre navigation : NAVIGATION_BUTTONS: ['zoomIn', 'zoomOut', 'history','print'], affiche les boutons de zoom, dé zoom, les 2 boutons d’historique et le bouton d’impression.

Gestion de l’impression PDF Gestion des libellés intelligibles sur les sélections est gérée par l’attribut GF_ATTRIBUTS, un

template « HTML » est associé pour une ou plusieurs valeurs de feature id (fid), exemple :

Configuration : GF_ATTRIBUTS: [

{fids: ["SIE_POINT"], template: '<div id="${widgetId}_${idw}" class="listitem" >' + ' <div>' + ' <div class="obstStyle">' + ' <span>' + ' <input type="checkbox" id="chk_${widgetId}_${idw}" />' + ' </span>' + ' <span style="cursor:pointer; margin-left:15px;"

title="Consulter/Editer les attributs" id="title_${widgetId}_${idw}">' + ' Point ${id_brique} - Classe ${classification}' + ' </span>' + ' </div>' + ' </div>' + ' <div>' + ' <span>' + ' Attribut 2' + ' </span> :' + ' <span>' + ' ${attribut_2}' + ' </span>' + ' </div>' + ' <div>' + ' <span>' + ' Attribut 3' + ' </span> :' + ' <span>' + ' ${attribut_3}' + ' </span>' + ' </div>' + '</div>'

Requête WFS GetFeature :http://mapdmzrec.brgm.fr/cgi-bin/mapserv54?map=/carto/demo/mapFiles/demo_sie_brique.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=SIE_POINT&MAXFEATURES=20&SRS=EPSG

Page 18: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

%3A4326&BBOX=2.693667%2C46.358705%2C2.715267%2C46.365114&NOCACHE=1338292518326

Résultat requête WFS GetFeature :<gml:boundedBy><gml:Box srsName="EPSG:4326"><gml:coordinates>2.709943,46.363310 2.709943,46.363310</gml:coordinates></gml:Box></gml:boundedBy><gml:featureMember><ms:SIE_POINT fid="SIE_POINT.35"><gml:boundedBy><gml:Box srsName="EPSG:4326"><gml:coordinates>2.709943,46.363310 2.709943,46.363310</gml:coordinates></gml:Box></gml:boundedBy><ms:msGeometry><gml:Point srsName="EPSG:4326"><gml:coordinates>2.709943,46.363310</gml:coordinates></gml:Point></ms:msGeometry><ms:id_brique>35</ms:id_brique><ms:classification>rtt</ms:classification><ms:attribut_2>re</ms:attribut_2><ms:attribut_3>rrt</ms:attribut_3></ms:SIE_POINT></gml:featureMember>

Affichage dans le bloc résultat

:

Le fichier « lib\GeoSIE \Messages.js » contient une partie des libellés.

3.6. GESTION DES STYLES AVEC SLD

Lors de l'intégration de Gesteau, le besoin de styliser la couche Commune différemment du style par défaut s'est fait sentir. Deux mécanismes existent avec l’ajout du paramètre dans une requête WMS GetMap/GetLegengGraphic :

- SLD : URL du fichier avec le style au format SLD- SLD_BODY : contenu du fichier SLD

Plus d’information sur le standard SLD : http://www.opengeospatial.org/standards/sld

Exemple de fichier context.xml avec le SLD et le SLD_BODY http://geosie.eaufrance.fr/exemple6/context.xml, contenu du nœud StyleList :

- SLD, en jaune, l’URL du fichier SLD : <StyleList> <Style current="1"> <SLD> <OnlineResource xmlns:xlink='http://www.w3.org/1999/xlink' xlink:type='simple' xlink:href='http://geosie.eaufrance.fr/exemple6/geosie_polygon.xml' /> </SLD> <Title>Default</Title> <LegendURL format="image/png"> <OnlineResource xlink:type="simple" xlink:href="http://mapdmzrec.brgm.fr/cgi-bin/mapserv54?map=/carto/demo/mapFiles/demo_sie_brique.map&amp;version=1.1.1&amp;service=WMS&amp;request=GetLegendGraphic&amp;layer=SIE_POLYGONE&amp;format=image/png&amp;SLD=http://geosie.eaufrance.fr/exemple6/geosie_polygon.xml"/> </LegendURL> </Style> </StyleList>

- SLD_BODY, en rouge, le nom de la couche qui utilise ce style, pour encoder le contenu SLD pour l’URL de la légende utiliser ce site http://www.w3schools.com/html/html_urlencode.asp : <StyleList>

Page 19: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

<Style current="1"> <SLD> <StyledLayerDescriptor version='1.0.0' xmlns='http://www.opengis.net/sld' xmlns:gml='http://www.opengis.net/gml' xmlns:ogc='http://www.opengis.net/ogc' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:schemaLocation='http://www.opengis.net/sld http://schemas.opengeospatial.net/sld/1.0.0/StyledLayerDescriptor.xsd'><NamedLayer><Name>SIE_POLYGONE</Name><UserStyle><FeatureTypeStyle><Rule><PolygonSymbolizer><Fill><CssParameter name='fill'>#FF99FF</CssParameter></Fill><Stroke><CssParameter name='stroke'>#000000</CssParameter></Stroke></PolygonSymbolizer></Rule></FeatureTypeStyle></UserStyle></NamedLayer></StyledLayerDescriptor> </SLD> <Title>Default</Title> <LegendURL format="image/png"> <OnlineResource xlink:type="simple" xlink:href="http://mapdmzrec.brgm.fr/cgi-bin/mapserv54?map=/carto/demo/mapFiles/demo_sie_brique.map&amp;version=1.1.1&amp;service=WMS&amp;request=GetLegendGraphic&amp;layer=SIE_POLYGONE&amp;format=image/png&amp;SLD_BODY=%3C%3Fxml+version%3D%271.0%27+encoding%3D%27utf-8%27%3F%3E%3CStyledLayerDescriptor+version%3D%271.0.0%27+xmlns%3D%27http%3A%2F%2Fwww.opengis.net%2Fsld%27+xmlns%3Agml%3D%27http%3A%2F%2Fwww.opengis.net%2Fgml%27+xmlns%3Aogc%3D%27http%3A%2F%2Fwww.opengis.net%2Fogc%27+xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27+xmlns%3Axsi%3D%27http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%27+xsi%3AschemaLocation%3D%27http%3A%2F%2Fwww.opengis.net%2Fsld+http%3A%2F%2Fschemas.opengeospatial.net%2Fsld%2F1.0.0%2FStyledLayerDescriptor.xsd%27%3E%3CNamedLayer%3E%3CName%3ESIE_POLYGONE%3C%2FName%3E%3CUserStyle%3E%3CFeatureTypeStyle%3E%3CRule%3E%3CPolygonSymbolizer%3E%3CFill%3E%3CCssParameter+name%3D%27fill%27%3E%23FF99FF%3C%2FCssParameter%3E%3C%2FFill%3E%3CStroke%3E%3CCssParameter+name%3D%27stroke%27%3E%23000000%3C%2FCssParameter%3E%3C%2FStroke%3E%3C%2FPolygonSymbolizer%3E%3C%2FRule%3E%3C%2FFeatureTypeStyle%3E%3C%2FUserStyle%3E%3C%2FNamedLayer%3E%3C%2FStyledLayerDescriptor%3E"/> </LegendURL> </Style> </StyleList>

Problèmes possibles :- SLD - le serveur cartographique n’a pas accès aux URL interne et/ou externe : ouverture des

accès.- SLD - le serveur ne résout pas le nom de domaine : ajout du domaine dans host.- SLD - le serveur MapServer n’arrive pas écrire le style dans un fichier temporaire : autoriser

MapServer à écrire des fichiers, ou utiliser GeoServer. - SLD_BODY - en GET, la taille de l’URL est limité

(http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url) par le navigateur et/ou le serveur http, un contenu SLD trop long est donc risque d’échec : changer de navigateur, augmenter la taille maximum en GET du serveur http, utiliser une requête POST http://openlayers.org/dev/examples/wms-long-url.html (nécessite de patcher notre version d’OpenLayers (GestEau l’a fait), non testé avec l’impression PDF)

3.7.PROXY

Le client cartographique se connecte directement au serveur WMS/WFS requêté en ce qui concerne les images. En revanche pour ce qui est transfert de données hors image (XML, GML, …), nous

Page 20: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

utilisons un proxy côté serveur (nécessaire uniquement parce que les navigateurs interdisent désormais les appels « cross domain » pour ce genre d’échanges de données brutes).

Ce proxy existe dans 3 langages différents : C# : proxy.net.Proxy.ashx Java : proxy.java.ProxyRedirect.java PHP : proxy.php.proxy.php

Le fichier de configuration de branchement de la librairie cartographique sur le proxy se trouve dans la page viewer.html : OpenLayers.ProxyHost = "URL_du_proxy";

3.8. IMPRESSION

La brique cartographique fait appel à un serveur d’impression PDF basé sur une technologie Java dont l’adresse est configurée dans le fichier web.xml, coté client, le fichier Print.js génère et envoie la structure JSON à la servlet :

<servlet-mapping><servlet-name>print</servlet-name><url-pattern>/print/*</url-pattern>

</servlet-mapping>

La servlet d’impression n’est pas la servlet d’impression de Mapfish, la servlet utilisé par GeoSIE est MapPrinterServletYaml.java (hérite de la servlet MapPrinterServlet), elle permet d’ajouter des attributs (provenant d’une base par exemple) aux fiches et d’appeler le service d’impression avec différentes méthodes.

La mise en page du PDF est gérée par un template d’impression dans le fichier print-layout.yaml dans le dossier /config/, ce template contient l’ensemble des layouts (formats d’impression, orientations de la carte…).

Les besoins sont exprimés dans les documents https://forge.brgm.fr/issues/4571

3.8.1. Organisation générale du service d’impression L’arborescence du service d’impression (côté client (dossier /WebContent/)) s’organise de la façon suivante :

config/print-layout.yaml : contient le fichier de layout pour l’impression PDF config/template/img : contient les images utilisées dans le PDF config/template/pdf : contient les fonds (background) utilisées dans le PDF lib/GeoSIE/Control/Print.js : classe Javascript qui affiche la boite de dialogue d’impression et

appel le service d’impression. lib/GeoSIE/Config.js : classe Javascript qui définit la configuration de la boite de dialogue

d’impression et des paramètres d’impression. src/fr/sie/brique/web/print/MapPrinterServletYaml.java : servlet qui appel le service

d’impression. WEB-INF/lib/print-lib-1.21-SNAPSHOT-GEOSIE-3.0.0.jar : service d’impression MapFish (les

dépendances ne sont pas inclus dans ce jar).

3.8.2. Configuration du service

La configuration des pages est définie dans un fichier au format YAML (plus de détail sur la configuration http://www.mapfish.org/doc/print/configuration.html , la documentation du site est plus à jour que la version utilisée dans la brique, il est possible que des fonctionnalités ne soient pas implémentés dans notre version). La configuration du client est définie dans un fichier Print.js et Config.js.Des paramètres supplémentaires ont été ajoutés à la configuration par défaut :

bloc « legends » : o layerUnderLine (Boolean), le nom de la couche souligné,

bloc « records », basé sur le bloc Mapfish « attributes », il permet l’affichage de fiche avec des informations sur les résultats sélectionnés.

Page 21: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

Le paramètres du bloc « legends » defaultScale (Integer), [0-100] est un facteur pour modifier les dimensions de l’image, il dépend de la résolution de l’image, règle de calcul : 72 / (nbr de DPI de l’image) * 100exemple : 72/96 * 100 = 75defaultScale est appliqué quand la largeur de l’image est inférieur au maxIconWidth.

Attention à l’indentation (il ne faut pas de tabulation) du fichier de configuration YAML, des erreurs de type « org.ho.yaml.exception.YamlException: Error near line 0: End of document expected. » peuvent provenir d’une mauvaise indentation.

La configuration peut être chargée de 3 manières différentes : déclaration de l’emplacement du fichier de configuration dans le fichier web.xml (la brique

utilise cette méthode, méthode recommandée) passage de l’URL du fichier de configuration dans le formulaire d’impression coté client passage de la configuration de configuration dans le formulaire d’impression coté client

a) Configuration de la page par web.xml

L’emplacement du fichier YAML par défaut est configuré dans le fichier web.xml (dossier WebContent/config) :

<servlet><servlet-name>print</servlet-name><servlet-class>

fr.sie.brique.web.print.MapPrinterServletYaml</servlet-class><init-param>

<param-name>config</param-name><param-value>config/print-layout.yaml</param-value>

</init-param> </servlet>

b) Configuration de la page par URL

Dans le fichier /Control/Print.js dans la méthode impressionMapFish, ajouter un nouveau paramètre au formulaire (printForm) avec l’URL du fichier YAML : var printYaml = document.createElement("input"); printYaml.name = "yamlURL"; printYaml.type = "hidden"; printYaml.value = "http://localhost:8080/Geobs-WebStruts/config/print-layout-url.yaml"; printForm.appendChild(printYaml);

Si l’adresse du template PDF de type ${configDir} ne fonctionne pas, utiliser une URL de type http://localhost:8080/Geobs-WebStruts/config/template/pdf/onema_A4.pdf

c) Configuration de la page (non testé)

Dans le fichier /Control/Print.js dans la méthode impressionMapFish, ajouter un nouveau paramètre au formulaire (printForm) avec le contenu de la configuration au format YAML : var printYaml = document.createElement("input"); printYaml.name = "yaml"; printYaml.type = "hidden"; printYaml.value = "dpis:...."; printForm.appendChild(printYaml);

3.8.3. Appel du service a) Protocole d’appel

Le protocole recommandé pour appeler le service d’impression est print.pdf, pour pouvoir utiliser le protocole create.json, remplacer la servlet dans le fichier web.xml par celle de Mapfish :

Page 22: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

<servlet><servlet-name>print</servlet-name><servlet-class>

org.mapfish.print.servlet.MapPrinterServlet</servlet-class><init-param>

<param-name>config</param-name><param-value>config/print-layout.yaml</param-value>

</init-param> </servlet>

Adapter la classe Print.js afin d’appeler correctement le service et traiter le résultat (cf code sur le site Gest’eau http://gesteau.eaufrance.fr/sage).

b) Configuration Javascript

Le fichier /lib/GeoSIE/Config.js contient plusieurs paramètres liés à l’impression :- PRINT_URL : URL du service d’impression- PRINT_FORMATS : liste des formats disponibles dans la boite de dialogue d’impression- PRINT_TEMPLATES : liste des templates disponibles dans la boite de dialogue d’impression- PRE_TITLE_PRINT : pré titre dans la boite de dialogue d’impression- OUTPUT_FILENAME : nom du fichier pdf

3.8.4. Mise en page du template SIE Le fichier YAML contient 4 layouts différents (A4 paysage/portrait, A3 paysage/portrait), un layout est composé :1) 1er page : la carte, la légende, le titre, les sources, les copyrights, et le fond au format PDF2) 2e page : la liste des résultats sous forme de tableau OU la légende3) 3e page : les résultats sous forme de fiche

Le positionnement des éléments de la 1er page est absolu.

a) Changement de policePour un besoin d’homogénéiser les polices du PDF, il est possible d’ajouter des polices (attention aux copyrights des polices), dans le fichier YAML il suffit d’ajouter :

fonts: - 'D:/fonts/verdana.ttf'

Pour utilisation la nouvelle police sur un élément, utiliser le nom de la police :

- !text align: center font: Verdana

Attention, un changement de police et ou de taille affecte le positionnement absolu du titre, des sources et des copyrights. Il faut modifier les valeurs (en x et y) de positionnement des éléments ainsi que les valeurs des largeurs qui permettent de choisir un titre long ou court (cf fichier Print.js méthode getBackground).

b) Gestion des légendesL’affichage de la légende est complexe, en particulier quand l’espace disponible sur le PDF est insuffisant (exemple pour le format portrait).

Il est privilégié d’utiliser le format paysage afin d’avoir le maximum de place disponible pour la légende.

Il n’est pas possible dans cette version d’afficher la légende sur 2 colonnes (ou plus, c’est possible mais en test pour le moment), de définir les dimensions d’une image de légende en particulier. Le rendu de la légende dans le PDF correspond au rendu de la légende du visualiseur, c’est les mêmes images (provenant du serveur cartographique).Pour afficher sur plusieurs colonnes la légende, les paramètres du bloc légende sont :

Page 23: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

- inline to false mean that only tne image will be display per line.- maxHeight with value of 0 indicates that the multi column is disable.- maxWidth is set that mean that in the multi column mode the column next to the maxWidth will

not be add.- maxIconWidth, a ajuster pour les images trop grande (cf explication sur defaultScale)

Modifier le fichier Print.js, pour autoriser l’affichage de la légende avec la carte en mode portrait, cf méthode getBackground, mettre la variable showLegendNextPage à false (ligne 242, 253).Par exemple avec le context de http://gesteau.eaufrance.fr/sage, pour le format A4 en mode portrait avec la légende sur 2 colonnes sous la carte (ligne 682-695 print-layout.yaml): items: - !legends defaultScale: 75 maxHeight: 190 maxWidth: 200 inline: false maxIconWidth: 190 maxIconHeight: 190 layerUnderLine: true layerSpace: 3 layerFontSize: 7 classIndentation: 0 classFontSize: 7 classSpace: 3

Il est possible d’afficher les légendes sur plusieurs pages après la page de la carte en déplaçant le bloc légende (dans le fichier YAML - !legends), par exemple sur la page ‘lastPage’.

Si la légende ne loge pas avec la carte, il est possible de l’afficher à la suite de la carte, c’est géré dans la méthode getBackground du fichier Print.js à l’aide la variable showLegendNextPage.

Eléments de configuration : Configuration des sources et des copyrights :- les sources sont définies dans le WMC (fichier context.xml), chaque couche peut avoir une

source (valeur optionnelle), la source est définie dans la balise ol:attribution.- les copyrights sont définis dans le fichier YAML au niveau du bloc #Footer, c’est un bloc de

type text.

c) Gestion des titresSelon la longueur du titre saisi dans la boite de dialogue d’impression, l’affiche du titre dans le PDF est sur 1 ou 2 lignes, la selection du template (titre long ou titre court) est gérée dans la méthode getBackground du fichier Print.js. Des valeurs de longueur maximum sont définis dans ce fichier.

Evolutions :Le code source Java du module d’impression est dans le projet GeoSIE-Mapfish sur le SVN. Ce module est basé sur le module Print de Mapfish, la librairie pour générer les PDF est iText (utilise la version 2.1.7, la version 5 utilise une licence plus restrictive).Pour ajouter un nouveau type de bloc (par exemple des tableaux comme sur le site Geobs) au layout, s’inspirer du code la classe GeobsRecordBlock (org.mapfish.print.config.layout).

3.9.AJOUTER UN NOUVEAU WIDGET DANS L'ACCORDEON

Ouvrir le fichier /lib/GeoSIE/Brique.js Il est nécessaire de créer cette propriété qui portera l'instance du widget au sein de la classe

Brique. Aller à la méthode addWidgets() Instancier le widget. Prenons exemple sur le widget layerListLegend qui offre les services

combinés d'un sélecteur de couche et d'un afficheur de légende:

this.layerListLegend = new GeoSIE.LayerListLegend({div: OpenLayers.Util.getElement("layerListLegend"),map: this.map,context: this.context,noLegendMessage: GeoSIE.Messages.noLegendMessage,

Page 24: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

labelLegend: 'Légende',titleLegend: 'Afficher les légendes de cette couche',bgcolor: '#ffffff'

});

Dans le cas d'un widget de votre cru, vous aurez créé votre composant en tant que classe GeoSIE.monNouveauWidget(). Les trois premiers paramètres sont quasi obligatoires pour votre widget:

div: défini l'élément HTML de la page qui recevra le code HTML du widget map: transmet l'instance du navigateur cartographique OpenLayers.map context: transmet les informations du fichier WMC context.xml relatives aux couches

3.10.PREAMBULE SUR L'INITIALISATION DE L'INTERFACE

Dans le fichier /lib/GeoSIE/Brique.js, disséquons la méthode onLoadContextComplete().

C'est dans cette méthode que les initialisations se font. Cette méthode est exécutée après la tache asynchrone de chargement des données de la requête WMC. Si un problème survient, l'interface ne s'initialisera pas complètement. Si le chargement est long, l'interface n'apparaitra pas avant que la réponse soit complète.

La méthode onLoadContextComplete() : initialise la propriété this.context avec les informations chargées de la réponse WMC ajoute les couches (layers) telles que définies dans le contexte ajoute une couche pour les vecteurs - this.addVectorLayer() charge les paramètres de définition des formes (SLD) - this.loadSLD() ajoute les contrôles du carto - this.addControls() ajoute les widgets de l'accordéon - this.addWidgets() abonne l'interface aux événements des contrôles - this.registerListeners() charge l'affichage initial de la carte et des contrôles - this.firstLoadMapAndLocator(...)

3.11.AJOUTER UN NOUVEAU CONTROLE SUR L’OBJET CARTO

Ouvrir le fichier /lib/GeoSIE/Brique.js Il est nécessaire de créer cette propriété qui portera l'instance du control au sein de la classe

Brique. Aller à la méthode addControls() L'ajout d'un contrôle est différent des ajouts de widgets. Il y a deux régions où placer les

contrôles. Soit on accroche l'instance du contrôle à l'objet "this.map", par exemple si l'interface du contrôle nécessite un placement particulier sur la carte. Soit on l'accroche dans le panel avec les autres boutons icone.

Le code actuel rassemble toutes les instances de contrôle dans un array "var controls" qui est envoyé à une instance "this.panel". Ce panel est un OpenLayers.Control.Panel. Ensuite, le panel est lui-même ajouté en tant que contrôle de la map avec une ligne de code du type "this.map.addControl(this.panel);". Ce qui conclut la méthode addControls().

Vous aurez donc pris soin d'ajouter votre contrôle dans l'array controls dans le cas d'un nouveau bouton.

Par défaut, le bouton de sélection est activé. C'est la ligne this.selectControl.activate() qui se charge de ce comportement.

Comme vu dans le préambule, l'abonnement aux événements se fait après l'adjonction des controls dans le panel ou dans la map. C'est la méthode registerListeners() qui s'en occupe. Si nous prenons comme exemple l'editPointControl, un abonnement est effectué pour les types 'activate' et 'creationpoint'. Le scope est l'instance de la brique. En second lieu, ce control est sensible au niveau de zoom du visualiseur. Pour cette raison, un peu plus loin dans le code, nous vérifions son statut d'activabilité lors d'un événement 'zoomend' de l'objet this.map. Comme ce n'est pas le seul bouton concerné, notre editiPointControl est le premier élément d'un array editingControls.

Page 25: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

3.12.MINIFICATION DU JAVASCRIPT

Afin d’optimiser le chargement des scripts Javascript, un processus de minification est utilisé, il est basé sur Jsbuild. Jsbuild nécessite Python (testé sur une version 2.5), l’exécution du processus est réalisée par une tache Ant (dossier projet GeoSIE-Build). Un guide (non testé) d’installation de Jsbuild : http://geographika.co.uk/minifying-the-mapfish-client-on-windows

Le dossier /jsbuild/ contient jsbuild et le fichier de configuration main.cfg. Le fichier minifié est situé dans le dossier WebContent\jsbuild\geosie.js.

Pour exécuter la tache Ant GeoSIE-Brique [minifiy] sous Eclipse :

La page viewer-minified.html utilise la version minifiée de GeoSIE. Il y a seulement le chargement d’un fichier .js :<script type="text/javascript" src="jsbuild/geosie.js"></script>

3.13.INTEGRATION DRUPAL

GeoSIE est intégré sous forme de plugin Drupal (V6 de Drupal avec la charte Eau France), le module a été réalisé par l’OIEAU.http://services.eaufrance.fr/base/recherche/geo/annee : intégration BRGMhttp://gesteau.eaufrance.fr/sage : développement OIEAUhttp://www.reseau.eaufrance.fr/geotraitements/viewer/bdlisa : intégration Acatus

Y a 2 erreurs OpenLayers quand on intégre GeoSIE dans Drupal, liées à Drupal et au chargement du Javascript en defer :- erreur de ce type "openlayers Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" quand annule un requête GETOpenLayers/Request/XMLHttpRequest.js, sur laligne : this._object.send(vData);faut mettre un catch try { this._object.send(vData); } catch (e) {} cf http://osgeo-org.1803224.n2.nabble.com/SOLVED-Firefox-nsIXMLHttpRequest-send-throwing-0xc1f30001-NS-ERROR-NOT-INITIALIZED-td5903108.html- sous IE 7, gros crach au chargement \OpenLayers\Renderer\VML.js sur la méthode initialize, il faut encore ajouter un catch :

initialize: function(containerID) { if (!this.supported()) { return; } if (!document.namespaces.olv) { try{ document.namespaces.add("olv", this.xmlns); var style = document.createStyleSheet(); var shapes = ['shape','rect', 'oval', 'fill', 'stroke', 'imagedata', 'group','textbox']; for (var i = 0, len = shapes.length; i < len; i++) {

style.addRule('olv\\:' + shapes[i], "behavior: url(#default#VML); " + "position: absolute; display: inline-block;"); } } catch(e){

Page 26: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

OpenLayers.Console.log('VML error'); } }

OpenLayers.Renderer.Elements.prototype.initialize.apply(this, arguments); },

4.Données cartographiques

4.1.GENERALITES

Les différentes zones géographiques visualisables sur la brique cartographique sont atteignables depuis un menu déroulant (12). Chaque zone géographique dispose d’un système de projection dépendant de sa localisation sur le globe terrestre afin de minimiser la déformation des cartes (on passe d’une sphère à un plan). Les zones sont prédéfinies selon les codes EPSG suivants:

Métropole et corse : EPSG : 2154 Guadeloupe : EPSG : 2989 Martinique : EPSG : 2989 Guyane : EPSG : 2972 Réunion : EPSG : 2975 Mayotte : EPSG : 4471

A chaque zone nous associons un « contexte » cartographique, c'est-à-dire l’ensemble des éléments permettant la description des couches cartographique. (cf chapitre WMC)Les différents contextes sont regroupés dans un fichier de paramétrage : "context/context.xml".

La classe paramétrable « GeoSIE/ZoneManager.js », dans lequel on retrouve pour chaque contexte, son identifiant, son nom (la chaine de caractère qui sera utilisée pour le désigner dans le menu déroulant de sélection (12)) est à redéfinir selon les besoins d'intégration:

Extrait de la constante ZONES :

ZONES: [{ name: "Métropole", id: "metropole", country: "FR", projections: [ ["EPSG:27582", "Lambert 2 étendu"], ["EPSG:2154", "Lambert 93"] // EPSG:2154 ], gazetteerCrs: [{ epsgCode: 'EPSG:4326', label: 'Longitude/Latitude', units: 'degrés' }, { epsgCode: 'EPSG:27582', label: 'Lambert 2 étendu', units: 'm' }, { epsgCode: 'EPSG:2154', label: 'Lambert 93', units: 'm' }], cursorTrackCrs: [{ epsgCode: 'EPSG:4326', label: 'Longitude/Latitude', numDigits: 5 }, { epsgCode: 'EPSG:27582', label: 'Lambert 2 étendu', numDigits: 2 }, { epsgCode: 'EPSG:2154', label: 'Lambert 93', numDigits: 2 }], options: { projection: "EPSG:2154", units: "m", maxExtent: new OpenLayers.Bounds( 85530.046558,6029664.01582,1270190.879397,7136592.704467 )//-5.75537,41.113671,11.129072,51.060557

Page 27: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

}, overviewInfo: { url: "images/overview_images/metropole.png", extent: new OpenLayers.Bounds( -423596.070122,6025082.273503,1779728.218275,7140524.043237 ), size: new OpenLayers.Size(180, 90) } },

On retrouve le code pays (country) au format 2 caractères, les projections autorisées (projections), les systèmes de coordonnées utilisables dans cette zone pour faire des recentrages (gazetteerCrs). Les systèmes de coordonnées utilisables pour les pointages sur la carte (cursorTrackCrs). Enfin un bloc "options" qui définit l'affichage de départ et les contraintes: projection, unité de mesure, zone de contrainte de navigation (maxExtent) qui empêche l'utilisateur de sortir du périmètre.

4.2.WMC

Le fichier WMC (« context/context.xml ») contient la description d’un contexte cartographique, c'est-à-dire l’ensemble des éléments permettant l’affichage de la carte (ensemble de couches) :

<?xml version="1.0" encoding="UTF-8"?><ViewContext xmlns="http://www.opengis.net/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1.0" id="OpenLayers_Context_144" xsi:schemaLocation="http://www.opengis.net/context http://schemas.opengis.net/context/1.1.0/context.xsd"> <General> <Window width="512" height="256"/> <BoundingBox minx="-180" miny="-90" maxx="180" maxy="90" SRS="EPSG:4326"/> <Title/> </General> <LayerList> <Layer queryable="0" hidden="0"> <Server service="OGC:WMS" version="1.1.1"> <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="http://mapsref.brgm.fr/wxs/refcom-env/refign?"/> </Server> <Name>MONDE_MOD1</Name> <Title>Monde</Title> <SRS>EPSG:4326</SRS> <SRS>EPSG:2154</SRS> <SRS>EPSG:2989</SRS> <SRS>EPSG:2972</SRS> <SRS>EPSG:4471</SRS> <SRS>EPSG:2975</SRS> <FormatList> <Format current="1">jpeg</Format> </FormatList> <StyleList> <Style current="1"> <Name/> <Title>Default</Title> </Style> </StyleList> <Extension> <ol:attribution xmlns:ol="http://openlayers.org/context">IGN</ol:attribution>

Page 28: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

<ol:transparent xmlns:ol="http://openlayers.org/context">true</ol:transparent> <ol:numZoomLevels xmlns:ol="http://openlayers.org/context">13</ol:numZoomLevels> <ol:units xmlns:ol="http://openlayers.org/context">m</ol:units> <ol:isBaseLayer xmlns:ol="http://openlayers.org/context">false</ol:isBaseLayer> <ol:opacity xmlns:ol="http://openlayers.org/context">1</ol:opacity> <ol:displayInLayerSwitcher xmlns:ol="http://openlayers.org/context">true</ol:displayInLayerSwitcher> <ol:singleTile xmlns:ol="http://openlayers.org/context">true</ol:singleTile> <ol:snappable xmlns:ol="http://openlayers.org/context">true</ol:snappable> <ol:wpsable xmlns:ol="http://openlayers.org/context">true</ol:wpsable>        <ol:maxExtentLayer xmlns:ol="http://openlayers.org/context" minx="-61.257636" miny="14.374745" maxx="-60.794585" maxy="14.894211"/>        <ol:maxExtentLayer xmlns:ol="http://openlayers.org/context" minx="-61.820166" miny="15.806631" maxx="-60.990668" maxy="16.526533"/>

</Extension> </Layer><Layer>…</Layer>

Description des principales balises :

- BoundingBox : le rectangle englobant

- LayerList : une liste de couche géographique avec pour chacune d’elles :

o queryable : son caractère interrogeable (0 = non interrogeable, 1 = interrogeable)

o hidden : sa visibilité (0 = visible, 1 = invisible)

o Server : le WMS à interroger, avec son URL, sa version, le nom de la couche, le titre (qui défini la dénomination qui apparaitra à l’utilisateur) et la projection

o Format : le format de retour du WMS

o StyleList: Le style à appliquer à la couche, avec éventuellement sa légende :<StyleList>

<Style current="1"> <Name>default</Name> <Title>default</Title> <LegendURL format="image/gif"> <OnlineResource xlink:type="simple" xlink:href="[…]"/> </LegendURL> </Style> </StyleList>

o Extension : des attributs spécifiques pour OpenLayers et la brique cartographique.

o attribution : la source de la donnée

o opacity : l’opacité (de 0 invisible à 1 complètement visible)

Page 29: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

o displayInLayerSwitcher : affiche ou non la couche dans le sélecteur de couche

o snappable : permet à la couche d’être aimantable

o wpsable : permet à la couche d’être utilisé pour un traitement WPS

o maxExtentLayer : afin de différencier deux zones ayant le même SRS et permettre de n'afficher une couche par exemple que sur l'une de ces deux zones, il est demandé ici d'ajouter la prise en compte d'un paramètre supplémentaire optionnel sur les couches du WMC (dans les Extensions). Ce paramètre maxExtentLayer (exprimé avec un code EPSG:4326) spécifiera les emprises (il pourra être répéter plusieurs fois) sur lesquelles la couche doit être affichée. Elle sera affichée sur toute BBOX intersectant une de ces emprises.

Exemple d’utilisation, pour la Martinique et la Guadeloupe, une couche A avec un code EPSG:2989, sans l’attribut maxExtentLayer la couche s’affiche sur la zone Martinique et la zone Guadeloupe. En ajoutant l’attribut maxExtentLayer avec comme valeur la BBOX de la zone Martinique, la couche A s’affiche que sur la zone Martinique.

La liste des couches telle que définie dans le WMC apparaitra dans le sens inverse à l’affichage (la première couche du WMC sera la couche de fond et la dernière, la couche la plus haute).Les couches interrogeables sont paramétrées avec « queryable=’1’ ».

Plus d’information sur le standard WMC (1.0) : http://www.opengeospatial.org/standards/wmc

Dans le cadre d’une mise en œuvre au sein de l’infrastructure du BRGM, il est possible d’exploiter l’infrastructure mutualisée pour l’ensemble des référentiels. Elle permet d’accéder aux référentiels IGN suivants :

SCAN1000® SCAN100®, SCAN25®TOPO BD Topo BD Carthage Orthophotographie (IGN BD Ortho ®) Départements (IGN BD Carto®) Fond de carte mondial (Natural Earth)

5.Mécanisme d’événements

Le module cartographique permet de s’abonner à divers événements représentants les actions de modification sur les entités géographiques. L’utilisation de ces événements est montrée dans le fichier « js/Business.js », qui fait le lien entre les événements et le traitement qui en suit sur les données côté serveur. Tous les évènements ne sont pas décrits en détail, seulement l’évènement de création d’un point () est décrit, le principe est le même pour les autres évènements (création de ligne, déplacement d’une géométrie…).

L’objet Business (« js/Business.js ») s’abonne à l’évènement « creationpoint » de l’objet Brique (« lib/GeoSIE/Brique.js »).

Business.js, abonnement à l’évènement « creationpoint » de l’objet Brique :

GeoSIE.Brique.events.on({ "creationpoint": this.onCreationPoint,…

Brique.js, déclaration de l’évènement « creationpoint » supporté par l’objet :

EVENT_TYPES: ['creationpoint',…

Page 30: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

L’objet Brique s’abonne à l’évènement « creationpoint » de l’outil de création de point (« lib/GeoSIE/Control/EditPoint.js »), lorsqu’un point est dessiné, l’évènement « creationpoint » de l’objet Brique est déclenché (triggerEvent) et la géométrie (feature) est transmise à l’objet Business.

Brique.js, abonnement à l’évènement « creationpoint » de l’objet EditPoint :

this.editPointControl.events.on({ 'activate': this.checkActivable, 'creationpoint': function(feature) { this.events.triggerEvent('creationpoint', feature); }, scope: this });

L’objet Business traite l’évènement en appelant la méthode this.onCreationPoint avec en paramètre la nouvelle géométrie. Cette géométrie avec des attributs saisi pour un formulaire (dataTxt) sont envoyés au serveur :

onCreationPoint: function(features) {… //saisi du formulaire

var url = "./create"; Business.callDao("POST", url, dataTxt, function(responseText) { eval(replaceTag(responseText)); if (data.idsToAdd.length > 0 || data.idsToDel.length > 0) {

GeoSIE.Brique.refreshSelection(data.idsToAdd,data.idsToDel); } GeoSIE.Brique.forceRefreshLayers(); } );

La réponse du serveur appel les méthodes refreshSelection et forceRefreshLayers de l’objet Brique. Ces 2 méthodes permettent de mettre à jour la liste des géométries dans le widget « Résultat » et les tuiles de la couche affichant les points.

Page 31: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent

ANNEXE 1 : LIENS UTILES

Wiki du projet GeoSIE : https://forge.eaufrance.fr/projects/sie-geo-brick/wiki Site des exemples d’intégration de GeoSIE : http://geosie.eaufrance.fr/ Module d’impression MapFish : http://www.mapfish.org/doc/print/ Mailing liste MapFish : http://old.nabble.com/MapFish-f28313.html Exemples OpenLayers : http://openlayers.org/dev/examples/ Mailing liste OpenLayers : http://osgeo-org.1560.n6.nabble.com/OpenLayers-f3888594.html Encoder/decoder URL : http://www.w3schools.com/html/html_urlencode.asp Conversion coordonnées : http://twcc.free.fr/converter-fr.php Guide SLD : http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/ MapServer est les SLD : http://mapserver.org/ogc/sld.html

http://gis.ibbeck.de/ginfo/apps/OLExamples/OL210/MapServer_SLD_Demo/MapServer_SLD_Demo.asp

Page 32: forge.eaufrance.fr · Web viewjQuery UI 1.8.12 Proj4Js Ces librairies sont étendues par différents modules identifiés par le package « js » et « GeoSIE ». Ces librairies exploitent