Mehr

Erstellen und zeigen Sie einen Vektor-Layer von Geoserver mit Openlayers3

Erstellen und zeigen Sie einen Vektor-Layer von Geoserver mit Openlayers3


Es scheint, dass der Übergang von OL2 zu OL3 schwieriger wird, als ich dachte. Es gibt erhebliche Unterschiede und der Online-Support ist noch begrenzt (in Bezug auf Beispiele usw.)

Ich versuche, etwas relativ Einfaches zu tun ... um mit OpenLayers3 einen WFS-Layer auf meiner Karte anzuzeigen. Ich habe dieses Beispiel gefunden und versucht, es an meine Bedürfnisse anzupassen.

Er stellt 3 verschiedene Möglichkeiten vor, um einen Vektorlayer vom Geoserver zu erstellen, und ich habe den letzten verwendet (JSONP-Format). Das bedeutet, dass ich JSONP im Geoserver wie hier beschrieben aktivieren musste.

Wenn ich versuche, die Karte anzuzeigen, erhalte ich eine leere Seite mit der Fehlermeldung:

Uncaught TypeError: undefined ist keine Funktion

in Zeile 82, das ist:

Strategie: ol.loadingstrategy.tile(neu ol.tilegrid.XYZ({

Wenn ich diese Zeile ändere in:

Strategie: ol.loadingstrategy.box

dann sehe ich die Kartenebene (aber nicht die Vektorebene) und erhalte diese Fehlermeldung:

XMLHttpRequest kann http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFe… nicht laden… 4558475.055843057%2C2678334.3618555046%2C4592871.718571385%2CEPSG%3A900913. Auf der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin 'null' darf daher nicht zugreifen.

Dies ist mein Code in der Funktion 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() }); // WFS-Layer vom 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', Anfrage: 'GetFeature', Typname: 'dSpatialAnalysis:categoriesdata', srsname: 'EPSG:900913', outputFormat: 'application/json', bbox: Extent.join(',') + ',EPSG:900913' }, }).done(loadFeatures);}, Strategie: 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], });

}

Ich habe die Bibliothek heruntergeladen und rufe sie lokal auf:

   

BEARBEITEN

Das Entfernen des Ports aus der URL macht die Anfrage korrekt und ich kann in Firebug die Antwort sehen. Aber ich habe immer noch Probleme, die Punkte auf der Karte anzuzeigen.


Über das domänenübergreifende Skriptproblem, wie @iant vorschlägt, müssen Sie einen Proxy einrichten. Wenn Sie den Port entfernen, funktioniert er nur lokal oder funktioniert zumindest, wenn Ihre http-Anfragen von derselben Domäne und demselben Port ausgeführt werden.

Nun zu Ihrem zweiten Problem, ich denke, es hat mit der Projektion zu tun, die Sie verwenden. Soweit ich weissnew ol.source.OSM()wird projiziert inEPSG:3857Daher würde ich empfehlen, jede Projektion, die Sie übergeben, darauf umzudrehen und erneut zu überprüfen


So habe ich das nach allem geschafft. Wie @iant und @pavlos vorgeschlagen haben, habe ich einen Proxy verwendet:

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: neues ol.format.WFS({ }) }), Stil: iconStyle });

Schau das Video: GeoServer Web GIS: Download and Install Windows Installer EN