Discussion :

[nicolas2603]

Bonjour,

Côté serveur carto :
J'ai installé sur mon poste GeoServer 2.9.1.
Lié à une base PostgreSQL/PostGIS, j'ai crée une couche de ponctuels qui s'affiche correctement à la prévisualisation, sur une adresse du genre : http://localhost:8080/geoserver/cite...s=cite:bureaux

Coté interface web :
Je tourne sur WampServer 2.2. J'ai crée une page faisant appel à OpenLayers 3 pour afficher les données issues de GeoServer. Elle est sur une URL du genre : http://localhost/OLv3.18.2/index.php.
Si les fonds raster tuilés OSM s'affichent sans problème, il n'en est pas de même de l'affichage de ma couche de ponctuels, chargée au format GeoJSON.

Firefox m'indique : Blocage d’une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:8080/geoserver/cite...plication/json. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Chrome m'indique : XMLHttpRequest cannot load http://localhost:8080/geoserver/cite...plication/json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Voici mon script :

Code :

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
var vectorSource = new ol.source.Vector({
	format: new ol.format.GeoJSON(),
	url: function(extent) {
		return 'http://localhost:8080/geoserver/cite/ows?service=WFS&' +
		'version=1.0.0&request=GetFeature&typeName=cite:bureaux&' +
		'maxFeatures=50&outputFormat=application/json';
	}
});

var vector = new ol.layer.Vector({
	source: vectorSource,
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: 'rgba(0, 0, 255, 1.0)',
			width: 2
		})
	})
});

var raster = new ol.layer.Tile({
	source: new ol.source.OSM()
});

var map = new ol.Map({
	target: 'map',
	layers: [ vector ],
	view: new ol.View({
		center: ol.proj.fromLonLat([2.1307973,48.8289161]),
		zoom: 14
	})
});

Comment régler ce problème de Cross-Origin, sachant qu'on trouve de tout tel que modification du fichier web.xml de geoserver, etc..., mais appliqué sans succès pour moi ?
Merci d'avance.

[CetTer]

Il faut activer le mode JSONP (json padded encapsulé dans des callbacks) de GeoServer dans les fichiers de configuration et utiliser avec OL une librairie AJAX gérant ces callbacks comme JQuery pour utiliser le WFS dans du cross domain (client et serveur sur des domaines différents). Il est désactivé par défaut pour des raisons de sécurité liées aux attaques XSS et au vol de session.
En localhost ou si la page sera en prod sur le même domaine que Geoserver rediriger dans un proxy ou mapper dans Apache le port du serveur hébergeant Geoserver sur le meme port 80 que la page web (par exemple avec mod_jk) devraient suffire à supprimer le problème (plus lourd en configuration mais plus leger pour le code JavaScript de la partie client).

[nicolas2603]

Merci pour ces informations. Cela fait 3 jours que je tente de les appliquer, mais toujours sans succès.
J'ai activé le mode JSONP dans le fichier web.xml de geoserver, je fais ma requête en AJAX et j'ai toujours le message de bloquage.

Voici ma requête dans OL3 :

Code :

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
var vectorSource = new ol.source.Vector({
	loader: function(extent, resolution, projection) {
		var url = 'http://localhost:8080/geoserver/cite/ows?service=WFS&' +
		'version=1.1.0&request=GetFeature&typename=cite:bureaux&' +
		'outputFormat=application/json&srsname=EPSG:2154&' +
		'bbox=' + extent.join(',') + ',EPSG:2154';
		$.ajax(url).then(function(response) {
			var format = new ol.format.GeoJSON();
			var features = format.readFeatures(response, {
				featureProjection: projection
			});
			vectorSource.addFeatures(features);
		});
	},
	strategy: ol.loadingstrategy.bbox
});

var vector = new ol.layer.Vector({
	source: vectorSource,
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: 'rgba(0, 0, 255, 1.0)',
			width: 2
		})
	})
});

