OpenLayers et Extension Geoportail pour OL - Comment gérer 2 clés ?

**Duriv73** · 18/02/2021, 15h31

Bonjour à toutes et tous,

L'IGN ayant décidé de partager sont offre de ressources de géoservices de façon étanche en 2 catégories : gratuites et payantes (avec possibilité de gratuité sur ces dernières)
et ces 2 catégories faisant obligatoirement l'objet de 2 clés distinctes,
Comment gérer les 2 autorisations d'accès et les déclarer dans un même projet OpenLayers (+ Extension Geoportail pour OL) ???? Et quid des si pratiques fichiers autoconf.json ?

**Duriv73** · 20/02/2021, 10h46

Une petite consultation approfondie de la doc de l'IGN m'a permis de régler mon problème.

Désolé pour avoir pollué le forum avec un sujet aussi puéril (à un certain âge on doit retomber en enfance).

**NJNDEV** · 21/02/2021, 02h08

Bonjour,
La solution à ta question est intéressante, et peut permettre d'éviter de chercher dans la riche documentation de l'IGN (et un peu touffue!)

Merci.

**Duriv73** · 21/02/2021, 10h54

OK NJNDEV !

Donc voilà :
Il faut donc toujours une clé pour débloquer l'Extension Geoportail pour OpenLayers. On peut donc (rien de changé par rapport à avant) utiliser une des clés (gratuit ou payante) disponible. A priori celle correspondant au plus grand nombre de couches que l'on va utiliser. Personellement, j'utilise un fichier autoconf.json que je trouve très pratique :

http://ignf.github.io/geoportal-acce...getconfig.html

Ce qui se fait donc comme ceci dans le <head> :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	<!-- Extension Géoportail pour OpenLayers (avec Clé d'accès à l'API) -->
	<link rel="stylesheet" href="http://xxxx/GpPluginOpenLayers-3.0.12/GpPluginOpenLayers.css" />
        <script data-url="http://xxxx/autoconf.json" src="http://xxxx/GpPluginOpenLayers-3.0.12/GpPluginOpenLayers.js">

en javascript, on a donc par exemple :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
			// votre utilisation de l'extension Géoportail pour OpenLayers	
			var map = new ol.Map({
				target: 'map',
				layers: [
					
					// Carte OpenStreetMap, par exemple				
					osmLyr = new ol.layer.Tile({
						source: new ol.source.OSM(),
						visible: true,							
					}),	

					// WMTS-Géoportail - 1 Couche du contrat (clé) défini par fichier "autoconf.json)
					// Photographies aériennes 			
					new ol.layer.Tile({
						source: new ol.source.GeoportalWMTS({
							layer: "ORTHOIMAGERY.ORTHOPHOTOS"
						}),
						opacity: 0.7,
						visible: true,
					}),
						
				],
				view: new ol.View({
					center: [288074.8449901076, 6247982.515792289],
					zoom: 12
				}),
			});

