Voici la documentation : https://geoplateforme.pages.gpf-tech.ign.fr/documentation

Skip to content
Extraits de code Groupes Projets

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
  1. 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/>