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 (vectorWFS) gehalten.

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.

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript

04.02.2018, 23:57

Ich habe mir einmal die URL angeschaut, die du als Source aufrufst:

http://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=-Infinity,-Infinity,Infinity,Infinity,EPSG:4326

Der Server antwortet auf diese Anfrage mit einem Fehler:

java.lang.RuntimeException: java.io.IOException java.io.IOExceptionERROR: parse error - invalid geometry Hint: "POLYGON ((-�" <-- parse error at position 12 within geometry

Ich vermute, dass der Server eigentlich ein JSON-Objekt zurückgeben sollte. Da dies nicht der Fall ist, folgt ein Fehler. Überprüfe am besten nochmal die URL, die du zusammenbaust bzw. die URL-Parameter.

Lillady0894

Beitragsersteller

05.02.2018, 11:45

hab nun den link korrigiert: http://osmatrix.geog.uni-heidelberg.de/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=fdepasquale_countries&outputFormat=application%2Fjson&srsname=EPSG:4326&bbox=-181.800003051758,-90.8681716918945,181.800018310547,84.5022735595703,EPSG:4326

kein error wenn man ihn öffnet, kein error in der konsole, map wird jedoch trotzdem nicht angezeigt....

regex9

06.02.2018, 11:09

@Lillady0894

Ich werde mir das heute nochmal anschauen, gestern bin ich nicht dazu gekommen.

regex9

07.02.2018, 03:31

@Lillady0894

So sollte es nun richtig sein: https://jsfiddle.net/x2v69ytt/

Dein Fehler lag wohl darin, dem Property url eine Funktion zu übergeben. Wenn du so etwas machen möchtest, dann musst du wohl einen Custom Loader verwenden. Ein Beispiel: https://jsfiddle.net/nx8z6swv/

Ähnliche Beiträge

Discord bleibt komplett grau?

Wenn ich mein Discord starte, bleibt es komplett grau ohne den Symbolen und dem Discord Schriftzug. Es ist ein komplett graues 4-Eck.

Falls das irgendwie hilft:

Das stand in der Console:

Uncaught SyntaxError: Invalid or unexpected token

at Object.exports.runInThisContext (vm.js:78:16)

at Module._compile (module.js:543:28)

at Object.Module._extensions..js (module.js:580:10)

at Module.load (module.js:488:32)

at tryModuleLoad (module.js:447:12)

at Function.Module._load (module.js:439:3)

at Module.require (module.js:498:17)

at require (internal/module.js:20:19)

at requireModule (evalmachine.<anonymous>:6:43)

at Object.requireModule

...zum Beitrag

Warum bekomme ich bei diesem JavaScript-Funktionsaufruf einen Syntax Error?

Hallo,

ich bekomme folgende Fehlermeldung im Browser angezeigt:

Uncaught SyntaxError: Invalid or unexpected token

echo '<button id="todemissendbtn" onclick=copytoclipboard("' . $labor_map_patid[0] . ',' . $labor_map[$i][1] . ',' . $labor_map[$i][2].'")>an DEMIS</button>';

Dabei macht er genau bei $labor_map[$i][2], was ein Datumswert ist in Form von 2022-12-16 08:01:00. Weiß jemand, was da nun falsch läuft?

...zum Beitrag

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Hallo,

ich versuche mit JavaScript Daten über ein Servlet aus der Datenbank zu holen. In folgende Zeile bekomme ich die Fehlermeldung aus dem Titel:

var katHoler = JSON.parse(xmlhttp.responseText);

Ich habe gelesen, dass meine Funktion eine JSON erwartet. Aber ich habe nur Lösungen mit Libraries wie jQuery gefunden. Die darf ich aber von meinem Professor aus nicht benutzen.

function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var katHoler = JSON.parse(xmlhttp.responseText);
      JSON.stringify(katHoler);
      
      var ausgabe = "<a href=" + "DisplayKlamotten" + "?=" + katHoler.kategorie + ">" + katHoler.kategorie + "</a>";

      document.getElementsByClassName("innerDiv").innerHTML = ausgabe;
      console.log(xmlhttp.responseText);
      console.log(katHoler.kategorie);
      console.log(katHoler.id);
    }
  }

  xmlhttp.open("GET", servletURL, true);
  xmlhttp.send();
}

...zum Beitrag

Wie kann ich Polygone in Leaflet beim hovern mit der Maus highlighten?

Hallo, ich versuche seit einer ganzer weile den Highlight effect in js mit Leaflet und kriege es nicht hin.

Kennt sich jmd aus?
Kann ich z.B. auch Polygone einzeln den highlight effect geben ohne sie zu gruppieren?

