Geodatenanwendungen. Sommersemester Prof. Dr. Hans-Peter Wiedling. Vorgänger ancestor. Eltern parent. Geschwister. sibling.

Transkript

1 Geodatenanwendungen Sommersemester 2011 Prof. Dr. Hans-Peter Wiedling Vorgänger ancestor Eltern parent Geschwister sibling Kinder, child Nachfolger descendant

2 Lernziele Die Studierenden erlernen an Praxisbeispielen die Grundlagen zur Entwicklung von Geodatenanwendungen und entsprechender Infrastruktur Zum Einsatz kommen XHTML, CSS, JavaScript/DOM, AJAX, HTTP und Google MAPS API Android für die mobile Komponente PHP und XSLT Angestrebte Kompetenzen: Die Studierenden verstehen die spezifischen Probleme bei der Planung, Entwicklung und Qualitätssicherung von Geodatenanwendungen und können sicher mit Geodaten umgehen Die Teilnehmer verstehen das Zusammenspiel der verschiedenen Techniken lernen die wesentlichen Standards kennen können komplexe und interaktive Geodatenanwendungen erstellen erlernen Grundlagen, um sich in weitere Geodatenanwendungen einzuarbeiten Geodatenanwendungen, Seite 2

3 Lehrinhalte Prozesskette Akquisition, Weitergabe, Aufbereitung, Visualisierung und Verknüpfung von Geodaten Typische Algorithmen auf geografischen Datenstrukturen Grundlagen in der Programmierung mit der Google MAPS API Entwicklung einer mobilen Geodatenanwendung unter Android Strukturtransformation mit XSLT und XPath Geodatenanwendungen, Seite 3

4 Bibliographie DE/apis/maps/documentation/mapsdata/developers_guide_java.html Arno Becker, Marcus Pant: Android Grundlagen und Programmierung. dpunkt-verlag. 1. Auflage, ISBN Frederik Ramm, Jochen Topf: OpenStreetMap Die freie Weltkarte nutzen und mitgestalten. lehmanns media. 1, Auflage ISBN Reto Meier: Professional Android Application Development. Wiley, 2008, ISBN Geodatenanwendungen, Seite 4

5 Motivation Anwendungen, Geodateninfrastruktur

6 Anwendungen Bodenmanagement (Kataster)... Flottenmanagement... Routenplanung... Tourismus, Freizeit... Social networking... Wetterinformation... Precision Farming... Verkehrsinformationen (Flugzeug, Schiff, Auto)... Neben Kommunikation ist Mobilität ein hohes menschliches Grundbedürfnis mit all seinen wirtschaftlichen und sozialen Aspekten! Geodatenanwendungen, Seite 6

7 Umfeldsuche Communites Google Open Street Map Radtouren Hessen Deutschlandviewer Precision Farming... Wetterinformationen..u. v. m. Geodatenanwendungen, Seite 7

8 GDI: Geodateninfrastruktur Das ist Ziel, Nutzer von Geodaten und -informationen und deren raumbezogene Anwendungen von Daten in eine vernetzte Geodateninfrastruktur einzubinden (aus dem Vortrag von Dr. Schweitzer, Hessisches Landesamt für Bodenmanagement: Geodateninfrastruktur Hessen Mehrwert für den Nutzer; 11. u. 12. Oktober 2005): Leitprojekte mit Kommunen und Anwendern Landesbehörden entwickeln gemeinsam mit Wirtschaft und Kommunen Dienste und stellen diese zur Verfügung, die insbesondere einen digitalen prozess-orientierten Datenfluss für Geschäftsprozesse ermöglichen. Nutzen einer Geodateninfrastruktur aufzeigen Geodatenanwendungen, Seite 8

9 Die Ziele dieser Leitprojekte GDI in die Fläche bringen Standards und Komponenten der GDI-Hessen in die breite Nutzung bringen Kommunen und Private einbinden Nutzer steht dabei im Mittelpunkt Wiederverwendbare Komponenten erzeugen Synergieeffekte nutzen durch standardisierte Webservices als Teil einer GDI einmal entwickeln und mehrfach nutzen Geodatenanwendungen, Seite 9

10 Geodatenanwendungen, Seite 10