var raster = new ol.layer.Tile({
	source: new ol.source.OSM({}),
	opacity: 0.8,
	brightness: 0.8
});

var map = new ol.Map({
	layers: [raster, vector],
	target: document.getElementById('map'),
	view: new ol.View({
		center: ol.proj.fromLonLat([2.1307973,48.8289161]),
		maxZoom: 19,
		zoom: 14
	})
});

Elle fonctionne correctement si je change l'URL par un exemple en ligne, genre var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=osm:water_areas&outputFormat=application/json&srsname=EPSG:3857&bbox='+extent.join(',')+',EPSG:3857';

Qu'ai-je oublié ?

[CetTer]

Bonjour,

Le serveur envoie toujours du JSON, il faut changer le paramètre outputformat en "outputFormat=text/javascript" (http://docs.geoserver.org/latest/en/...utformats.html )

[nicolas2603]

Bonjour,

Exact, le problème venait bien de là, un grand merci ! Maintenant j'ai bien ma couche qui se charge.
Voici mon code, est-il optimisé ou y a-t-il moyen de faire mieux ?

Code :

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
proj4.defs("EPSG:2154", "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

var vectorSource = new ol.source.Vector({
	loader: function(extent, resolution, projection) {
		var url = 'http://localhost:8080/geoserver/cite/ows?service=WFS&'
		+ 'version=1.1.0&request=GetFeature&'
		+ 'typename=cite:commune&'
		+ 'outputFormat=text/javascript&format_options=callback:loadFeatures';
		$.ajax({
			url: url, dataType: 'jsonp', jsonp: false
		});
	},
	strategy: ol.loadingstrategy.bbox
});

window.loadFeatures = function(response) {
	var geojsonFormat = new ol.format.GeoJSON();
	vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};

var communes = new ol.layer.Vector({
	source: vectorSource,
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: '#333333',
			width: 1
		})
	})
});

var OSM = new ol.layer.Tile({
	source: new ol.source.OSM({})
});

var map = new ol.Map({
	target: 'map',
	layers: [OSM, communes],
	view: new ol.View({
		projection: 'EPSG:2154',
		center: [614884, 6852120],
		zoom: 10
	})
});

J'ai également un petit soucis de projection, ma couche (limites communales du département 78) étant en L93 (ESPG 2154), avec ce code elle est bien calée géographiquement sur OSM, mais la couche OSM elle même n'est pas nette, puisque déformée. Elle prend la forme d'un planisphère vu de dessus, au lieu d'être à plat.
Et si je ne déclare pas la projection en revanche, mon département 78 est positionné en Hollande, mais la couche OSM est plate et nette...
Il y a un moyen de combiner les deux ?
C'est normal ?

[CetTer]

Le problème a l'air d'être plutôt lié au client à OpenLayers 3 ou au service OSM que je ne connais pas très bien. Il faut peut-être paraméter la défintion de la couche OSM avec une taille de tuile plus grande? Ceci dit GeoServer semble permettre de reprojeter les données du WFS aussi via le paramètre "srsName" http://docs.geoserver.org/latest/en/...fs/vendor.html . Si la projection (ESPG 2154) est reconnue par GeoServer (ou rajoutée dans le fichier "epsg.properties") définir ce paramètre devrait reprojeter à la volée les données dans des datum plus habituels pour le client et OSM (ESPG 4326 par exemple).

il faut aussi vérifier que la couche est déclarée avec le bon datum dans GeoServer et aussi dans la couche GIS sous-jacente (PostGIS ou la shapefile).

[nicolas2603]

Effectivement, en reprojetant les données du WFS via le paramètre "srsName" dans le format OSM (3857) et en précisant le même système dans la vue, j'obtiens une carte plate et une couche bien positionnée. Parfait !!
Et ce, même si mes données dans Geoserver sont au format natif L93.
Un grand merci