Habe mega viel gegoogle, verstehe das meiste aber einfach nicht, und selsbt beim copy pasten gehts nicht.
Ich weiß nciht mal wo ich was ändern muss...

wie bekomme ich z.B. hier zu einem highliught effect beim hovern mit der maus

var group = new L.LayerGroup([
  new L.Polygon([
    [-50, -50], [50, -50], [50, -10], [-50, -10]
  ], {'label': 'Polygon 1', 'popup': 'Polygon 1'}),
  new L.Polygon([
    [-50, 10], [50, 10], [50, 50], [-50, 50]
  ], {'label': 'Polygon 2', 'popup': 'Polygon 2'})
]).addTo(map);

wenn ich https://embed.plnkr.co/plunk/LjzFbI hier raus das Beipsiel kopieren funktioniert es bei mir nicht.

Es gibt zu dem Thema in meinen Augen viel zu wenig ausführliche Hilfen.

Ich habe bereits eine Map, und darauf 10 Polygone, die aber auf nichts reagieren.

...zum Beitrag

Wie gebe ich Dictionary einer Funktion in Javascript mit?

Hallo, ich kriege folgende Fehlermeldung bei meinem Code: "Uncaught SyntaxError: Unexpected identifier" und weiß nicht wie ich mein dict meine onclick so übergebe, dass ich anschließend damit weiterarbeiten und iterieren kann. Als Beispiel für mein Problem habe ich folgende kleine anwendung geschrieben:

script.js:

function geklickt(dictionary){
$('#Entries').text(dictionary);
}


var dict =
{'lizens':
    {'Apache License 2.0':
        {'value': 23,
         'paths': ['Bernd', 'Hans'],
         'id': '342345'}},
'rechte':
        {'Copyright (c) 2013-2020 the original author or authors': 3},
'authoren':
        {'Bexter': 6, 'senior': 6},
'fileTypes': [0, 21, 0, 0, 0, 0, 0, 0, 44],
}


 $("#buttons").append(`<button href="#"onclick="geklickt(${dict})">drücken</a></button>`);



test.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >

<ul id="buttons"></ul>
<p id="Entries"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='assets/js/scripts.js') }}"></script>
</body>
</html>

Also meine Frage ist wie ich jetzt mein dict der onclick übergebe damit es am ende ausgegeben werden kann. In meiner eigentlichen Anwendung will ich damit natürlich noch weiterarbeiten, also vlt auch so dass ich es anschließend noch iterieren kann. Ich bin recht neu und kenne den Zusammenhang zwischen String und Dictionary noch nicht richtig, kann ich bei einem Dictionary iterieren wenn es als string vorliegt oder ist Dictionary eine art eigene Datenstruktur?
Danke schonmal im Voraus.

...zum Beitrag

Selfmade Fullstack lernen?

Hallo miteinander,

Ich hab angefangen über Codecademy mir das Programmieren (obwohl das Wort dafür etwas zu groß ist) auf HTML und CSS beigebracht.

Ich hab mich mit einer Softwareakademie in Verbindung gesetzt und bin auf die Schlussfolgerung gekommen, das jeder sich das auch von alleine beibringen kann.

Kann mir jemand alle Programme von A bis Z (also alles zum Programmieren, nicht nur die drei Elemente wie HTML CSS und Javascript) auflisten, die ein Software Entwickler drauf haben muss?

Wenn möglich dann bitte auch in der Reihenfolge in der man sie lernen sollte.

Und welche Programme bzw. Webseiten muss ich dafür nutzen, um alles zu lernen?

Ich möchte in den nächsten 2-3 Jahren neben meinem Beruf mir das alles beibringen, da ein Softwareentwickler sich nicht auf seine Qualifikationen auf dem Lebenslauf sondern eher auf sein eigenes Portfolio berufen muss bei Bewerbungsgesprächen.

Ich danke für die Antworten & die Hilfe im Voraus.

Da mir HTML und CSS zu lernen leicht fällt, denke ich das diese Richtung für mich richtig ist.

Liebe Grüße

...zum Beitrag

Welche Programmiersprache soll ich lernen?

Ich möchte entweder C# oder Javascript lernen.

C# programmieren finde ich persönlich viel interessanter als Javascript aber ich weiß, dass mir Javascript mehr bringen würde, wenn ich mich da vertiefe.

Was soll ich also lernen?

...zum Beitrag

SyntaxError: Unexpected token .?

Hi, ich habe mir einen Discord Giveaway Bot gezogen, der auf meinem Windows auch wunderbar funktionierte... Als ich den jedoch auf meinen Server spielte:

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at Module.Hook._require.Module.require (/usr/local/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:80:39)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/opt/bots/node_modules/discord.js/src/structures/APIMessage.js:4:22)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
/opt/bots/node_modules/discord.js/src/structures/MessageEmbed.js:460
 module.export = MessageEmbed;