11 Webservices Durch die Nutzung standardisierter Schnittstellen können heterogene Datenquellen, also auch proprietäre Geodatenformate, interoperabel bereitgestellt werden, ohne diese Datenquellen selbst in ein anderes Format überführen und redundant halten zu müssen. Anwendungen können die angebotenen Geodatendienste direkt ansprechen und verschafft dem Anbieter die nötige Investitionssicherheit, da die Bereitstellung auf aktuellem Stand der Technik ermöglicht wird. Geodatenanwendungen, Seite 11

12 GDI als serviceorientierte Architektur (SOA) Das Architekturkonzept der GDI-DE spiegelt sich aus technischer Sicht in dem Publish-Find-Bind-Muster der serviceorientierte Architektur (SOA) wider: 1. Der Anbieter (Provider) von Geodaten/-diensten veröffentlicht diese durch Registrierung in einem Katalog bzw. Verzeichnis (publish). 2. So werden diese für den Anwender (Consumer) recherchierbar: Der Anwender durchsucht den Katalog nach Geodaten/-diensten. Der Katalog liefert ein Suchergebnis zurück (find). 3. Der Anwender (Consumer) kann die gefundenen Geodaten/-dienste ansprechen und gemäß Nutzungsbedingungen verwenden (bind). Geodatenanwendungen, Seite 12

13 Architektur GDI-DE Quelle: Architektur der Geodateninfrastruktur Deutschland Version 2.0 (beta) Geodatenanwendungen, Seite 13

14 Prozesskette Akquisition, Anreichern Sammeln, Verwalten, Verknüpfen, Archivieren Verknüpfen Kontrollierte Weitergabe Idee, Planung, Bestandsaufnahme Anzeigen, Nutzen, Recherche Geodatenanwendungen, Seite 14

15 Datenstrukturen und Math. Berechnungen Satellitendaten/Orthophotos Punkt-, Linien- und Flächeninformation Distanz, Inside, Remove und Simplify

16 Digitale Orthophotos Orthophotos sind eine realitätstreue Darstellung der Erdoberfläche. Sie entstehen durch eine differenzielle Entzerrung der Original-Luftbilder. Die Digitalen Orthophotos werden im Blattschnitt der Deutschen Grundkarte (2 x 2 km) nach bundesein-heitlichen Standards erstellt. Die Genauigkeit beträgt ± 1m. Die Digitalen (Farb-) Orthophotos liegen für Hessen flächendeckend mit einer Bodenauflösung von 0,4 m (DOP40) vor. Für Teilgebiete sind auch Color-Infrarotbilder verfügbar. Quelle: Geodatenanwendungen, Seite 16

17 Ressource Bild: Ein Blick hinter die Kulissen Geodatenanwendungen, Seite 17

18 Das Bild besteht aus Kacheln 0.. tx.. maxtilex ty.. maxtiley - 1 Geodatenanwendungen, Seite 18

