Comment récupérer un flux WFS avec le SDK GpOl3 ?

Version imprimable

01/03/2018, 17h10
JoNeSsS

Comment récupérer un flux WFS avec le SDK GpOl3 ?

Bonjour,

J'ai une application web (PREVARISC) qui permet d'afficher une carte dans une page. J'ai intégré le SDK et tout fonctionne bien en affichant des couches WMS.
Je souhaite rajouter une couche WFS pour obtenir des informations dynamiques sur certains objets mais cela ne fonctionne pas. Il y à plien d'exemple pour le WMS mais le WFS semble avoir été oublié...
Voici mon code :

map = Gp.Map.load(
"map", // html div
{
// Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
// layers to display
zoom : 15,
center : {
x : 4.595979,
y : 44.718361,
projection : "CRS:84"
},
layersOptions : {
"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {},
"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : {},
"CADASTRALPARCELS.PARCELS" : {}
},
// additional tools to display on the map
controlsOptions : {
"layerSwitcher" : {},
"search" : {},
"orientation" : {},
"graphicscale" : {},
"route" : {},
"mouseposition" : {
maximised : false,
displayAltitude : true,
displayCoordinates : true
},
"isocurve" : {},
"graticule" : {},
"layerimport" : {},
"length" : {},
"area" : {},
"azimuth" : {},
"elevationpath" : {},
"reversesearch" : {},
"drawing" : {}
},
// Repères visuels
markersOptions : [{
content : "<h1>EMPLACEMENT</h1>"
}],
}

Comment rajoutes-t-on des couches WFS ? de la même manière que le WMS, si oui avec quels paramètres ?

"COUCHE" : {
title : "COUCHE WFS",
format : "WFS",
url : "http://wxs.ign.fr/Cle IGN/geoportail/wfs",
version : "2.0.0",
layers : ["BDTOPO"],
service : "GetCapabilities"
},

Merci par avance pour votre aide.
02/03/2018, 16h14
lboulanger
Bonjour,

Vous pouvez ajouter une couche WFS de la même manière qu'une couche WMS, mais avec quelques paramètres spécifiques, que l'on peut retrouver dans la documentation technique ici : https://ignf.github.io/geoportal-sdk...erOptions.html (en bas de la page > WFS specific options).
En particulier, il faut utiliser le paramètre "typeNames" pour spécifier l'entité (classe d'objet) que vous souhaitez afficher, et non pas "layers".

Par exemple :
Code:

1 2 3 4 5 6 7 8 9 "COUCHE" : { title : "COUCHE WFS", format : "WFS", url : "http://wxs.ign.fr/CLE/geoportail/wfs", typeNames : "BDTOPO_BDD_WLD_WGS84G:commune", version : "2.0.0", maxFeatures : 100 },
05/03/2018, 15h54
JoNeSsS

Bonjour,

Merci pour votre réponse. Cependant cela ne fonctionne pas chez moi...
Mes paramètres pour le SDK sont les suivants :

<script src="/js/sdk-ol/GpOl3.js"<>/script>
<link rel="stylesheet" href="/js/sdk-ol/GpOl3.css" />

Cela est-il suffisant ou faut-il rajouter autre chose ?
Auriez-vous l'exemple d'un couche fonctionnelle avec tous les paramètres qui vont avec ?

Ma clé IGN est valide pour toutes les couches WFS.

Merci infiniment.

Bonjour,

Le code ci-dessous (en insérant votre propre clé de contrat à la place de CLE) permet d'afficher la couche WFS : BDPARCELLAIRE-VECTEUR_WLD_BDD_WGS84G:parcelle, à condition qu'elle ait bien été ajoutée à votre clé de contrat.

Code:

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Exemple WFS parcellaire</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- SDK Géoportail -->
        <link rel="stylesheet" href="/js/sdk-ol/GpOl3.css" />
        <script src="/js/sdk-ol/GpOl3.js"></script>
    </head>
    <body>
	<div>
		<p>Ajout d'une couche WFS parcellaire sur les fonds de cartes IGN et les photographies aériennes (utilisation du SDK Géoportail)</p>
	</div>
	<div id="map" style="width: 700px; height: 700px;"></div>
        <script>
		var map = Gp.Map.load(
			"map", // div HTML
			{
				 apiKey: "CLE",
				 center : {
					 x : 4.47140,
					 y : 44.00320,
					 projection : "EPSG:4326"
				 },
				 // niveau de zoom
				 zoom : 14,
				 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
				 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 0.1
					},
					// Couche WFS
					"Parcelles WFS" : {
						title : "Parcelles WFS",
						format : "WFS",
						url : "http://wxs.ign.fr/CLE/geoportail/wfs",
						typeNames : "BDPARCELLAIRE-VECTEUR_WLD_BDD_WGS84G:parcelle",
						version : "2.0.0",
						maxFeatures : 200
					},
				 },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 },
				 }
			}
		) ;
		</script>
	</body>