Pour ajouter des couches correspondant à UNE AUTRE CLE, pour définir la source de la couche, il ne faut plus faire appel à la classe GeoportalWMTS (de l'extension Geoportail), mais à la classe WMTS (de OL), ce qui oblige à fournir un peu plus de renseignements mais permet de préciser la clé :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
			// votre utilisation de l'extension Géoportail pour OpenLayers	
			var map = new ol.Map({
				target: 'map',
				layers: [
					
					// Carte OpenStreetMap				
					osmLyr = new ol.layer.Tile({
						source: new ol.source.OSM(),
						visible: true,							
					}),	
					// WMTS-Géoportail - Couche du contrat (clé) défini par fichier "autoconf.json)
					// Photographies aériennes 			
					new ol.layer.Tile({
						source: new ol.source.GeoportalWMTS({
							layer: "ORTHOIMAGERY.ORTHOPHOTOS"
						}),
						opacity: 0.7,
						visible: true,
					}),
					// WMTS-Géoportail - Couche d'un autre contrat (clé)
					// Plan IGN v2
					planignv2 = new ol.layer.Tile({
						source : new ol.source.WMTS({
							url: "https://wxs.ign.fr/la_clé_ici/geoportail/wmts",
							layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
							matrixSet: "PM",
							format: "image/png",
							style: "normal",
							tileGrid : new ol.tilegrid.WMTS({
								origin: [-20037508,20037508], // topLeftCorner
								resolutions: resolutions, // résolutions
								matrixIds: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"] // ids des TileMatrix
							})
						})
					}),
					
				],
				view: new ol.View({
					center: [288074.8449901076, 6247982.515792289],
					zoom: 12
				}),
			});

... sans oublier de définir la variable resolutions, ce qui donne au final :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
		<script type="text/javascript">
		window.onload = function () {
 
			var resolutions = [
				156543.03392804103,
				78271.5169640205,
				39135.75848201024,
				19567.879241005125,
				9783.939620502562,
				4891.969810251281,
				2445.9849051256406,
				1222.9924525628203,
				611.4962262814101,
				305.74811314070485,
				152.87405657035254,
				76.43702828517625,
				38.218514142588134,
				19.109257071294063,
				9.554628535647034,
				4.777314267823517,
				2.3886571339117584,
				1.1943285669558792,
				0.5971642834779396,
				0.29858214173896974,
				0.14929107086948493,
				0.07464553543474241
			] ;		
 
			// votre utilisation de l'extension Géoportail pour OpenLayers	
			var map = new ol.Map({
				target: 'map',
				layers: [
 
					// Carte OpenStreetMap				
					osmLyr = new ol.layer.Tile({
						source: new ol.source.OSM(),
						visible: true,							
					}),	
					// WMTS-Géoportail - Couche du contrat (clé) défini par fichier "autoconf.json)
					// Photographies aériennes 			
					new ol.layer.Tile({
						source: new ol.source.GeoportalWMTS({
							layer: "ORTHOIMAGERY.ORTHOPHOTOS"
						}),
						opacity: 0.7,
						visible: true,
					}),
					// WMTS-Géoportail - Couche d'un autre contrat (clé)
					// Plan IGN v2
					planignv2 = new ol.layer.Tile({
						source : new ol.source.WMTS({
							url: "https://wxs.ign.fr/la_clé_ici/geoportail/wmts",
							layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
							matrixSet: "PM",
							format: "image/png",
							style: "normal",
							tileGrid : new ol.tilegrid.WMTS({
								origin: [-20037508,20037508], // topLeftCorner
								resolutions: resolutions, // résolutions
								matrixIds: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"] // ids des TileMatrix
							})
						})
					}),
 
				],
				view: new ol.View({
					center: [288074.8449901076, 6247982.515792289],
					zoom: 12
				}),
			});
 
			// Création du Layer Switcher
			var lsControl = new ol.control.LayerSwitcher({
				// paramétrage de l'affichage de la couche OSM
				layers : [
					{
						layer: osmLyr,
						config: {
							title: "OSM",
							description: "Couche OpenStreet Map"
						}
					},
					{
						layer: planignv2,
						config: {
							title: "Plan IGN v2",
							description: "Couche Géoportail"
						}
					},
				]
			});
			// Ajout du LayerSwitcher à la carte
			map.addControl(lsControl);		
 
		};
    </script>

L'exemple n'est pas des plus heureux parce qu'il concerne ici 2 couches utilisables avec la même clé gratuite, mais voila c'est le principe : Une fois que l'extension Geoportail est débloquée avec une clé, on peut ajouter toutes les couches de cette clé avec la classe GeoportalWMTS (de l'extension Geoportail), et pour ajouter des couches d'une (ou plusieurs) autre(s) clé(s), il suffit d'utiliser la classe ol.source.WMTS.

**NJNDEV** · 22/02/2021, 09h34

Pour ta réponse rapide et claire. Je pense que ça va intéresser du monde au final!
Bonne journée.

**Duriv73** · 13/03/2021, 10h24

Une solution plus élégante : le fichier d'autoconfiguration. qui peut faire le job pour PLUSIEURS CLÉS

Entrer dans le navigateur :
https://wxs.ign.fr/[clé A]/autoconf/?keys=[clé A, clé B, ...]&output=json&callback=callback
(Attention, les crochets ne doivent pas être repris, et une des clés doit donc être répétée deux fois !)

On obtient une page de code qu'il convient de copier/coller dans un fichier texte que l'on renommera autoconf.json.

Ensuite, ne reste plus qu'à utiliser ce fichier suivant la documentation de l'IGN : Optimisation du chargement : configuration locale

Optimisation du chargement : configuration locale

Vous 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.

Enregistrez 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) :

Méthode 1 : Utilisez l’attribut “data-url” de la balise script chargeant l’extension pour pointer vers votre fichier :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<script data-url="chemin/vers/autoconf.json" src="chemin/vers/GpPluginOpenLayers.js"></script>

Votre 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 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <!-- Library OpenLayers -->
        ...
        <script data-url="chemin/vers/autoconf.json" src="chemin/vers/GpPluginOpenLayers.js"></script>
    </head>
    <body>
        <script>
            window.onload = function () {
                // votre utilisation de l'extension Géoportail pour OpenLayers
            }
        </script>
    </body>
</html>

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 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    ...
    <body>
        <script>
            window.onload = function () {
                Gp.Services.getConfig({
                    serverUrl: 'chemin/vers/autoconf.json',
                    callbackSuffix : '',
                    onSuccess: function (response) {
                        // votre utilisation de l'extension Géoportail pour OpenLayers
                    }
                });
            }
        </script>
    </body>
</html>

OpenLayers et Extension Geoportail pour OL - Comment gérer 2 clés ?

IGN API Géoportail

Discussions similaires

Partager

Partager