19 Karten als Web-Service Mit jedem Zoom und Pan werden die Kachheln alle einzeln per Request geladen Kacheln werden auch schon über die sichtbare Kartenansicht hinaus, herunter, erst in einem Bereich, in dem keine Kacheln existieren, ist es nötig neue Kacheln nachzuladen. Die Anzahl der Kacheln steigt dabei exponentiell. Dabei findet die Bildpyramide Anwendung und die Kacheln werden dabei nach der hierarchischen Quadtree-Struktur unterteilt (Parameter beim Request, Bsp: Geodatenanwendungen, Seite 19

20 Punkt-, Weg- und Flächeninformation <node>, <way> und closed way (aus OSM) Ein Knoten (node) besteht zumindest aus Positionsinformation (Längenund Breitengrad), üblicherweise einem Zeitstempel und gegebenenfalls aus einer Höheninformation: <node id=" " lat=" " lon=" " version="1" changeset="203496" user="80n" uid="1238" visible="true" timestamp=" t11:40:26z"> <tag k="highway" v="traffic_signals"/> </node> Knoten können mehrere Wege oder Gebieten zugeordnet sein Ein Weg (way) besteht aus mindestens 2 und höchstens 2000 Knoten Knoten können mehreren Wegen zugeordnet sein Geodatenanwendungen, Seite 20

21 <way> Wege sind Punktfolgen, die neben den Punkten (hier nd) zusätzliche Informationen (Name, Klassifikation,...) enthalten: <way id=" " visible="true" timestamp=" t19:07:25z" version="8" changeset="816806" user="blumpsy" uid="64226"> <nd ref="822403"/> <nd ref=" "/> <nd ref="821601"/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref=" "/> <nd ref="823771"/> <tag k="highway" v="unclassified"/> <tag k="name" v="clipstone Street"/> <tag k="oneway" v="yes"/> </way> Flächen (Seen, Gebäude,...) sind beschrieben als geschlossene Punktfolgen Geodatenanwendungen, Seite 21

22 Geopunkt class GpsData { public String time; public double lat;// Latitude/Breitengrad public double lon;// Longitude/Längengrad public double elevation; // Altitude/Höhenangabe...// weitere Merkmale, z.b. Genauigkeit public GpsData ( double lat, double lon, double elevation, String time) { this.time = time; this.lat = lat; this.lon = lon; this.elevation = elevation; } } // GpsData Geodatenanwendungen, Seite 22

23 Ein bisschen Mathematik... R = Q + t * v, mit v = P Q Skizze Gerade: t R Strahl: t >= 0 Kante: 0 <= t <= 1 Q R v P Die Angaben haben immer einen Bezugspunkt (Ursprung), auch wenn die Achsen oder der Ursprung nicht angegeben sind. Geodatenanwendungen, Seite 23

24 POI in nächster Nachbarschaften (Nearest Neighbour), Abstandabschätzungen In planaren Abbildungen werden die folgenden Abstandsformeln zwischen zwei Punkten verwendet: Euklidscher Abstand: d 2 (neighbour) = ( this.x - neighbour.x ) 2 + ( this.y - neighbour.y ) 2 neighbour ist ein weiteres (benachbartes) Objekt; Häufig findet man auch folgende Abstandsformeln: Maximum-Distanz: d(neighbour,obj)= max (neighbour i -obj i ) oder Manhatten- bzw. Taxi-Distanz d(neighbour,obj)= Σ neighbour i -obj i Da es sich um Abstände auf der Erdoberfläche und somit einer Sphere handelt, kann der Euklidsche Abstand aufgrund sich kumulierender Ungenauigkeiten nicht angewendet werden. Geodatenanwendungen, Seite 24

25 Distanz Punkt-Kante (I) L(t) = P + t * v Skalarprodukt verwenden: R Q (R-L(t)) * v = 0 (R P t * v) * v = 0 (R - P ) * v = t * v * v P v t = ((R - P) * v) / (v * v) (nicht kürzen; v ist ein Vektor!) t in (I) einsetzen liefert benötigten Punkt auf der Kanten, dann kann dist berechnet werden: dist = R P + ((R - P) * v) / (v * v) * v Alternative Berechnung: Information über die Fläche nutzen... Geodatenanwendungen, Seite 25

26 Distanzberechnung über die Fläche P 1 P 1 = P 1 P 2 x P 0 P 2 (P 0 P 2 ) P 1 P 3 x P 0 P 3 liefert die Größe der aufgespannten Fläche; wenn man nun die Fläche des Parallelogramms durch die Länge der einen Seite teilt, erhält man die Länge der anderen Seite genau das suchen wir! Bemerkung: im 2D entspricht P 1 P 2 x P 0 P 2 der Determinanten. Die Determinante kann wie folgt berechnet werden: im 2D: det a b = a * d b * c Prinzip: c d Geodatenanwendungen, Seite 26

27 Quelle: Geoinformatik in Theorie und Praxis von Norbert de Lange Geodatenanwendungen, Seite 27

28 Distanz Distanzberechnungen finden also auf einer Kugeloberfläche (Großkreis) statt. Die Kugeloberfläche ist nur eine Annährung an die tatsächliche Oberfläche der Erde! Geodatenanwendungen, Seite 28

29 Abstand auf der Kugeloberfläche (Großkreis) public static double distance(gpsdata p1, GpsData p2) { double d; double R = 6371; // Erdradius in km d = Math.acos(Math.sin(Math.toRadians(p1.lat)) * Math.sin(Math.toRadians(p2.lat)) + Math.cos(Math.toRadians(p1.lat)) * Math.cos(Math.toRadians(p2.lat)) * Math.cos(Math.toRadians(p2.lon - p1.lon))); return d * R; } // distance Quelle: Bem.: Angaben müssen im Bogenmaß erfolgen (radian = grad * π / 180 ) Geodatenanwendungen, Seite 29

30 Distanz zwischen 2 Punkten (Links) Formelsammlung (als Einstieg): Distanzformel (Großkreis) d zwischen zwei Punkten mit den Koordinaten {lat1,lon1} und {lat2,lon2} lautet: d = acos(sin(lat1)*sin(lat2)+cos(lat1)*cos(lat2)*cos(lon1-lon2)) Für kurze Distanzen eignet sich auf die folgende Formel (weniger Rundungsfehler): d = 2*asin(sqrt((sin((lat1-lat2)/2))^2 + cos(lat1)*cos(lat2)*(sin((lon1-lon2)/2))^2)) d mit radius multiplizieren! Wenn man es ganz genau machen möchte: Evtl. auch noch interessant sind die Projektionen: Geodatenanwendungen, Seite 30

31 Konvexe und konkave Flächen Konkav Konvex Bedingung/Test: Man nehme bel. Punkte, die innerhalb der Fläche (oder auf deren Rand) liegen, und verbinde sie zu einer Linie, dann müssen auch alle Punkte, die auf dieser Linie liegen, innerhalb der Fläche liegen Bedingung erfüllt: Fläche konvex Bedingung nicht erfüllt: Fläche konkav obwohl die Bedingung mathematisch nicht zu beanstanden ist, können wir praktisch nicht mit ihr arbeiten Alternativen: jeder Innenwinkel ist 180 Schnittpunktberechnung zwischen bel. Kanten darf keine Lösung besitzen Geodatenanwendungen, Seite 31

32 Inside Test Anzahl Schnittpunkte zwischen Strahl und Kanten ist ungerade, dann liegt der Punkt innerhalb Vorab kann ein Test mit der Bounding Box erfolgen und somit der Berechnungsaufwand reduziert werden: xmin <= x <= xmax && ymin <= y <= ymax 1 2 Geodatenanwendungen, Seite 32

33 Simplyfication/Ausdünnen/Bereinigen Geopunkte am Anfang oder am Ende einer Aufzeichnung können streuen. Das Ziel ist dann, diese Punkte durch wenige zu ersetzen: Dazu können z. B. die Koordinaten des Schwerpunkts der entsprechenden Punkt oder immer wiederholt von drei Punkt gebildet werden. Der Schwerpunkt ist das arithmetische Mittel der Koordinaten der Punkte: Punktfolgen für Wege werden geglättet und letztendlich mit weniger Punkten beschrieben: dazu wird aus der Punktfolge P 0.. P n-1, der Punkt gesucht, der am weitesten von P 0 P n-1 entfernt ist Geodatenanwendungen, Seite 33

34 Glätten: Douglas-Peucker-Algorithmus P 0 Pn-1 Das Verfahren sucht zunächst in der Punktfolge, den Punkt P d, der von P o P n-1 am weitesten entfernt ist. P d Falls P d weiter als ein vorgegebenes Maß entfernt ist, wird das Verfahren für die Teilpunktfolgen wiederholt. Geodatenanwendungen, Seite 34

35 Viewing mit Google Maps API AJAX, DOM, Google Maps API, POI, Routen

36 Ein Beispiel mit AJAX und DOM Von einem Server (z.b. können entweder Sehenswürdigkeiten (poi.gpx) oder Touren (tour.gpx) abgerufen werden Die Ergebnisse werden in HTML eingefügt Anfrage wird konfiguriert via AJAX und DOM werden die Tabellen befüllt Geodatenanwendungen, Seite 36

37 : Asynchronous JavaScript and XML AJAX steht für zwei mächtige Browsertechniken welche bereits seit Jahren existieren, jedoch zunächst von Webentwicklern wenig beachtet wurden. Diese Techniken gewinnen an Beachtung, seit Services wie Google Maps, Google Mail oder Google Suggest diese verwenden. Mit diesen Techniken können Requests an den Server abgesetzt werden, ohne die Seite neu laden zu müssen und XML-Dokumente geparst und bearbeitet werden Seiten im Netz Geodatenanwendungen, Seite 37

38 AJAX: eine neue Technologie? AJAX wird häufig als neue Technologie dargestellt, mit der sich den Web-Entwicklern ganz neue Möglichkeiten eröffnen: Bereits 1999 wurde diese Technologie unter dem Namen XMLHTTPRequest von Microsoft eingeführt. Der Begriff AJAX geht auf einen im Februar 2005 veröffentlichten Artikel Ajax: A New Approach to Web Applications von Jesse James Garrett von der Firma Adaptive Path zurück. Die XMLHTTPRequest genannte Technologie wird unter dem Namen AJAX vorgestellt und bekannt. AJAX als Synonym für eine Technologie zur Schaffung Web Oberflächen. Geodatenanwendungen, Seite 38

39 Prinzipskizze Geodatenanwendungen, Seite 39

40 1. Schritt: Objekt erzeugen var http_request = null; function initrequest() // http_request Objekt anlegen { try { // Mozilla, Opera, Safari sowie Internet Explorer (ab v7) http_request = new XMLHttpRequest(); } // try catch(e) { var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; for (var i = avers.length -1; i >= 0; i--) { try {http_request = new ActiveXObject(avers[i]); break; } catch(e1) {} }//for }// catch e if (http_request!= null) { if (http_request.overridemimetype) http_request.overridemimetype('text/xml'); } else alert('xmlhttp-instanz kann nicht erzeugt werden!'); } // initrequest Geodatenanwendungen, Seite 40

41 2. Schritt: Anfrage an den Server senden... // Funktion, die ausgeführt wird nach Antwort des Servers http_request.onreadystatechange = neuerinhalt; // 1. Parameter: HTTP-Methode GET oder POST // 2. Parameter: abgefragte URL // (es kann kein anderer Server abgefragt werden!) // 3. Parameter: true (asynchron)/ false (synchron) http_request.open('get', url, true); // enthält anwendungsspez. Daten für Server (Suchanfrage) http_request.send(null);... Bem.: bei der Methode POST muss der MIME-Typ angepasst werden: http_request.setrequestheader ('Content-Type', 'application/x-www-form-urlencoded'); Geodatenanwendungen, Seite 41

42 3. Schritt: Die Antwort des Servers auswerten... function neuerinhalt() { // Callback if (http_request.readystate == 4) { // Prüfung des Requests if (http_request.status == 200) { // Prüfung der Antwort alert(http_request.responsetext); } (*) } else { alert('beim Request ist ein Problem aufgetreten.'); } } Bem.: http_request.responsetext liefert Antwort als Textstring http_request.responsexml gibt die Antwort des Servers als ein XMLDocument-Objekt; unter dem IE gab es Probleme mit der Auswertung; siehe Folgeseite Jetzt (*) können JavaScript DOM-Funktionen können genutzt werden Geodatenanwendungen, Seite 42

43 Umgang mit ResponseXML im IE if (window.activexobject) { var toappend = document.createelement('xml'); //responsetext in innerhtml einfügen toappend.setattribute('innerhtml',http_request.responsetext); // mit einem eindeutigen ID kennzeichnen toappend.setattribute('id', 'auniqueid'); // gesamten Zweig irgendwo einhängen document.body.appendchild(toappend); // XML Zweig anhand der ID suchen und als xmldoc ansprechbar machen xmldoc = document.getelementbyid('_makeauniqueid'); // Tag wieder entfernen document.body.removechild(document.getelementbyid('auniqueid')); }... Xmldoc verwenden... Es gibt Browserunterschiede! Geodatenanwendungen, Seite 43

44 4. Schritt: Antwort als XML-Objekt verarbeiten... var xmldoc = http_request.responsexml; var root_node = xmldoc.getelementsbytagname('root').item(0); alert(root_node.firstchild.nodevalue);... Der gesamte Prozess wird durch ein Benutzerereignis ausgelöst: <a href="javascript:macherequest('tour.gpx')">route anzeigen</a> Geodatenanwendungen, Seite 44

45 Methoden des XMLHTTPRequest-Objekts (I) abort() Stoppt die gegenwärtige Server-Anfrage getallresponseheaders() Gibt die vom Server gesendeten Header als String zurück. getresponseheader("headerlabel") Gibt den benannten Header als String zurück. open("method", "URL"[, asyncflag[, "username"[, "password"]]]) Öffent eine Verbindung zum Server. Parameter:method: GET POST PUT HEAD POST solte verwendet werden, wenn die gesendeten Daten größer als 500 bytes sind. HEAD wird verwendet, wenn nur Response-Header und keine Daten angefordert werden. Dieses kann z.b. verwendet werden, wenn für eine Datei auf dem Server das Datum der letzen Änderung (Last-Modified) abgefragt werden soll. URL: Pfad (relative oder absolut) + ggf. Querystring asyncflag: true false Asynchrone (true) oder synchrone (false) DatenübertragunguserName: password: Benutzername und Passwort für eine Ressource auf dem Server Geodatenanwendungen, Seite 45

46 Methoden des XMLHTTPRequest-Objekts (II) send(content) Sendet die Daten an den Server.Parameter:content: null bei GET oder ein Query-String bei POST setrequestheader("label", "value") Hierüber können Header gesetzt werden, z.b. der Content-Type. setmimetype("mimetype") setzen des Mimetyps der angeforderten Daten (Response). Wird vom Internet Explorer nicht unterstützt. Parameter: mimetype der MimeType als String (z.b. "text/xml") Geodatenanwendungen, Seite 46

47 Eigenschaften des XMLHTTPRequest-Objekts onreadystatechange Event-Handler der jedesmal aufgerufen wird, wenn sich der Verbindungsstatus (readystate) ändert readystate Enthält den aktuellen Verbindungsstatus. Mögliche Werte: 0 = Verbindung noch nicht geöffnet ('open()' noch nicht aufgerufen) 1 = Noch keine Anfrage gesendet ('send()' noch nicht aufgerufen) 2 = Anfrage gesendet, Antwort-Header und Antwort-Status kann abgefragt werden. 3 = Daten vom Server kommen nach und nach an. 'responsetext' enthält die bislang vom Server gesendeten Daten. 4 = Kommunikation mit dem Server ist abgeschlossen. Alle Daten sind angekommen (status = 200), wenn kein Fehler aufgetreten ist. Geodatenanwendungen, Seite 47

48 Eigenschaften des XMLHTTPRequest-Objekts responsetext Enthält die vom Server gesendeten Daten als Text responsexml Enthält die vom Server gesendeten Daten als XML-Daten. Wenn die Daten als Plaintext gesendet worden sind, enthält responsexml null. status Enthält den HTTP-Status der Verbindung als Zahl (z.b. 200 für Erfolg oder 404, wenn die angeforderte Ressource nicht existiert) statustext Enthält den HTTP-Status als Text-Meldung (z.b. "Not found") Geodatenanwendungen, Seite 48

49 Kommunikation mit AJAX Die Kommunikation mit dem Server über AJAX ist einfach umzusetzen Die Schwierigkeit liegt eher in Browserspezfika; bestimmte Methoden und Verhaltensweisen sind von den Browsern unterschiedlich implementiert Achten Sie auf die Trennung von Layout und Inhalt; das erleichtert die Entwicklungs- und Wartungsarbeit Die Interaktion mit der Seite durch Benutzerin/Benutzer stellt nicht selten relativ hohe Anforderungen an die Synchronisation der Ereignisse (Umfangreiche) Tests sind unvermeidlich: Code a litte Test a little Geodatenanwendungen, Seite 49

50 Same Origin Policy bedeutet, Skriptsprache im Browser erlaubt nur den Zugriff auf den eigenen Server Ist wichtiges Sicherheitskonzept für Client-/Browserseitige Skriptsprachen Beispiele sind Das Zurücksenden von Cookies nur an den ursprünglichen Server Die Verbindung einer HTTP-Request aus JavaScript zu dem Server, von dem auch das JavaScript bezogen wurde Dennoch besteht das Interesse, unterschiedliche Server anzufragen Namensdienste (von Google oder OpenStreetMap) sind Beispiele dafür Ein Ansatz ist, über einen Proxy die Anfrage zu gewährleisten JSON (JavaScript Object Notation) ist eine weitere Möglichkeit Eine andere Möglichkeit ist, den Zugriff über HTTP doch kontrolliert zu erlauben Geodatenanwendungen, Seite 50

51 Anfrage über einen Proxy Server XMLHttpRequest (XHR) an einen fremdem Server ist nicht erlaubt: Client Skript XHR Response XHR nicht erlaubt! Eigener Server arbeitet als proxy und erfüllt die Anfrage Client Skript XHR Response Request Response Geodatenanwendungen, Seite 51

52 Access-Control-Allow-Origin Mit einem GET oder POST HTTP Request wird ein HTTP Header gesendet: Der Origin Header enthält Information über den ursprünglichen Server von dem das Script stammt: das Protokoll, die Domäne und den Port Der Server kann damit entscheiden, ob die Anfrage beantwortet wird oder nicht; Beispiel: Origin: Wenn der Server die Anfrage erlaubt, dann sendet er einen entsprechenden Header zurück: Access-Control-Allow-Origin: oder * Fehlt der Header oder er stimmt nicht überein, dann wird der Request vom Skript im Browser nicht ausgeführt; im anderen Fall wird der Request ausgeführt. Weder der Request noch der Response enthalten Cookie Informationen! Geodatenanwendungen, Seite 52

53 Cross Origin Resource Sharing (CORS) Anfrage generiert HTTP Request Server Response Merkmal wird von HTTP Request Objekt ausgewertet Aus Sicherheitsgründen ist der Zugriff nur auf die ursprüngliche Domäne erlaubt: same origin-policy Ein Ansatz für diese Mashups: Server übernimmt die Anfragen (cross domain proxy) Die Google API und Nominatim senden das Merkmal Access-Control-Allow-Origin: * Geodatenanwendungen, Seite 53

54 Zugriff auf Dokumentstruktur via DOM Die Dokumentstruktur kann aus JavaScript heraus mit den folgenden Methoden manipuliert werden Das document-objekt bietet die Methoden getelementbyid() direkter Zugriff über die ID des Elements getelementsbytagname() liefert Array mit Objekten des entsprechenden Tags an, um auf Elemente zuzugreifen. Ein Element kann auch über das Array childnodes angesprochen werden. Dabei wird das i-te Kind eines Knotens x mit x.childnodes[i] referenziert. Die Eigenschaft firstchild und lastchild repräsentieren das erste und letzte Kind. Das "Durchhangeln" durch den DOM-Baum mit diesem Array ist sehr umständlich. Eine Kombination mit den Methode getelementbyid() wird daher oft verwendet. Den Inhalt eines Knotens liefert die Eigenschaft "nodevalue". Geodatenanwendungen, Seite 54

55 Beispiel So kann auf den Text "Test" im Beispiel innerhalb von JavaScript etwa durch var x1 = document.getelementbyid("a2"); var y1 = x1.childnodes[1].childnodes[0]; alert(y1.nodevalue); zugegriffen werden. Eine Veränderung wird im o. a. Beispiel dann durch folgende Zuweisung realisiert: y1.nodevalue = "Versuch"; Geodatenanwendungen, Seite 55

56 <html><head> <title>dom-test</title> </head> <body id="bd"> <div id="a1"> <div id="a2">dies ist ein <i>test</i>...</div> </div> <div id="b1"></div> <script language="javascript"> var x1 = document.getelementbyid("a2"); var y1 = x1.childnodes[1].childnodes[0]; alert("vorher: "+y1.nodevalue); y1.nodevalue = "Versuch"; alert("nachher: "+y1.nodevalue); </script> </body></html> Geodatenanwendungen, Seite 56

57 document <html> <head> <body> <title> a1 b1 DOM Test a2 Dies ist ein <i> Versuch Geodatenanwendungen, Seite 57

58 Elemente hinzufügen und löschen Im letzten Beispiel wurde die Struktur des DOM-Baumes nicht verändert. Das nächste Beispiel zeigt, wie durch die Methoden "createtextnode()" und "appendchild()" Elemente hinzugefügt werden können, so dass folgender Baum entsteht: Geodatenanwendungen, Seite 58

59 <html><head><title>dom-test</title></head> <body id="bd"> <div id="a1"> <div id="a2">dies ist ein <i>versuch</i>... </div> </div> <div id="b1"> </div> <script language="javascript"> var x2 = document.getelementbyid("b1"); var y2 = document.createtextnode("abc"); x2.appendchild(y2); var x3 = document.getelementbyid("b1"); var y3 = document.createelement("b"); var z3 = document.createtextnode("xyz"); if (confirm("anhaengen?")) { y3.appendchild(z3); x3.appendchild(y3); } </script> </body></html> Geodatenanwendungen, Seite 59

60 Attribute hinzufügen Attribute eines Knotens können mit der Methode "setattribute()" gesetzt oder mit getattribute()" erfragt werden. Im Folgenden wird ein IMG-Knoten in den Baum gehängt und das SRC- Attribut mit der Quelle für das Bild gesetzt. a1 a2 <body> abc b1 <b> <img> Dadurch entsteht der folgende DOM-Baum: Dies ist ein <i> Versuch xyz Geodatenanwendungen, Seite 60

61 <html><head><title>dom-test</title></head><body id="bd"> <div id="a1"><div id="a2">dies ist ein <i>versuch</i>...</div> </div> <div id="b1"></div> <script language="javascript"> var x2 = document.getelementbyid("b1"); var y2 = document.createtextnode("abc"); x2.appendchild(y2); var x3 = document.getelementbyid("b1"); var y3 = document.createelement("b"); var z3 = document.createtextnode("xyz"); y3.appendchild(z3); x3.appendchild(y3); var x4 = document.getelementbyid("b1"); var y4 = document.createelement("img"); y4.setattribute("src", " if (confirm("anhaengen?")) { x4.appendchild(y4);} </script></body></html> Geodatenanwendungen, Seite 61

62 removechild() Das Entfernen von Knoten aus dem DOM-Baum wird mit der Methode "removechild()" veranlasst. Im Beispiel wird der ganze Ast ab dem Knoten "b1" gelöscht. Dadurch entsteht folgender DOM-Baum: <body> a1 a2 Dies ist ein <i> Versuch Geodatenanwendungen, Seite 62

63 <html><head><title>dom-test</title></head><body id="bd"> <div id="a1"> <div id="a2"> Dies ist ein <i>versuch</i>...</div></div> <div id="b1"> </div> <script language="javascript"> var x2 = document.getelementbyid("b1"); var y2 = document.createtextnode("abc");x2.appendchild(y2); var x3 = document.getelementbyid("b1"); var y3 = document.createelement("b"); var z3 = document.createtextnode("xyz"); y3.appendchild(z3);x3.appendchild(y3); var x4 = document.getelementbyid("b1"); var y4 = document.createelement("img"); y4.setattribute("src", " x4.appendchild(y4); var x5 = document.getelementbyid("b1"); var y5 = document.getelementbyid("bd"); /* body */ if (confirm("abhaengen?")) {y5.removechild(x5);} </script></body></html> Geodatenanwendungen, Seite 63

64 Weitere Eigenschaften und Methoden attributes liefert die Attribute zum aktuellen Knoten parentnode liefert den Vorgängerknoten previoussibling liefert Vorgängerknoten auf gleicher Ebene (jüngerer Geschwisterknoten) nextsibling liefert Nachfolgerknoten auf gleicher Ebene (älterer Geschwisterknoten) appendchild() fügt einen Teilbaums an einen Knoten (am Ende des Arrays childnodes) ein insertbefore() zum Einfügen eines Knotens (innerhalb des Arrays childnodes) clonenode() zum Kopieren von Knoten (und Teilbäumen, wenn der 1. Parameter zu true auswertbar ist). Eine Liste aller Methoden und Eigenschaften sind unter zu finden Geodatenanwendungen, Seite 64

65 Weitere Eigenschaften tagname liefert den Namen eines Tags nodevalue liefert Text(Inhalt), Attributwert oder null nodetype liefert eine der folgenden Nummern Nummer Knotentyp 1 Elementknoten 2 Attributknoten 3 Textknoten 4 Knoten für CDATA-Bereich 5 Knoten für Entity-Referenz 6 Knoten für Entity 7 Knoten für Verarbeitungsanweisung 8 Knoten für Kommentar 9 Dokument-Knoten 10 Dokumenttyp-Knoten 11 Dokumentfragment-Knoten 12 Knoten für Notation Geodatenanwendungen, Seite 65

66 Same Origin Policy bedeutet, Skriptsprache im Browser erlaubt nur den Zugriff auf den eigenen Server Ist wichtiges Sicherheitskonzept für Client-/Browserseitige Skriptsprachen Beispiele sind Das Zurücksenden von Cookies nur an den ursprünglichen Server Die Verbindung einer HTTP-Request aus JavaScript zu dem Server, von dem auch das JavaScript bezogen wurde Dennoch besteht das Interesse, unterschiedliche Server anzufragen Namensdienste (von Google oder OpenStreetMap) sind Beispiele dafür Ein Ansatz ist, über einen Proxy die Anfrage zu gewährleisten JSON (JavaScript Object Notation) ist eine weitere Möglichkeit Eine andere Möglichkeit ist, den Zugriff über HTTP doch kontrolliert zu erlauben Geodatenanwendungen, Seite 66

67 Anfrage über einen Proxy Server XMLHttpRequest (XHR) an einen fremdem Server ist nicht erlaubt: Client Skript XHR Response XHR nicht erlaubt! Eigener Server arbeitet als proxy und erfüllt die Anfrage Client Skript XHR Response Request Response Geodatenanwendungen, Seite 67