</html>

Si cela ne fonctionne pas, vérifiez tout d'abord que la ressource est bien associée à votre clé (dans votre espace sur le site professionnels.ign.fr), avant de revenir vers nous.

Bonne journée !
Laurane

08/03/2018, 17h07
JoNeSsS

Bonjour,

Merci pour ces infos. Cela ne fonctionne pas non plus, malheureusement. Ma clé IGN est bien rattachée aux flux WFS, j'ai tout coché...
J'ai même un flux WFS externe qui fonctionne avec QGIS (et avec les flux IGN au passage).
J'ai testé l'exemple donné avec fiddle sans succès.
Le problème vient surement du SDK. Il doit manquer quelque chose.
Faut-il rajouter les plugins GPPluginOl3 ou autre chose ?

Les flux WMS sont très faciles à rajouter mais le WFS...

Merci pour votre aide
08/03/2018, 18h48
lboulanger

Bonsoir,

Citation:

Le problème vient surement du SDK. Il doit manquer quelque chose.
Faut-il rajouter les plugins GPPluginOl3 ou autre chose ?

Non, rien besoin d'intégrer en plus : l'exemple ci-dessus fonctionne tel quel.

Citation:

J'ai testé l'exemple donné avec fiddle sans succès.

De quel exemple parlez-vous ?

Citation:

Cela ne fonctionne pas non plus, malheureusement

Pouvez-vous nous détailler plus précisément ce qui ne fonctionne pas ? Dans la console de développement, avez-vous des erreurs en lien avec la couche WFS ? Est-ce que le reste (carte, outils) s'affiche bien lorsque vous testez l'ajout de WFS avec le SDK ?

De plus, pouvez-vous nous fournir un exemple de code que vous avez testé ? Idéalement, une url où nous pourrions tester un exemple que vous avez mis en place ?

Enfin, pouvez-vous nous fournir votre clé de contrat, en message privé par exemple, afin de confirmer que le problème ne vient pas de là ?

Il nous faut plus d'éléments pour pouvoir vous aider, car l'ajout de couche WFS dans le SDK fonctionne bien a priori.

Bonne soirée !

Laurane
12/03/2018, 14h19
lboulanger

Bonjour,

Plusieurs choses :

1. Sécurisation par referer au lieu de login/mdp
Votre clé est sécurisée par identifiant / mot de passe (plutôt conseillé pour une utilisation via des SIG). Pour que l'authentification fonctionne, il faudrait que l'en-tête de chaque requête envoyée contienne votre login et mot de passe crypté, ce qui n'est pas géré par le SDK. Pour une utilisation web, il est plus simple d'utiliser une sécurisation par referer (c'est-à-dire l'URL de votre page web qui utilise les ressources du Géoportail). (cf. https://geoservices.ign.fr/documenta...ces-acces.html pour plus d'infos).
Pour cela, vous pouvez modifier la sécurisation de votre clé directement depuis le site professionnels.ign.fr, dans votre espace > Mes Commandes > Modifier mon contrat > Modifier la sécurisation, puis en sélectionnant "Referer" et en saisissant les URLs que vous souhaitez utiliser, séparées par des virgules (ex. "localhost, http://fiddle.jshell.net, votresite.fr")

2. HTTPS
Depuis votre exemple JSFiddle (qui est en https), vous interrogez les flux Géoportail en http, les requêtes WFS risquent donc d'être bloquées pour des raisons de sécurité. Utilisez donc des urls du type : https://wxs.ign.fr lorsque vous êtes dans une page en https.

3. Nom de la ressource
Vous cherchez à interroger la ressource "BDTOPO_BDD_WLD_WGS84G:commune~~.title~~" => le bon nom est en réalité "BDTOPO_BDD_WLD_WGS84G:commune"

Enfin, j'ai mis en ligne un exemple JSFiddle permettant d'intégrer une couche WFS avec le SDK : https://jsfiddle.net/ignfgeoportail/...t,js,html,css/.

Bonne journée,
Laurane
23/03/2018, 11h00
JoNeSsS

Bonjour,

Merci beaucoup pour ces précisions. Tout fonctionne à merveille.
J'avais des soucis de syntaxe dans mes valeurs.

Merci encore.