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
- 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
- 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
Titre | Nom de la couche | clée générique associée |
---|---|---|
Photographies aeriennes | "ORTHOIMAGERY.ORTHOPHOTOS" | "decouverte" |
Plan IGN | "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" | "decouverte" |
Limites administratives | "LIMITES_ADMINISTRATIVES_EXPRESS.LATEST" | "administratif" |
Reseaux routiers (BD TOPO) | "TRANSPORTNETWORKS.ROADS" | "topographie" |
Denominations geographiques (BD Topo) | "GEOGRAPHICALNAMES.NAMES" | "topographie" |
BD PARCELLAIRE | "CADASTRALPARCELS.PARCELS" | "parcellaire" |
Parcellaire Express (PCI) | "CADASTRALPARCELS.PARCELLAIRE_EXPRESS" | "parcellaire" |
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/>