1 / 47

XML-basierte Visualisierung von Geodaten mittels SVG

XML-basierte Visualisierung von Geodaten mittels SVG. Prof. Dr.-Ing. Franz-Josef Behr. Gliederung. Einleitung: Entwicklung, Übersicht einige Grundlagen Beispiele Dokumentstruktur, Aufbau einer einfachen SVG-basierten Karte Zusammenfassung. Sprachfamilie. Sprache. XSL. XHTML. SVG. 2000.

hani
Download Presentation

XML-basierte Visualisierung von Geodaten mittels SVG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XML-basierte Visualisierung von Geodaten mittels SVG Prof. Dr.-Ing. Franz-Josef Behr

  2. Gliederung • Einleitung: Entwicklung, Übersicht • einige Grundlagen • Beispiele • Dokumentstruktur, Aufbau einer einfachen SVG-basierten Karte • Zusammenfassung

  3. Sprachfamilie Sprache XSL XHTML SVG 2000 XML 1998 HTML World Wide Web 1992 1986 SGML IBM: Charles Goldfarb Edward Mosher Raymond Lorie 1970 GML Internet Quelle: unbekannt Entwicklung

  4. World Wide Web Consortium http://w3.org

  5. Grundsätze von XML • eXtensible Markup Language • Dient der Definition von Sprachen (Grammatik und Vokabular) -> Auszeichnungselemente selbst schaffen • Sätze von Auszeichnungen wiederverwendbar • Strenge Syntaxregeln • Trennung der Präsentation vom Inhalt-> GML / SVG

  6. Elementname, frei wählbar <person>Franz-Josef Behr</person> Elementname Attributname Attributwert Start-Tag Elementinhalt End-Tag <person wohnort="Karlsruhe">Franz-Josef Behr</person> Start-Tag mit Attribut Elementinhalt End-Tag Die Basis: Elemente

  7. XML-Deklaration Dokumententyp-Deklaration Kind- elemente Wurzelelement / Dokument-inhalt Aufbau eines XML-Dokuments <?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?> <!DOCTYPE punktliste [ <!ELEMENT punktliste (datum,punkt)> <!ELEMENT datum(#PCDATA)> <!ELEMENT punkt (x,y)> <!ELEMENT x (#PCDATA)> <!ELEMENT y (#PCDATA)> ]> <punktliste> <datum>18.03.2005</datum> <punkt id='1000'> <x>3500000.0</x> <y>5400000.0</y> </punkt> <punkt id='1001'> <x>3500001.0</x> <y>5400001.0</y> </punkt> </punktliste>

  8. punkt x y Document Object Model (DOM) Knotentypen: Document DocumentFragment DocumentType EntityReference Element Attr ProcessingInstruction Comment Text CDATASection Entity Notation punktliste DTD datum punkt x y id id

  9. Document Object Model (DOM) • Strukturierung von XML-Dokumenten • Sprach- und plattformneutrale Schnittstelle var Knoten = punktliste.getElementById(1000); ... var Kinderknoten = Knoten.getChildNodes(); In SVG: Unterstützung DOM  Grafiken können per JavaScript und anderen Programmiersprache manipuliert werden.

  10. XML-Namensräume • Eindeutige Benennung von Elementnamen • Namensräumen, durch URI-Verweise identifiziert <TKFD xmlns:tkfd="http://www.lv-bw.de/tkfd" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.lv-bw.de/tkfd"> <tkfd:Bahnhof> <tkfd:oar tkfd:id="EZ00VPK">9201</tkfd:oar> <gml:centerOf> <gml:Point> <gml:pos>3515955.37 5409276.28</gml:pos> </gml:Point> </gml:centerOf> </tkfd:Bahnhof> GML

  11. GML-Visualisierung mittels Scalable Vector Graphics (SVG) XSL SVG GML XSLT-Prozessor

  12. SVG • XML-Sprache, lesbar • Dateien oft sehr klein, da reiner Text. • Hochauflösende Grafiken möglich, die auch bei Skalierung nicht an Qualität verlieren. • Gute Qualität bei Rasterdaten (Resampling) • hohe Farbtiefe • Animationen ohne signifikanten Overhead • Unterstützung DOM (Document Object Model)  Grafiken können per JavaScript und anderen Programmiersprache manipuliert werden. • Filter und Schatten.

  13. Beispiele (offline) • Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten • Tuerlersee

  14. Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten (TKFD) • Zielsystem: Adobe Illustrator, geringfügige Änderungen / Aktualisierungen, dann Ausgabe • Mit SVG: neuer Workflow • Vorteil: wesentlich schneller • "in letzter Sekunde" Änderungen im Vektordatensatz • Keine Einschränkung wie bei der Bearbeitung von Rasterdaten.

  15. Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten in SVG

  16. Tuerlersee http://www.carto.net/papers/svg/tuerlersee/

  17. Schummerung http://www.carto.net/papers/svg/tuerlersee/

  18. Tuerlersee: Höhenprofil http://www.carto.net/papers/svg/tuerlersee/

  19. SVG-Dokumentaufbau • Koordinatensystem, Canvas, Viewport • Wurzelelement, Grundstruktur • Aufbau eines Beispiels aus Geometrieelemente • Effekte

  20. Koordinatensystem, Canvas und Viewport Canvas +x View-port +y

  21. Erstellung eines SVG-Dokuments • XML-Prolog <?xml version="1.0" standalone="no"?> • DTD einfügen <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd> <rect>, <circle>, <line>, ... Stileigenschaften Filter Verläufe Animation • SVG-Wurzelelement mit Größenangaben einfügen <svg id="map" width="600px" height="400px" viewBox="0cm 0cm 240cm 160cm" > </svg>

  22. Geometrische Grundelemente • Rechteck <rect ... • Kreis: <circle ... • Ellipse: <ellipse cx="200" cy="135" rx="50" ry="20" /> • Linie: <line ... • Polyline : <polyline points="160,200 180,230 200,210 234,220" /> • Polygon: <polygon points="350,75 379,161 569,111 397,215 423,301 350,250 277,301" /> • Path: <path... • Text <text...

  23. Rechteck als Kartenrahmen <rect x="10" y="20" width="150" height="120"/> Koordinaten linke obere Ecke Breite Höhe <rect ... fill="#eeeeff" stroke="red" stroke-width="1" /> Füllfarbe Linienbreite Umrandung Farbe Umrandung

  24. Linie <line x1="10" y1="120" x2="50" y2="80"/> Koordinaten Anfangspunkt Koordinaten Endspunkt

  25. Unser Beispiel... • Gruppe von Straßen <g id="streets" stroke="yellow" stroke-width="0.9"> <line x1="10" y1="120" x2="50" y2="80"/> <line x1="50" y1="80" x2="150" y2="80"/> <line x1="60" y1="40" x2="60" y2="80"/> <line x1="100" y1="40" x2="100" y2="80"/> <line x1="140" y1="40" x2="140" y2="80"/> <line x1="80" y1="80" x2="80" y2="130"/> <line x1="135" y1="80" x2="135" y2="130"/> <line x1="40" y1="90" x2="20" y2="70"/></g>

  26. Kreise <circle cx="30" cy="30" r="3"/> Koordinaten Mittelpunkt Radius

  27. Unser Beispiel... • Gruppe von Bäumen <g id="trees" stroke="#009900" fill="#99FF99" stroke-width="0.4"> <circle cx="30" cy="30" r="3"/> <circle cx="40" cy="30" r="3"/> <circle cx="50" cy="30" r="3"/> <circle cx="60" cy="30" r="3"/> <circle cx="70" cy="30" r="3"/> <circle cx="80" cy="30" r="3"/> </g>

  28. Pfade <path d="M 120,130L 130,120L 130,110 125,105 115,100 110,115 110,125z"/> • Parameter: • moveto(m,M) + x,y • lineto (l,L) + x,y • horizontalLineTo(h,H) + x, verticalLineTo(v,V) + y • closePath(z,Z), beendet die Darstellung des Pfades, mit m kann an einer anderen Stelle nach Unterbrechung fortgesetzt werden. • kubische Bezierkurven (c,C; s,S), übernimmt je nach Kurventyp sechs oder vier Parameter • quadratische Bezierkurven (q,Q; t,T) übernimmt je nach Kurventyp vier oder zwei Parameter • elliptische Kurven (a,A), zeichnet eine Ausschnitt einer Ellipse, inklusive der Rotation: sieben Parameter

  29. Unser Beispiel... • Vielleicht ein See ... Farbe folgt später! <path d="M 120,130L 130,120L 130,110 125,105 115,100 110,115 110,125z"/>

  30. Text End-Tag Start-Tag <text x="15" y="135">AbcDef</text> Textinhalt Position <text ... style="font-family:Arial;font-size:6>...</text> Größe Schriftart

  31. Text: Weitere Möglickeiten • gedrehter Text:<text x="32" y="66" transform="rotate(20)">Strasse</text> • Mehrzeiliger Text und Untergrupen <text x="140" y="73">Mehrzeilig: <tspan x="140" y="98">erste Zeile</tspan> <tspan x="140" y="123">zweite Zeile</tspan> </text> • Farben: Wechselnde tspan-Elemente werden mit unterschiedlichen Farben belegt: <text class="cafl">Die Farbe <tspan class="yel">gelb</tspan>, schlecht!</text> • Zeichenabstand und -versetzung <text x="44" y="255" class="cafl"> Ein <tspan dy="-9"> hohes </tspan> <tspan rotate="10 35 50 65 80" dx="0 5 9 9 12"> Wort! </tspan> </text> • Text längs Linie

  32. Unser Beispiel... ... <text x="15" y="135" style="font-family:Arial;font-size:6">SVG Map</text>...

  33. Definitionen: das <defs>-Element • Container-Element • Darin: Definitionen von Objekten, die in der Grafik von anderen Objekten referenziert (verwendet) werden können (einzelne Elemente, Gruppen, Symbole, Farbverläufe oder Filtereffekte). • Elemente nur sichtbar, wenn sie innerhalb der Grafik von anderen Elementen referenziert werden. •  Elemente, die Referenzen darstellen, immer innerhalb des defs-Container platzieren! <defs> <rect id="house" width="5" height="5"/></defs>

  34. Das <use>-Element • Mit dem use-Element wird eine Instanz einer bereits bestehenden Vorlage erzeugt, d.h. sie können mit dem Element use andere Elemente bzw. Objekte referenzieren. • Die Attribute x und y verlegen den Standort der Instanz, dabei ist der Nullpunkt der Nullpunkt des Elements und nicht der gesamten SVG-Grafik. <use xlink:href="#house" x="105" y="50" /> !

  35. Transformationen • Allgemeine Syntax:<g transform=command (parameter)"> • scale (zum Skalieren) • rotate (zum Rotieren) • translate (zum Verschieben) • skewX | skewY (zum Neigen in x- oder y-Richtung) • matrix (zum allgemeinen Verzerren einschließlich Skalieren, Rotieren, Verschieben und Neigen).

  36. Unser Beispiel... • Reihenfolge der Transformationen beachten! <!-- bottom left road, left side --><g transform="translate(65,90)"><use xlink:href="#house" x="0" y="0„transform="scale(1.5)"/></g>

  37. Hyperlinks • Anchor-Tag, vergleichbar HTML, • Jedoch: href entstammt hier dem xlink-Namensraum. <a xlink:href="http://www.fewo-wuerzburg.de/">... </a> URL ‘a‘-Element Namensraum xlink href-Attribut

  38. Filter Quelle: w3.org

  39. Unser Beispiel... <defs><rect id="house" width="5" height="5"/><filter id="schatten"><feGaussianBlur stdDeviation="5" /></filter> <rect x="10" y="20" width="150" height="120„transform="translate(3, 3)„ style="filter:url(#schatten); fill='#999999' stroke='#999999‚stroke-width='1'„ />

  40. Verlauf (Gradienten) • gleichmässige Abstufung von einer Quell- hin zu einer Zielfarbe. • Unterscheidung • lineare Verläufe • radialeVerläufe • jeweils durch Form und Richtung des Verlaufsmusters charakterisiert.

  41. Unser Beispiel... • Im ‚defs‘-Abschnitt <radialGradient id="radial" cx="50%" cy="90%" r="60%" fx="60%" fy="80%"><stop offset="0%" style="stop-color:rgb(0,15,150);stop-opacity:1"/><stop offset="1%" style="stop-color:rgb(128,128,255);stop-opacity:1"/><stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1"/></radialGradient> • Um den "See" herum: <g id="lake" stroke="#0000FF" fill="url(#radial)" stroke-width="0.4"><path d="M 120 130L 130 120L 130 110 125 105 115 100 110 115 110 125z"/></g>

  42. Animation • Im defs-Abschnitt <symbol id="car" overflow="visible"> <rect x="-1" y="-1" width="4" height="2" style="fill: rgb(240,65,25); fill-opacity: 0.8; stroke: rgb(55,0,0); stroke-width:0.1" /> </symbol> <path id="carpath" d="M 10 120 50 80 150 80" /> <g id="AnimationPaths"> <use xlink:href="#car"> <animateMotion id="animMotionCar"dur="10s;" repeatCount="indefinite" rotate="auto-reverse"> <mpath xlink:href="#carpath"/> </animateMotion> </use> </g>

  43. Zusammenfassung

  44. Zusammenfassung • XML: Metasprache • Grundlage einer Vielzahl von Sprachen und Einsatzmöglichkeiten in allen Bereichen der IT • Von Mensch und Maschine gleichermaßen gut lesbar • International und plattformunabhängig einsetzbar

  45. Relevanz von XML im GI-Bereich • Geography Markup Language (GML) • NAS – künftiges Austauschformat der AdV • häufig zur Beschreibung von Metadaten genutzt • XML-based messaging: WMS GetCapabilities, GetFeature... • für GetMap-Ergebnisse ist SVG optionales Ausgabeformat • LandXML.org • ESRI: Arc Extensible Markup Language (ArcXML), the file format ArcIMS uses for communication between ArcIMS components • Scalable Vector Graphics (SVG) • …

  46. Résumée SVG • Integration von vektor- und rasterbasierten raumbezogenen Daten einschließlich Sachdaten, • exzellente Darstellung, • hohes Maß an Interaktivität (Zoom, Verschieben des Bildaussschnittes, …), • Kopplung zwischen verschiedenen Elementen bzw. Gruppen (Übersichtskarte / Detailkarte, Karte / Attribute), • interaktive Analyse / Abfrage der Daten

  47. SVG <message>Viel Spaß!</message>

More Related