Suite

Créer et afficher une couche vectorielle à partir de Geoserver à l'aide d'Openlayers3

Créer et afficher une couche vectorielle à partir de Geoserver à l'aide d'Openlayers3


Il semble que la transition de l'OL2 à l'OL3 sera plus difficile que je ne le pensais. Il existe des différences significatives et le support en ligne est encore limité (en ce qui concerne les exemples, etc.)

J'essaie de faire quelque chose de relativement simple… pour afficher une couche WFS sur ma carte en utilisant OpenLayers3. J'ai trouvé cet exemple et j'ai essayé de le modifier selon mes besoins.

Il présente 3 façons différentes de créer une couche vectorielle à partir du géoserveur et j'ai utilisé la dernière (format JSONP). Cela signifie que j'ai dû activer JSONP dans le géoserveur comme décrit ici.

Lorsque j'essaie de voir la carte, j'obtiens une page blanche avec l'erreur :

Uncaught TypeError : undefined n'est pas une fonction

à la ligne 82 qui est :

stratégie : ol.loadingstrategy.tile(nouveau ol.tilegrid.XYZ({

Si je change cette ligne en :

stratégie : ol.loadingstrategy.box

alors je vois la couche de carte (mais pas la couche vectorielle) et j'obtiens cette erreur :

XMLHttpRequest ne peut pas charger http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFe… 4558475.055843057%2C2678334.3618555046%2C4592871.718571385%2CEPSG%3A900913. Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'accès à l'origine 'null' n'est donc pas autorisé.

Ceci est mon code dans la fonction init()

function init() { var center = ol.proj.transform([23.709719,37.973333], 'EPSG:4326','EPSG:900913'); var view = new ol.View ({ center: center, zoom: 12, }); var newLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); // Couche WFS de Geoserver loadFeatures = function(response) { formatWFS = new ol.format.WFS(), sourceVector.addFeatures(formatWFS.readFeatures(response)); } ; sourceVector = new ol.source.Vector({ loader: function(extent) { $.ajax('http://localhost:8080/geoserver/wfs',{ type: 'GET', data: { service: 'WFS' , version : '1.1.0', requête : 'GetFeature', nom de type : 'dSpatialAnalysis:categoriesdata', srsname : 'EPSG:900913', outputFormat : 'application/json', bbox : extend.join(',') + ',EPSG:900913' }, }).done(loadFeatures); }, stratégie : ol.loadingstrategy.bbox }); layerVector = new ol.layer.Vector({ source: sourceVector, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 255, 1.0)', width : 2 }) }) }); map = new ol.Map({ target:'map', renderer:'canvas', view: view, layer: [newLayer, layerVector], });

}

J'ai téléchargé la bibliothèque et l'appelle localement :

   

ÉDITER

La suppression du port de l'URL effectue la demande correctement et je peux voir la réponse dans Firebug. Mais j'ai toujours des problèmes pour afficher les points sur la carte.


À propos du problème de script inter-domaines, comme @iant le suggère, vous devez définir un proxy. La suppression du port le fera simplement fonctionner localement, ou du moins fonctionnera lorsque vos requêtes http sont exécutées à partir du même domaine et du même port.

Maintenant, pour votre deuxième problème, je pense que cela a à voir avec la projection que vous utilisez. Pour autant que je sachenouveau ol.source.OSM()est projeté dansEPSG : 3857donc je recommanderais de tourner chaque projection que vous passez à ceci et de vérifier à nouveau


C'est comme ça que j'ai géré ça après tout. Comme @iant et @pavlos l'ont suggéré, j'ai utilisé un proxy :

var url="http://localhost:8080/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeNames=dSpatialAnalysis:categoriesdata" ; var vector_layer=new ol.layer.Vector({ title : 'layer_name', source : new ol.source.Vector({ url : '/cgi-bin/proxy.cgi?url='+ encodeURIComponent(url), format : nouveau ol.format.WFS({ }) }), style : iconStyle });