{"analyzedAt":"2022-11-18T19:14:54.237Z","collected":{"metadata":{"name":"geoportal-extensions-openlayers","scope":"unscoped","version":"3.2.18","description":"French Geoportal Extensions for OpenLayers","keywords":["geoportail","plugin","javascript","OpenLayers"],"date":"2022-11-18T10:52:47.305Z","author":{"name":"IGNF"},"publisher":{"username":"ignfgeoportail","email":"contact.geoservices@ign.fr"},"maintainers":[{"username":"ignfgeoportail","email":"contact.geoservices@ign.fr"}],"repository":{"url":"git+https://github.com/IGNF/geoportal-extensions.git","type":"git"},"links":{"npm":"https://www.npmjs.com/package/geoportal-extensions-openlayers","homepage":"https://github.com/IGNF/geoportal-extensions#readme","repository":"https://github.com/IGNF/geoportal-extensions","bugs":"https://github.com/IGNF/geoportal-extensions/issues"},"license":"CECILL-B","dependencies":{"eventbusjs":"0.2.0","geoportal-access-lib":"3.2.0","loglevel":"1.6.6","ol":"6.9.0","proj4":"2.7.5","ol-mapbox-style":"6.7.0","sortablejs":"1.14.0","xmldom":"^0.1.27","node-fetch":"^2.6.1","@mapbox/mapbox-gl-style-spec":"13.20.1"},"devDependencies":{"@babel/core":"^7.4.4","@babel/plugin-transform-template-literals":"^7.7.4","@babel/preset-env":"^7.4.4","babel-loader":"^8.0.5","chai":"^4.2.0","chalk":"^4.0.0","clean-webpack-plugin":"^3.0.0","copy-webpack-plugin":"^5.0.3","core-js":"^3.6.4","css-loader":"^3.4.2","eslint":"^6.8.0","eslint-config-standard":"^14.1.1","eslint-loader":"^4.0.0","eslint-plugin-import":"^2.17.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.1.1","eslint-plugin-standard":"^4.0.0","exports-loader":"^0.7.0","expose-loader":"^0.7.5","fs-extra":"^9.0.0","handlebars":"^4.7.5","handlebars-layouts":"^3.1.4","html-webpack-plugin":"^4.0.4","jsdoc-webpack-plugin":"^0.3.0","mini-css-extract-plugin":"^0.9.0","mocha":"^7.1.1","mocha-loader":"^5.0.0","npm-run-all":"^4.1.5","optimize-css-assets-webpack-plugin":"^5.0.1","path":"^0.12.7","replace-bundle-webpack-plugin":"^1.0.0","requirejs":"^2.3.6","responsive-loader":"^1.2.0","speed-measure-webpack-plugin":"^1.3.0","string-template":"^1.0.0","style-loader":"^1.1.3","terser-webpack-plugin":"^2.0.0","url-loader":"^4.0.0","webpack":"^4.30.0","webpack-cli":"^3.3.1","webpack-dev-server":"^3.3.1","webpack-node-externals":"^1.7.2"},"releases":[{"from":"2022-10-19T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":0},{"from":"2022-08-20T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":3},{"from":"2022-05-22T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":4},{"from":"2021-11-18T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":14},{"from":"2020-11-18T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":26}],"hasTestScript":true,"readme":"# Extension Géoportail pour OpenLayers\n\n[![release](https://img.shields.io/badge/release%20-ol%203.2.11-brightgreen.svg?style=flat)](https://github.com/IGNF/geoportal-extensions/releases/tag/ol-3.2.11)\n\n\n\n- [Extension Géoportail pour OpenLayers](#extension-géoportail-pour-openlayers)\n - [Mise en oeuvre](#mise-en-oeuvre)\n - [Téléchargement](#téléchargement)\n - [Téléchargement direct](#téléchargement-direct)\n - [Récupération avec NPM](#récupération-avec-npm)\n - [Accès direct](#accès-direct)\n - [Intégration dans une page web](#intégration-dans-une-page-web)\n - [Configuration de l'accès à la plateforme Géoportail](#configuration-de-laccès-à-la-plateforme-géoportail)\n - [Optimisation du chargement : configuration locale](#optimisation-du-chargement--configuration-locale)\n - [Appel de l'extension dans un module ES6](#appel-de-lextension-dans-un-module-es6)\n - [Compatibilités](#compatibilités)\n - [Versions de OpenLayers supportées](#versions-de-openlayers-supportées)\n - [Navigateurs supportés](#navigateurs-supportés)\n - [Fonctionnalités](#fonctionnalités)\n - [Systèmes de coordonnées](#systèmes-de-coordonnées)\n - [Affichage des couches WMTS Géoportail](#affichage-des-couches-wmts-géoportail)\n - [Utilisation d'un layer WMTS Géoportail](#utilisation-dun-layer-wmts-géoportail)\n - [Exemple d'utilisation](#exemple-dutilisation)\n - [Affichage en Lambert 93 (EPSG:2154)](#affichage-en-lambert-93-epsg2154)\n - [Utilisation d'une source WMTS Géoportail](#utilisation-dune-source-wmts-géoportail)\n - [Exemple d'utilisation](#exemple-dutilisation-1)\n - [Affichage en Lambert 93 (EPSG:2154)](#affichage-en-lambert-93-epsg2154-1)\n - [Affichage des couches WMS Géoportail](#affichage-des-couches-wms-géoportail)\n - [Utilisation d'un layer WMS Géoportail](#utilisation-dun-layer-wms-géoportail)\n - [Exemple d'utilisation](#exemple-dutilisation-2)\n - [Utilisation d'une source WMS Géoportail](#utilisation-dune-source-wms-géoportail)\n - [Exemple d'utilisation](#exemple-dutilisation-3)\n - [Widget de gestion d'empilement des couches](#widget-de-gestion-dempilement-des-couches)\n - [Exemples d'utilisation](#exemples-dutilisation)\n - [Utilisation simple](#utilisation-simple)\n - [Barre de recherche](#barre-de-recherche)\n - [Exemples d'utilisation](#exemples-dutilisation-1)\n - [Utilisation simple](#utilisation-simple-1)\n - [Calculs d'itinéraires](#calculs-ditinéraires)\n - [Exemples d'utilisation](#exemples-dutilisation-2)\n - [Utilisation simple](#utilisation-simple-2)\n - [Calculs d'isochrones / isodistances](#calculs-disochrones--isodistances)\n - [Exemples d'utilisation](#exemples-dutilisation-3)\n - [Utilisation simple](#utilisation-simple-3)\n - [Coordonnées et altitude en un point de la carte](#coordonnées-et-altitude-en-un-point-de-la-carte)\n - [Exemples d'utilisation](#exemples-dutilisation-4)\n - [Utilisation simple](#utilisation-simple-4)\n - [Affichage dynamique des attributions](#affichage-dynamique-des-attributions)\n - [Exemples d'utilisation](#exemples-dutilisation-5)\n - [Utilisation simple](#utilisation-simple-5)\n - [Adresse ou lieu en un point de la carte](#adresse-ou-lieu-en-un-point-de-la-carte)\n - [Exemples d'utilisation](#exemples-dutilisation-6)\n - [Utilisation simple](#utilisation-simple-6)\n - [Outils de croquis](#outils-de-croquis)\n - [Exemples d'utilisation](#exemples-dutilisation-7)\n - [Utilisation simple](#utilisation-simple-7)\n - [Widget d'import de couches](#widget-dimport-de-couches)\n - [Exemples d'utilisation](#exemples-dutilisation-8)\n - [Utilisation simple](#utilisation-simple-8)\n - [Profil altimétrique le long d'un traçé](#profil-altimétrique-le-long-dun-traçé)\n - [Exemples d'utilisation](#exemples-dutilisation-9)\n - [Utilisation simple](#utilisation-simple-9)\n - [Outils de mesures](#outils-de-mesures)\n - [Exemples d'utilisation](#exemples-dutilisation-10)\n - [Utilisation simple](#utilisation-simple-10)\n - [Accès aux informations attributaires des couches](#accès-aux-informations-attributaires-des-couches)\n - [Exemples d'utilisation](#exemples-dutilisation-11)\n - [Utilisation simple pour une seule couche](#utilisation-simple-pour-une-seule-couche)\n\n\n\nL'extension Géoportail pour OpenLayers propose les fonctionnalités suivantes à utiliser en complément de la bibliothèque [OpenLayers dans ses versions 3 et supérieures](https://openlayers.org/) :\n\n* [affichage des couches WMTS Géoportail](#WMTS)\n\n* [affichage des couches WMS Géoportail](#WMS)\n\n* [affichage dynamique des attributions](#attributions)\n\n* [widget de gestion d'empilement des couches](#layerswitcher)\n\n* [barre de recherche utilisant le service de géocodage IGN](#geocode)\n\n* [obtention d'une adresse, d'un nom de lieu, ... au clic sur la carte](#reverse)\n\n* [calculs d'itinéraires à partir du service de la plateforme Géoportail](#route)\n\n* [calculs d'isochrones / isodistances à partir du service de la plateforme Géoportail](#isocurve)\n\n* [coordonnées et altitude en un point de la carte à l'aide du service d'altimétrie de la plateforme Géoportail](#mp)\n\n* [outils de croquis](#drawing)\n\n* [import de couches](#layerimport)\n\n* [profil altimétrique d'un traçé à l'aide du service d'altimétrie de la plateforme Géoportail](#ep)\n\n* [outils de mesures](#measure)\n\n* [accès aux informations attributaires des couches](#getfeatureinfo)\n\n\n## Mise en oeuvre\n\nL'utilisation de l'extension Géoportail pour OpenLayers se fait via les étapes suivantes :\n\n* [Téléchargement de l'extension Géoportail](#download)\n\n* [Intégration de l'extension dans une page web](#integration)\n\n* [Configuration de l'accès à la plateforme Géoportail](#config)\n\n\n\n\n\n### Téléchargement\n\nVous pouvez récupérer l'extension Géoportail pour OpenLayers soit par [téléchargement direct](#download-direct), soit en utilisant le [gestionnaire de dépendances javascript NPM](#download-npm).\n\nL'extension Géoportail pour OpenLayers comprend l'arborescence de fichiers suivante :\n\n```\n /\n GpPluginOpenLayers.js\n (version minifiée du code javascript pour une utilisation en production)\n GpPluginOpenLayers.css\n (version minifiée des css pour une utilisation en production)\n GpPluginOpenLayers-src.js\n (version non minifiée du code javascript pour une utilisation en développement)\n GpPluginOpenLayers-src.css\n (version non minifiée des css pour une utilisation en développement)\n```\n\nLes scripts d'OpenLayers s'obtiennent sur [la page de téléchargement d'OpenLayers](https://openlayers.org/download/).\n\n\n\n\n#### Téléchargement direct\n\nVous pouvez télécharger la dernière version de l'extension Géoportail pour OpenLayers directement sur [la page des releases des extensions Géoportail](https://github.com/IGNF/geoportal-extensions/releases).\n\nL'archive téléchargée (.zip) comprend l'arborescence décrite ci-dessus.\n\n\n\n\n#### Récupération avec NPM\n\nL'extension Géoportail pour OpenLayers est aussi disponible dans les dépôts [NPM](https://www.npmjs.com/package/geoportal-extensions-openlayers).\n\nPrérequis : [NodeJS](https://nodejs.org/en/) et [npm](https://www.npmjs.com/) installés.\n\n```\nnpm i geoportal-extensions-openlayers\n```\n\nL'arborescence décrite ci-dessus sera alors accessible dans le répertoire `node_modules/geoportal-extensions-openlayers/dist/` de votre projet.\n\n\n#### Accès direct\n\nVous pouvez aussi choisir d'utiliser des fichiers hébergés en ligne, pour y accéder directement, lors de vos tests par exemple. Cependant, pour une utilisation en production, nous vous conseillons de télécharger ces fichiers et de les héberger vous-même, sur le même serveur qui héberge votre application.\nPar exemple sur Github Pages :\n```\nhttp://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.js\nhttp://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.css\nhttp://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers-src.js\nhttp://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers-src.css\n```\n\n\n\n### Intégration dans une page web\n\nDézippez l'extension géoportail dans l'arborescence votre de serveur web. Vous pouvez positionner à votre guise les fichiers css et javascript.\n\nIntégrez l'extension géoportail pour OpenLayers dans votre page web classiquement à l'aide d'une balise **script** pour charger le fichier javascript et d'une balise **link** pour charger le fichier css en plus des balises correspondantes utilisées pour charger la bibliothèque OpenLayers.\n\n``` html\n\n\n\n\n\n\n\n```\n\n\n\n### Configuration de l'accès à la plateforme Géoportail\n\nL'extension Géoportail pour OpenLayers exploite les services web exposés par la plateforme Géoportail. Ceux-ci sont soumis à l'utilisation d'une ou de plusieurs **clef d'accès** gratuites disponibles sur le site [geoservices.ign.fr](https://geoservices.ign.fr/services-web) ayant les droits sur les ressources que vous souhaitez exploiter.\n\nVous pouvez ensuite paramétrer l'utilisation de l'extension avec la ou les clefs qui correspondent à vos besoins de deux manières possibles :\n\n**Méthode 1** : Au chargement de l'extension en utilisant l'attribut \"data-key\" de la balise **script** de chargement de l'extension :\n\n``` html\n\n```\n\nClés multiples : Si vous devez utiliser plusieurs clés d'accès, il est possible de mettre une liste de clés dans l'attribut data-key :\n\n``` html\n\n```\n\nVotre utilisation des fonctionnalités de l'extension Géoportail sera alors simplement conditionnée par la réception de l'événement onload de la page web, comme sur l'exemple suivant :\n\n``` html\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n**Méthode 2** : A la fin du chargement de la page en utilisant la fonction [Gp.Services.GetConfig()](https://github.com/IGNF/geoportal-access-lib#getConfig) et en conditionnant alors l'utilisation de l'extension à l'exécution de la fonction de rappel onSuccess passée en paramètres de Gp.Services.getConfig() comme sur l'exemple suivant :\n\n``` html\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nClés multiples : Si vous devez utiliser plusieurs clés d'accès, il est possible de mettre une liste de clés dans l'attribut apiKey de la fonction getConfig :\n\n\n``` html\n\n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Optimisation du chargement : configuration locale\n\nVous pouvez améliorer le temps de chargement de votre page en mettant en cache sur votre plateforme la configuration associée à votre clef d'accès. Il vous suffit pour cela de récupérer le fichier de configuration (autoconf.json) obtenu à l'aide [du formulaire de ce tutoriel](http://ignf.github.io/geoportal-access-lib/latest/jsdoc/tutorial-optimize-getconfig.html).\n\nSi vous souhaitez une autoconfiguration locale unique avec plusieurs clés, c'est possible. Pour cela, enregistrez le contenu de la requête suivante dans un fichier autoconf.json (en remplacant key1, key2, key3... par les clefs génériques que vous souhaitez utiliser) :\n[autoconf multi-clés : https://wxs.ign.fr/key1/autoconf/?keys=key1,key2,key&output=json&callback=callback](https://wxs.ign.fr/key1/autoconf/?keys=key1,key2,key&output=json&callback=callback)\n\nEnregistrez ce fichier sur votre plateforme et paramétrez l'extension Géoportail de la manière suivante (selon les méthodes citées précédemment) :\n\n**Méthode 1** : Utilisez l'attribut \"data-url\" de la balise **script** chargeant l'extension pour pointer vers votre fichier :\n\n``` html\n\n```\n\nVotre utilisation des fonctionnalités de l'extension Géoportail sera alors simplement conditionnée par la réception de l'événement onload de la page web, comme sur l'exemple suivant :\n\n``` html\n\n \n \n ...\n \n \n \n \n \n\n```\n\n**Méthode 2** : Utilisez le paramètre *serverUrl* de la fonction Gp.Services.getConfig() pour pointer vers votre fichier, ainsi que le paramètre *callbackSuffix*, de la manière suivante :\n\n``` html\n\n ...\n \n \n \n\n```\n\n### Appel de l'extension dans un module ES6\n\nLe module de l'extension expose de multiples exports nommés (dont le module openlayers étendu).\nL'utilisateur a le choix entre plusieurs méthodes d'import.\n\n**Méthode 1** : import des exports nommés du module\n\n``` javascript\nimport {Services, olExtended as Ol} from 'geoportal-extensions-openlayers';\n\n// votre utilisation de l'extension\nvar map = new Ol.Map(...)\nServices.getConfig(...)\n```\n\n**Méthode 2** : import d'un objet d’espace de noms pour le module\n\n***Variante 1*** : le module openlayers étendu est récupéré depuis l'espace de noms\n\n``` javascript\nimport * as Gp from 'geoportal-extensions-openlayers';\n\n// votre utilisation de l'extension\nconst Ol = Gp.olExtended;\nvar map = new Ol.Map(...)\nGp.Services.getConfig(...)\n```\n\n***Variante 2*** : le module openlayers est importé indépendamment de l'extension\n\n``` javascript\nimport Ol from 'openlayers';\nimport * as Gp from 'geoportal-extensions-openlayers';\n\n// votre utilisation de l'extension\nvar map = new Ol.Map(...)\nGp.Services.getConfig(...)\n```\n\n## Compatibilités\n\n### Versions de OpenLayers supportées\n\nLes **versions 3.1.z et supérieures de l'extension Géoportail pour OpenLayers** peuvent s'utiliser avec la **version 6.3.1** d'OpenLayers.\n\nLes **versions 3.0.z de l'extension Géoportail pour OpenLayers** peuvent s'utiliser avec les **versions 5.0.3 et supérieures** d'OpenLayers.\n\nLa compatibilité avec les **versions 4.0.z** n'est assurée que par les **versions 2.1.2 et antérieures de l'extension Géoportail pour OpenLayers**.\n\nLe support des versions d'OpenLayers antérieures à la version 3.14 n'a pas été complètement testé.\n\n\n### Navigateurs supportés\n\n\nNavigateur | version\n-----------|--------\nChrome | Versions récentes (21+)\nFirefox | Versions récentes (28+)\nEdge | 12+\nSafari | Versions récentes (6.1+)\n\n\n## Fonctionnalités\n\n\n\n### Systèmes de coordonnées\n\nOpenLayers utilise par défaut les systèmes de coordonnées mondiaux \"standards\" : EPSG:4326 (coordonnées géographiques) et EPSG:3857 (Projection Web Mercator utilisée par Google, Bings, OSM ... et le Géoportail) comme expliqué [ici](https://openlayers.org/en/latest/apidoc/module-ol_proj.html).\n\nL'extension Géoportail pour OpenLayers embarque de nombreuses projections en *EPSG*, *CRS* ainsi que sous le registre *IGNF*.\nIl est possible d'utiliser ces projections :\n\nExemple :\n\n``` javascript\n\n// création d'une vue OpenLayers avec la projection définie\nvar view = new ol.View({\n center: [48, 2],\n zoom: 12,\n projection: \"IGNF:RGF93G\"\n})\n```\n\nLa définition d'autres systèmes de coordonnées est cependant possible par l'adjonction de la bibliothèque [Proj4js](https://github.com/proj4js/proj4js) permettant de définir des systèmes de coordonnées et d'effectuer des transformations de coordonnées entre systèmes. Cette bibliothèque est directement compatible avec OpenLayers.\n\nL'extension Géoportail pour OpenLayers **intègre nativement cette bibliothèque**. Si vous l'utilisez vous pouvez donc directement définir les systèmes de coordonnées que vous souhaitez selon la syntaxe proj4 et utiliser les alias ainsi définis en paramètres des fonctions d'OpenLayers.\n\nExemple :\n\n``` javascript\n// Définition de la Projection UTM 20N\nproj4.defs(\"EPSG:4559\",\n \"+proj=utm +zone=20 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\") ;\n\n// création d'une vue OpenLayers avec la projection définie\nvar view = new ol.View({\n center: [656481, 1796270],\n zoom: 12,\n projection: \"EPSG:4559\"\n})\n```\n\nNB :\n\n* Le site [epsg.io](http://epsg.io/) recense un grand nombre de registres de systèmes de coordonnées avec leurs définitions.\n\n* Les définitions des systèmes de coordonnées du registre IGN-F peuvent être trouvées [ici](https://geodesie.ign.fr/contenu/fichiers/IGNF.xml).\n\n\n\n\n### Affichage des couches WMTS Géoportail\n\nLe modèle de données OpenLayers fait la distinction entre la notion de couche (ol.layer) et la notion de source de données (ol.source). Ainsi, une carte OpenLayers est constituée d'un empilement de \"ol.layer\", avec des propriétés relatives à leurs visibilité sur la carte, dont le contenu est alimenté par des \"ol.source\", avec des propriétés relatives à la manière d'obtenir ces données.\n\nL'extension Géoportail pour OpenLayers propose deux manières d'accéder aux couches Géoportail selon ce modèle :\n\n1. On souhaite une mise en oeuvre simple, où on saisit uniquement le nom de sa couche, et d'éventuels paramètres d'affichage (visibilité ou opacité). Définition d'un [layer WMTS Géoportail](#layerWMTS).\n\n2. On souhaite pouvoir paramétrer plus finement l'affichage de sa couche dans la carte, ainsi que d'éventuels paramètres du service (format, style, ...). Définition d'une [source WMTS Géoportail](#sourceWMTS).\n\n\n\n#### Utilisation d'un layer WMTS Géoportail\n\nL'affichage se fait par la création d'une nouvelle instance de la classe [ol.layer.GeoportalWMTS](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.layer.GeoportalWMTS.html), de la manière suivante :\n\n``` javascript\nnew ol.layer.GeoportalWMTS(options);\n```\n\nCette fonction retourne un objet **ol.layer.GeoportalWMTS**, qui hérite de l'objet OpenLayers *ol.layer.Tile*, qui peut ainsi être interprété par la librairie OpenLayers pour l'ajout dans la carte.\n\n##### Exemple d'utilisation\n\nAffichage simple des ortho-images du Géoportail : création d'une *layer* Géoportail, et ajout à la *map* OpenLayers.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n });\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/j5rdjt2z/embedded/result,js,html,css/)\n\n##### Affichage en Lambert 93 (EPSG:2154)\n\nLa plateforme Géoportail diffuse aussi des ressources WMTS en projection Lambert 93. Pour permettre de les afficher, l'extension Géoportail pour OpenLayers pré-définit l'alias \"EPSG:2154\" correspondant à cette projection.\n\nIl suffit alors de paramétrer la carte OpenLayers avec cette projection et d'y rajouter la ressource WMTS de la même manière que précédemment.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO.L93\"\n })\n ],\n view: new ol.View({\n center: [600000, 6750000],\n zoom: 12,\n projection : \"EPSG:2154\"\n })\n});\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/bw0za4a8/embedded/result,js,html,css/)\n\n\nNB : D'autres systèmes de coordonnées peuvent être définis et utilisés : [plus d'informations...](#crs)\n\n\n\n#### Utilisation d'une source WMTS Géoportail\n\nCette méthode permet plus de paramétrages : on crée une nouvelle instance de la classe [ol.source.GeoportalWMTS](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.source.GeoportalWMTS.html), de la manière suivante :\n\n``` javascript\nvar gpsource = new ol.source.GeoportalWMTS(options);\n```\n\nCette fonction retourne un objet **ol.source.GeoportalWMTS**, qui hérite de l'objet OpenLayers *ol.source.WMTS*. Cette source sert ensuite à la création d'un *layer* OpenLayers qui pourra ensuite être ajouté à la carte.\n\n``` javascript\nvar layer = new ol.layer.Tile({\n source : gpsource\n});\n```\n\n##### Exemple d'utilisation\n\nAffichage simple des ortho-images du Géoportail : création d'un *layer* OpenLayers associé à une *source* Géoportail, et ajout à la *map* OpenLayers.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.Tile({\n source: new ol.source.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n }),\n opacity: 0.7\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/sdktaf9r/embedded/result,js,html,css/)\n\n##### Affichage en Lambert 93 (EPSG:2154)\n\nLa plateforme Géoportail diffuse aussi des ressources WMTS en projection Lambert 93. Pour permettre de les afficher, l'extension Géoportail pour OpenLayers pré-définit l'alias \"EPSG:2154\" correspondant à cette projection.\n\nIl suffit alors de paramétrer la carte OpenLayers avec cette projection et d'y rajouter la ressource WMTS de la même manière que précédemment.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.Tile({\n source: new ol.source.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO.L93\"\n }),\n opacity: 0.7\n })\n ],\n view: new ol.View({\n center: [600000, 6750000],\n zoom: 12,\n projection : \"EPSG:2154\"\n })\n});\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/o6tnhpnd/embedded/result,js,html,css/)\n\n\nNB : D'autres systèmes de coordonnées peuvent être définis et utilisés : [plus d'informations...](#crs)\n\n\n\n\n### Affichage des couches WMS Géoportail\n\nLe modèle de données OpenLayers fait la distinction entre la notion de couche (ol.layer) et la notion de source de données (ol.source). Ainsi, une carte OpenLayers est constituée d'un empilement de \"ol.layer\", avec des propriétés relatives à leurs visibilité sur la carte, dont le contenu est alimenté par des \"ol.source\", avec des propriétés relatives à la manière d'obtenir ces données.\n\nL'extension Géoportail pour OpenLayers propose deux manières d'accéder aux couches Géoportail selon ce modèle :\n\n1. on souhaite une mise en oeuvre simple, où on saisit uniquement le nom de sa couche, et d'éventuels paramètres d'affichage (visibilité ou opacité). Définition d'un [layer WMS Géoportail](#layerWMS).\n\n2. On souhaite pouvoir paramétrer plus finement l'affichage de sa couche dans la carte, ainsi que d'éventuels paramètres du service (format, style, ...). Définitions d'une [source WMS Géoportail](#sourceWMS).\n\n\n\n#### Utilisation d'un layer WMS Géoportail\n\nL'affichage se fait par la création d'une nouvelle instance de la classe [ol.layer.GeoportalWMS](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.layer.GeoportalWMS.html), de la manière suivante :\n\n``` javascript\nnew ol.layer.GeoportalWMTS(options);\n```\n\nCette fonction retourne un objet **ol.layer.GeoportalWMS**, qui hérite de l'objet OpenLayers *ol.layer.Tile*, qui peut ainsi être interprété par la librairie OpenLayers pour l'ajout dans la carte.\n\n##### Exemple d'utilisation\n\nAffichage d'une couche du serveur WMS INSPIRE raster du Géoportail (OI.OrthoimageCoverage) sur une carte en EPSG:4326.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMS({\n layer: \"OI.OrthoimageCoverage\",\n })\n ],\n view: new ol.View({\n center: [2, 46],\n zoom: 12,\n projection: \"EPSG:4326\"\n })\n});\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/jnfwc7k6/embedded/result,js,html,css/)\n\n\n\n#### Utilisation d'une source WMS Géoportail\n\nCette méthode permet plus de paramétrages : on crée une nouvelle instance de la classe [ol.source.GeoportalWMS](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.source.GeoportalWMS.html), de la manière suivante :\n\n``` javascript\nvar gpsource = new ol.source.GeoportalWMS(options);\n```\n\nCette fonction retourne un objet **ol.source.GeoportalWMS**, qui hérite de l'objet OpenLayers *ol.source.TileWMS*. Cette source sert ensuite à la création d'un *layer* OpenLayers qui pourra ensuite être ajouté à la carte.\n\n``` javascript\nvar layer = new ol.layer.Tile({\n source : gpsource\n});\n```\n\n##### Exemple d'utilisation\n\nUtilisation des service WMS INSPIRE raster (OI.OrthoimageCoverage) du Géoportail : création d'un *layer* OpenLayers associés à un *source* Géoportail, et ajout à la *map* OpenLayers.\n\n``` javascript\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.Tile({\n source: new ol.source.GeoportalWMS({\n layer: \"OI.OrthoimageCoverage\",\n })\n })\n ],\n view: new ol.View({\n center: [-61.55, 16.25],\n zoom: 12,\n projection : \"EPSG:4326\"\n })\n});\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/e36ur78k/embedded/result,js,html,css/)\n\n\n\n\n### Widget de gestion d'empilement des couches\n\nCe widget permet à l'utilisateur de gérer l'empilement des couches composant la carte ol.Map et, pour chacune d'elles, d'agir sur la visibilité, l'opacité et d'afficher des informations qui lui sont associées (titre, description, métadonnées, légende).\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.LayerSwitcher ](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.LayerSwitcher.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar layerSwitcher = new ol.control.LayerSwitcher(opts) ;\nmap.addControl(layerSwitcher);\n```\n\nLe widget affiche l'ensemble des couches composant la carte ol.Map.\n\nPour chaque couche de la carte ol.Map, le widget affiche son titre et sa description (par défaut : l'identifiant OpenLayers de la couche), et, si elles sont spécifiées, des informations plus détaillées : légendes, métadonnées, aperçu rapide.\n\nLa récupération de ces informations n'est pas la même selon la manière dont chaque couche a été ajoutée à la carte :\n\n- Couches ajoutées via la [fonctionnalité d'affichage simple des couches WMS](#WMS) ou [WMTS du Géoportail](#WMTS) de l'extension pour OpenLayers : ces informations sont disponibles car elles ont été chargées par lors de la [configuration de l'accès au Géoportail](#config), il n'y a donc rien à faire de particulier.\n\n- Autres couches : afin d'afficher ces informations, il est nécessaire de les spécifier dans les options du widget.\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget de gestion de l'empilement des couches. Paramétrage des couches non Géoportail.\n\n``` javascript\n// couche OSM (non Géoportail)\nvar osmLyr = new ol.layer.Tile({\n source: new ol.source.OSM()\n});\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n osmLyr,\n // couche Géoportail\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\",\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n}); \n// Création du Layer Switcher\nvar lsControl = new ol.control.LayerSwitcher({\n // paramétrage de l'affichage de la couche OSM\n layers : [{\n layer: osmLyr,\n config: {\n title: \"OSM\",\n description: \"Couche OpenStreet Map\"\n }\n }]\n});\n// Ajout du LayerSwitcher à la carte\nmap.addControl(lsControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/5f9wxsof/embedded/result,js,html,css/)\n\n\n\n### Barre de recherche\n\nLa barre de recherche permet de positionner la carte à partir de la saisie d'un localisant dont la position sera retournée par le service de géocodage de l'IGN.\n\nLa saisie de localisants peut s'accompagner d'un mode d'autocomplétion s'appuyant sur le service d'autocomplétion de la plateforme Géoportail.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la calsse [ol.control.SearchEngine](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.SearchEngine.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar search = new ol.control.SearchEngine(opts) ;\nmap.addControl(search);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du moteur de recherche sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar searchControl = new ol.control.SearchEngine({\n});\n\n// Ajout à la carte\nmap.addControl(searchControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/qpcyp8nr/embedded/result,js,html,css/)\n\n\n\n\n### Calculs d'itinéraires\n\nLe widget de calcul d'itinéraires permet d'intéragir avec une carte OpenLayers pour effectuer des calculs d'itinéraires utilisant le service dédié de la plateforme Géoportail.\n\nSon utilisation se fait par la création d'un nouveau contrôle instance de la classe [ol.control.Route](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.Route.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar route = new ol.control.Route(opts) ;\nmap.addControl(route);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar routeControl = new ol.control.Route({\n});\n\n// Ajout à la carte\nmap.addControl(routeControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/1ngLrhuj/embedded/result,js,html,css/)\n\n\n\n### Calculs d'isochrones / isodistances\n\nCe widget permet d'intéragir avec une carte OpenLayers pour effectuer des calculs d'isochrones / isodistances utilisant le service dédié de la plateforme Géoportail.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.Isocurve()](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.Isocurve.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar iso = new ol.control.Isocurve(opts);\nmap.addControl(iso);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar isoControl = new ol.control.Isocurve({\n});\n\n// Ajout à la carte\nmap.addControl(isoControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/jpwf385t/embedded/result,js,html,css/)\n\n\n\n### Coordonnées et altitude en un point de la carte\n\nCe widget permet d'afficher les coordonnées d'un point choisi par l'internaute sur une carte OpenLayers dans un ou plusieurs systèmes de coordonnées. Ces coordonnées peuvent comprendre l'altitude obtenue à l'aide du service d'altimétrie de la plateforme Géoportail.\nUn mode \"édition\" permet de localiser des coordonnées sur la carte en éditant les coordonnées affichées dans le widget.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.GeoportalMousePosition](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.GeoportalMousePosition.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar mp = new ol.control.GeoportalMousePosition(opts);\nmap.addControl(mp);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar mpControl = new ol.control.GeoportalMousePosition({\n});\n\n// Ajout à la carte\nmap.addControl(mpControl);\n```\n\n**Exemple d'utilisation avec affichage unique de l'altitude** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/jhg5fhor/embedded/result,js,html,css/)\n\n**Exemple d'utilisation avec paramétrage des systèmes de coordonnées** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/myg4t6qo/embedded/result,js,html,css/)\n\n**Exemple d'utilisation avec activation de l'édition de coordonnées pour localisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/jrL59w29/embedded/result,js,html,css/)\n\n\n\n### Affichage dynamique des attributions\n\nCe widget a pour but d'afficher les attributions associées aux couches visibles sur la carte. Il étend les fonctionnalités du contrôle natif d'OpenLayers ([ol.control.Attribution](https://openlayers.org/en/latest/apidoc/module-ol_control_Attribution-Attribution.html)) dont il hérite en permettant l'affichage des attributions en fonction du positionnement de la carte (centre, zoom) pour les couches ayant des originators multiples.\n\nLes couches Géoportail (de type [WMS](#WMS) ou [WMTS](#WMTS)) possèdent nativement cette propriété. Pour les autres, le paramétrage dynamique des originators se fait par l'adjonction à l'objet source de la couche de la propriété \"\\_originators\", tableau de [Gp.Services.Config.Originator](http://ignf.github.io/geoportal-access-lib/latest/jsdoc/Gp.Services.Config.Originator.html).\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.GeoportalAttribution](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.GeoportalAttribution.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar att = new ol.control.GeoportalAttribution(opts);\nmap.addControl(att);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar attControl = new ol.control.GeoportalAttribution({\n});\n\n// Ajout à la carte\nmap.addControl(attControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/x1jrLavb/embedded/result,js,html,css/)\n\n\n\n### Adresse ou lieu en un point de la carte\n\nCe widget permet d'obtenir un ensemble de localisants Géographiques (adresses, toponymes ou parcelles cadastrales) en un point ou une zone (cercle ou emprise rectangulaire) saisie interactivement par l'internaute sur une carte OpenLayers.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.ReverseGeocode](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.ReverseGeocode.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar reverse = new ol.control.ReverseGeocode(opts);\nmap.addControl(reverse);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar rvControl = new ol.control.ReverseGeocode({\n});\n\n// Ajout à la carte\nmap.addControl(rvControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/9y6dgq15/embedded/result,js,html,css/)\n\n\n\n### Outils de croquis\n\nCe widget propose un ensemble d'outils de croquis permettant de dessiner sur une carte OpenLayers : poser des markers, dessiner des lignes, polygones ou faire des écritures dans des styles choisis par l'internaute.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.Drawing](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.Drawing.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar drawing = new ol.control.Drawing(opts);\nmap.addControl(drawing);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar drawControl = new ol.control.Drawing({\n});\n\n// Ajout à la carte\nmap.addControl(drawControl);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/2Lj85jf1/embedded/result,js,html,css/)\n\n\n\n\n### Widget d'import de couches\n\nCe widget permet à un internaute d'importer ses propres données géographiques dans des formats standards en superposition des données d'une carte OpenLayers.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.LayerImport](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.LayerImport.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n\n``` javascript\nvar lyrImport = new ol.control.LayerImport(opts);\nmap.addControl(lyrImport);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar lyrImport = new ol.control.LayerImport({\n});\n\n// Ajout à la carte\nmap.addControl(lyrImport);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/u04nvno2/embedded/result,js,html,css/)\n\n\n\n\n### Profil altimétrique le long d'un traçé\n\nCe widget permet d'afficher le profil altimétrique d'un traçé saisi par l'internaute sur une carte OpenLayers. Le profil est calculé à l'aide du service d'altimétrie de la plateforme Géoportail.\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.ElevationPath](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.ElevationPath.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n\n``` javascript\nvar ep = new ol.control.ElevationPath(opts);\nmap.addControl(ep);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar ep = new ol.control.ElevationPath({\n});\n\n// Ajout à la carte\nmap.addControl(ep);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/cwfsLge7/embedded/result,js,html,css/)\n\n\n\n### Outils de mesures\n\nTrois widgets sont proposés permettant à un internaute d'effectuer des mesures sur une carte OpenLayers : mesures de distance, de surface et d'azimuth.\n\nLeur utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.MeasureLength](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.MeasureLength.html), pour les distances ; [ol.control.MeasureArea](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.MeasureArea.html), pour les surfaces ou [ol.control.MeasureAzimuth](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.MeasureAzimuth.html) pour les mesures d'azimuth que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n\n``` javascript\nvar length = new ol.control.MeasureLength(opts);\nmap.addControl(length);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n })\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Creation du controle\nvar length = new ol.control.MeasureLength({\n});\n\n// Ajout à la carte\nmap.addControl(length);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/cwfsLge7/embedded/result,js,html,css/)\n\n\n\n\n### Accès aux informations attributaires des couches\n\nCe widget permet, au clic sur la carte, d'afficher dans une popup les informations attributaires des couches présentes dans la carte et spécifiées dans le widget.\nDans le cas des couches vecteur, ces informations correspondent aux informations attributaires des objets localisés au point cliqué.\nDans le cas des couches raster (WMS et WMTS), c'est le contenu de la réponse d'une requête GetFeatureInfo sur la première couche qui est affiché.\nLorsque le contrôle est activé pour plusieurs couches, les informations affichées seront celles de la première couche visible rencontrée dans la carte (en partant du haut de la pile des couches).\n\nSon utilisation se fait par la création d'un nouveau contrôle, instance de la classe [ol.control.GetFeatureInfo](http://ignf.github.io/geoportal-extensions/ol-latest/jsdoc/ol.control.GetFeatureInfo.html), que l'on peut ensuite ajouter à la carte comme [les autres contrôles OpenLayers](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addControl), de la manière suivante :\n\n``` javascript\nvar getFeatureInfo = new ol.control.GetFeatureInfo(opts);\nmap.addControl(getFeatureInfo);\n```\n\n#### Exemples d'utilisation\n\n##### Utilisation simple pour une seule couche\n\nAjout du widget sans paramétrage particulier.\n\n``` javascript\n// Création de la couche que l'on souhaite interroger\nvar orthos = new ol.layer.GeoportalWMTS({\n layer: \"ORTHOIMAGERY.ORTHOPHOTOS\"\n});\n\n// Création de la carte\nvar map = new ol.Map({\n target: 'map',\n layers: [\n orthos\n ],\n view: new ol.View({\n center: [288074.8449901076, 6247982.515792289],\n zoom: 12\n })\n});\n\n// Création du contrôle, et activation pour la couche orthos créée ci-dessus\nvar getfeatureinfo = new ol.control.GetFeatureInfo({\n layers : [\n {\n obj : orthos\n }\n ]\n});\n\n// Ajout à la carte\nmap.addControl(getfeatureinfo);\n```\n\n**Exemple d'utilisation** [![jsFiddle](https://jsfiddle.net/img/embeddable/logo-dark.png)](https://jsfiddle.net/ignfgeoportail/vg6dz7bn/embedded/result,js,html,css/)"},"npm":{"downloads":[{"from":"2022-11-17T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":26},{"from":"2022-11-11T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":219},{"from":"2022-10-19T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":953},{"from":"2022-08-20T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":2456},{"from":"2022-05-22T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":3981},{"from":"2021-11-18T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":8627}],"starsCount":1},"github":{"starsCount":50,"forksCount":27,"subscribersCount":12,"issues":{"count":342,"openCount":11,"distribution":{"3600":60,"10800":16,"32400":7,"97200":33,"291600":27,"874800":53,"2624400":38,"7873200":34,"23619600":30,"70858800":21,"212576400":23},"isDisabled":false},"contributors":[{"username":"lowzonenose","commitsCount":484},{"username":"elias75015","commitsCount":425},{"username":"pjjmunier","commitsCount":139},{"username":"lboulanger","commitsCount":103},{"username":"gcebelieu","commitsCount":78},{"username":"azarz","commitsCount":53},{"username":"pprev94","commitsCount":25},{"username":"sylvainpolletvillard","commitsCount":2},{"username":"vcoindet","commitsCount":2},{"username":"ThomasG77","commitsCount":1},{"username":"ojathelonius","commitsCount":1}],"commits":[{"from":"2022-11-11T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":2},{"from":"2022-10-19T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":11},{"from":"2022-08-20T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":32},{"from":"2022-05-22T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":86},{"from":"2021-11-18T00:00:00.000Z","to":"2022-11-18T00:00:00.000Z","count":173}]},"source":{"files":{"readmeSize":2115,"testsSize":443788,"hasNpmIgnore":true},"linters":["eslint"],"outdatedDependencies":{"loglevel":{"required":"1.6.6","stable":"1.8.1","latest":"1.8.1"},"sortablejs":{"required":"1.14.0","stable":"1.15.0","latest":"1.15.0"},"xmldom":{"required":"^0.1.27","stable":"0.6.0","latest":"0.6.0"},"proj4":{"required":"2.7.5","stable":"2.8.0","latest":"2.8.0"},"@mapbox/mapbox-gl-style-spec":{"required":"13.20.1","stable":"13.27.0","latest":"13.27.0"},"ol-mapbox-style":{"required":"6.7.0","stable":"9.2.1","latest":"9.2.1"},"node-fetch":{"required":"^2.6.1","stable":"3.3.0","latest":"4.0.0-beta.4"},"ol":{"required":"6.9.0","stable":"7.1.0","latest":"7.1.1-dev.1668772674496"}}}},"evaluation":{"quality":{"carefulness":0.9199999999999999,"tests":0.6,"health":0.5,"branding":0},"popularity":{"communityInterest":101,"downloadsCount":818.6666666666666,"downloadsAcceleration":1.6530251141552519,"dependentsCount":0},"maintenance":{"releasesFrequency":0.9777397260273973,"commitsFrequency":1,"openIssues":1,"issuesDistribution":0.9}},"score":{"final":0.6185052192634577,"detail":{"quality":0.7771796610682786,"popularity":0.1010418282560189,"maintenance":0.9999619458667646}}}