Die Frage ist, was läuft da falsch?

...zum Beitrag

Ist es möglich, die Photoshop-Funktionen durch eine Photopea-Website zu ersetzen? Ist es eine anständige Website? Kann sie genutzt werden?

...zum Beitrag

Angular: Änderungen am Server?

Hallo ITler.

Ich habe mir überlegt meine Website zu überarbeiten und das mit Angular zu tun. Ich habe sie momentan mit PHP und einer SQLite DB umgesetzt. (Ich habe noch nie mit Angular gearbeitet - bitte verständliche Anfängerfreundliche Antworten)

Meine Fragen:

Kann ich eine DB ansteuern?
Gibt es eine Alternative Daten am Server über Angular zu ändern zb. DB / JSON

Was möchte ich machen:

Ich habe eine Seite auf der ich alle Lektionen aufliste und klickt man auf ein Listenelement so kommt man zur Lektion. Die Daten werden aus der DB abgefragt. Ich möchte von meiner Applikation neue Lektionen erstellen (+ Bilder hochladen) und Änderungen vornehmen.

Danke im voraus

...zum Beitrag

JavaScript HA richtig?

Hallo,

uns wurde folgendes aufgegeben worden:

"Wenn Variable a größer als 2 und kleiner als 11 ist oder Variable b größer oder gleich 6 und kleiner als 14 ist, dann geben Sie „Richtig“ aus, andernfalls geben Sie „Falsch“ aus."

So habe ich meinen Code geschrieben:

const a = prompt("Write a number!")

const b = prompt("Write a number!")

if (a > 2 && a < 11 ) {

alert("Right!")

}

else if (b >= 6 && b < 14) {

alert("Right!")

}

else {

alert("Wrong!")

}

Aber irgendwie ergibt die Aufgabe keinen Sinn? weil wenn ich bei const a z.B. 3 schreibe (Dann sollte ja bei alert "Richtig" rauskommen) und dann bei const b z.B. 15 eingebe ( Sollte ja falsch rauskommen), dann kommt dort aus irgendeinem grund am ende ,,Richtig" raus. Also guckt euch mal bitte den code und die aufg. mal an und dann checkt ihr glaub ich was ich meine...

Dankeschön im Voraus

...zum Beitrag

Wie kann ich in Google Forms eigenen HTML-Code einfügen?

Ist das möglich? Wenn ja, wie füge ich mein eigenes HTML & JavaScript in Google Forms ein?

Ich möchte es nicht andersherum machen und Google Forms in meiner Website einbetten, sondern direkt in Google Forms und den Share-Link teilen.

...zum Beitrag

PHP Funktion aufrufen?

Ich habe eine PHP Funktion in einer anderen ausgelagerten Datei und möchte diese jetzt in einer JavaScript Funktion aufrufen siehe Quellcode:

was mache ich falsch und bitte mit Lösungsvorschlägen


function PersonXSenden()
{
   InhaltPersonX = document.getElementById("X").value;
   console.log(InhaltPersonX);
   document.cookie = "XCookie = " + InhaltPersonX;
   test3();

   <?php
       include "Chat2.php";
       test();
   ?>
}

...zum Beitrag

SyntaxError: Unexpected token s in JSON at position 0?

Hallo liebe Gutefragler,

Ich möchte eine Auktions-Web-App erstellen und normalerweise fügen Sie die Auktionen über ein Formular hinzu. Wenn ich das Formular korrekt ausfülle und dann auf die Schaltfläche Auktion erstellen klicke, erhalte ich eine Fehlermeldung. Normalerweise sollte man keine bekommen und man sollte die Auktionen in einer Tabelle in einer index.html bekommen.

Hier ist mein Code:

$(document).ready(function() {
  $("#create").click(function() {
    var data = {
      seller: $("#email").val(),
      name: $("#item").val(),
      html: $("#desc").val(),
      minimum_price: $("#str").val(),
      buyout_price: $("#buyout").val(),
      created_on: Date.now(),
      duration: $("#dur").val()
    }
    $.ajax({
      type: 'POST',
      url: "http://localhost:9000/auction",
      data: data,
      dataType: "json",
      contentType: "application/json",
      error: function() {
        alert('An error occurred while creating the new auction');
      },
      success: function(data) {
        $('form :input').val('');
        alert("Good");
      }
    });
  });
});

Mein Localhost sagt:

SyntaxError: Unexpected token s in JSON at position 0

Wo ist mein Fehler? Danke im Voraus!

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen