Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#1 Sun 12 April 2015 17:18
- alexlionnel
- Juste Inscrit !
- Date d'inscription: 12 Apr 2015
- Messages: 4
openlayes 3 , wfs , geoserver
Salut à tous. J'ai besoin d'aide pour afficher des données wfs provenant de geoserver sur openlayers 3. J'ai utilisé le code provenant du site officiel openlayers 3, en adaptant l'url. Tous s'affiche correctement mais la couche wfs ne s'affiche pas.
Code:
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'http://localhost:8086/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=stat_datasource:afrique&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:4326&bbox=' + extent.join(',') + ',EPSG:4326';
$.ajax({
url: url,
dataType: 'jsonp'
});
},
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
})),
projection: 'EPSG:4326'
});
var loadFeatures = function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
};
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 map = new ol.Map({
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
projection: 'EPSG:4326',
center:[11.49869,3.85888],
zoom:5
})
});
map.addControl(new ol.control.ScaleLine());
map.addControl(new ol.control.MousePosition());
map.addControl(new ol.control.FullScreen());
map.addControl(new ol.control.ZoomSlider());Merci d'avance.
Hors ligne
#2 Mon 13 April 2015 17:22
- alexlionnel
- Juste Inscrit !
- Date d'inscription: 12 Apr 2015
- Messages: 4
Re: openlayes 3 , wfs , geoserver
Salut. Après des nuits blanches j'ai finalement pu résoudre mon problème. Voici mon code final pour ceux que cela intéresse.
Code:
var vectorLoaderAfrique, loadFeaturesAfrique, vectorSourceAfrique, serverVectorAfrique;
vectorLoaderAfrique = function(extent, resolution, projection) {
var url = 'http://localhost:8086/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=stat_workspace:afrique&' +
'outputFormat=text/javascript&format_options=callback:loadFeaturesAfrique' +
'&srsname=EPSG:4326';
$.ajax({
url: url,
dataType: 'jsonp'
});
};
vectorSourceAfrique = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: vectorLoaderAfrique,
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
}))
});
loadFeaturesAfrique = function(response) {
var features = vectorSourceAfrique.readFeatures(response);
vectorSourceAfrique.addFeatures(features);
};
var fill = new ol.style.Fill({
color: 'rgba(255,120,4,0.4)'
});
serverVectorAfrique = new ol.layer.Vector({
source: vectorSourceAfrique,
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: 'red', width: 2}),
fill: fill
})
});
/*Couche Region*/
var center = ol.proj.transform([-72.6, 41.7], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 12
});
var map = new ol.Map({
target: 'map',
layers: [serverVectorAfrique],
view: new ol.View({
projection: 'EPSG:4326',
center:[11.49869,3.85888],
zoom:5
})
});
map.addControl(new ol.control.ScaleLine());
map.addControl(new ol.control.MousePosition());
map.addControl(new ol.control.FullScreen());
map.addControl(new ol.control.ZoomSlider());Je rappelle que j'utilise geoserver sur le port 8086, mon espace de travail est stat_workspace et la couche affichée est afrique.
Il faudra au préalable ajouter les lignes suivantes dans le fichier web.xml de geoserver car le paramètre "outputFormat=text/javascript" de l'url est désactivé par défaut.
Code:
<context-param>
<param-name>ENABLE_JSONP</param-name>
<param-value>true</param-value>
</context-param>Hors ligne
#3 Thu 16 April 2015 12:31
Re: openlayes 3 , wfs , geoserver
Bonjour,
Vous aurez peut-être un peu plus de succès ici.
Bruno
Hors ligne
