Présentation de client GPU

Découvrez le nouveau client GPU : une bibliothèque javascript fonctionnant sous JQuery Openlayers fournissant un visonneur de cartes dynamique et possédant de nombreuses fonctionnalités lié à l'urbanisme.

Technologie du client-gpu

Le client GPU a été développé à l'aide des sources de différents projets :

Dépendances utilisées lors du dévelopement de l'application :

• [markdown] - Utilisé pour composer la documentation du README.md que vous avez sous les yeux
• [NPM] - Gère le téléchargement des dépendances
• [webpack] - Construit les assets javascrips/css/images dans dist/ à partir des dépendances et du code source de l'application, ainsi que la documentation js-doc (./js-doc).

Dépendances lié directement à l'application :

• Externes :

• [jQuery] - Facilise le développement Javascript
• [gpu-bootstrap] - Bootstrap personnalisé pour le GPU ; permet de construire rapidement une interface graphique responsive
• [Openlayers] - Bibliothèque lié à la cartographie
• [geoportal-access-lib] - Bibliothèque d'accès aux ressources du Géoportail de l'IGN.
• [bootstrap-3-typeahead] - Auto-complétion sur les champs de formulaire

• Internes :

• [FontAwesome] - Bibliothèque d'icones
• [geoportal-wfs-client] - Client d'accès spécifique aux services WFS du géoportail
• [gpu-client-data] - Regroupement des données necessaires pouvant être volumineuses (liste d'arrondissements, contour des départements et régions, catégories de Document d'Urbanisme)
• [html2canvas] - Capture d'écran avec Javascript (utilisé ici pour l'impression de carte)
• [jquery-bootstrap-slider] - Création de barres glissantes (utilisé ici pour la gestion de l'opacité des couches)
• [spectrum-colorpicker] - Gestionnaire de choix de couleur (utilisé ici dans les outils de dessins de la carte)

Prérequis d'installation à une application

Ajouter les dépendances externes citées ci-dessus à votre application.

Installation

1. Ajouter la dépendance gpu-client à votre application depuis l'interface en ligne de commandes :

$ npm install git+https://gitlab.gpf-tech.ign.fr/gpu/gpu-client.git

2. Placer le script situé à node_modules/gpu-client/dist/gpu-client.min.js dans votre page concernée (adapter le chemin en fonction de l'arborescence de votre projet) ainsi que le style situé à node_modules/gpu-client/dist/css/gpu-client.min.css ; un polyfill est présent pour l'utilisation sous les navigateurs plus anciens.

<link  href="node_modules/gpu-client/dist/css/gpu-client.css" rel="stylesheet">
<script src="node_modules/gpu-client/dist/polyfill.js"></script>
<script src="node_modules/gpu-client/dist/gpu-client.js"></script>

Comment Utiliser le client GPU

Un exemple d'utilisation est présenté dans le répertoire "public" situé à la racine de la bibliothèque.

Développement

• cloner depuis le dépot :

$ git clone https://gitlab.gpf-tech.ign.fr/gpu/gpu-client.git

• Construire la documentation / les assets

$ npm run build

La documentation des fonctionnalités est généré sous js-doc, dans le dossier ./js-doc

Couches Géoportail utilisées

Documentation

[markdown]: <http://dillinger.io/>
[NPM]: <https://www.npmjs.com/>
[webpack]: <https://webpack.js.org/>

[jQuery]: <http://jquery.com>
[Openlayers]: <https://openlayers.org/>
[gpu-bootstrap]: <https://gitlab.gpf-tech.ign.fr/gpu/gpu-bootstrap>
[geoportal-access-lib]: <https://github.com/IGNF/geoportal-access-lib>

[bootstrap-3-typeahead]: <https://github.com/bassjobsen/Bootstrap-3-Typeahead/>
[FontAwesome]: <https://fontawesome.com/v4.7.0/>
[geoportal-wfs-client]: <https://github.com/IGNF/geoportal-wfs-client>
[gpu-client-data]: <https://gitlab.gpf-tech.ign.fr/gpu/gpu-client-data>
[html2canvas]: <https://html2canvas.hertzen.com/>
[jquery-bootstrap-slider]: <https://gitlab.gpf-tech.ign.fr/gpu/bootstrap-slider-js>
[spectrum-colorpicker]: <http://bgrins.github.io/spectrum/>