WFS Layer mit OpenLayers einbinden?

Ich möchte einen WFS-Layer vom GeoServer mithilfe von OL einbinden, dabei habe ich mich an das Beispiel von OpenLayers (vectorWFSgehalten.

Mein Code sieht wie folgt aus (URLs wurden maskiert wegen GF):

<!DOCTYPE html>
<html>
  <head>
    <title>WFS</title>
    <meta charset="UTF-8">
    <link href="htt ps://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet" type="text/css">
    <script src="htt ps://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
	var vectorSource = new ol.source.Vector({
	   format: new ol.format.GeoJSON(),
	   url: function(extent) {
	      return 'htt p://osmatrix.geog.uni-heidelberg.de/geoserver/' +
		'wfs?version=1.1.0&request=GetFeature&typename=fdepasquale:fdepasquale_countries&maxFeatures=5000&' +
		'outputFormat=application%2Fjson&srsname=EPSG:4326&' +
		'bbox=' + extent.join(',') + ',EPSG:4326';
	   }
	});
			
	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({
	       center: [-8908887.277395891, 5381918.072437216],
	       maxZoom: 19,
	       zoom: 12
	    })
	});
    </script>
  </body>
</html>

Leider bekomme ich keinen Layer angezeigt (Chrome) und die Konsole spuckt folgendes aus:

Uncaught SyntaxError: Unexpected token < in JSON at position 0at JSON.parse (<anonymous>)
  at Lo (ol.js:473)
  at Qq.k.Qa (ol.js:473)
 at U.<anonymous> (ol.js:471)

Ich bin totaler Neuling und muss diese Aufgabe für die Uni absolvieren. Vielleicht weiß jemand, was ich falsch gemacht habe.

Die Zoom-Buttons von der Map werden übrigens angezeigt.

HTML JavaScript ol Map OpenLayers
1 Antwort

Meistgelesene Fragen zum Thema Map

Wie kann ich bei CS GO alleine auf eine Map mit unendlich Munition?

5 Antworten

Snapchat Karte was bedeuten die Symbole?

4 Antworten

Wo finde man z.B Norden bei Google Maps?

4 Antworten

Seit neuesten sind keine Strassennamen mehr eingeblendet bei Google Maps , nur mein Standort wird angezeigt. Was muss ich machen? ?

2 Antworten

Snapchat neue Funktion, die Karte. Was bedeuten die blaue Kreise?

2 Antworten

Wie bekomme ich diese Übersicht weg?

1 Antwort

Kann man bei minecraft (ps4) die karte vergrößern?

2 Antworten

Minecraft Karte (Item) duplizieren. Wie?

1 Antwort

Wo finde ich die Aufgabe von Farcry 4 Fashion Week Aufgabe ,,Haut von Dickhaut,,?

1 Antwort

Map - Neue und gute Antworten