Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Marcus Fuchs Geändert vor über 9 Jahren
1
XML-basierte Visualisierung von Geodaten mittels SVG
Prof. Dr.-Ing. Franz-Josef Behr Prof. Franz-Josef Behr
2
Gliederung Einleitung: Entwicklung, Übersicht einige Grundlagen
Beispiele Dokumentstruktur, Aufbau einer einfachen SVG-basierten Karte Zusammenfassung Prof. Franz-Josef Behr
3
Entwicklung SGML GML HTML XML XSL XHTML SVG World Wide Web Internet
1970 1986 1992 1998 SGML GML 2000 Internet World Wide Web HTML XML XSL XHTML SVG Sprachfamilie Sprache IBM: Charles Goldfarb Edward Mosher Raymond Lorie Quelle: unbekannt Prof. Franz-Josef Behr
4
World Wide Web Consortium
Prof. Franz-Josef Behr
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 Prof. Franz-Josef Behr
6
Die Basis: Elemente <person wohnort="Karlsruhe">Franz-Josef Behr</person> Start-Tag mit Attribut End-Tag Elementinhalt Elementname Attributname Attributwert <person>Franz-Josef Behr</person> Start-Tag End-Tag Elementinhalt Elementname, frei wählbar Prof. Franz-Josef Behr
7
Aufbau eines XML-Dokuments
XML-Deklaration <?xml version="1.0" encoding="ISO " standalone="yes"?> <!DOCTYPE punktliste [ <!ELEMENT punktliste (datum,punkt)> <!ELEMENT datum(#PCDATA)> <!ELEMENT punkt (x,y)> <!ELEMENT x (#PCDATA)> <!ELEMENT y (#PCDATA)> ]> <punktliste> <datum> </datum> <punkt id='1000'> <x> </x> <y> </y> </punkt> <punkt id='1001'> <x> </x> <y> </y> </punktliste> Dokumententyp-Deklaration Wurzelelement / Dokument- inhalt Kind- elemente Prof. Franz-Josef Behr
8
Document Object Model (DOM)
Knotentypen: Document DocumentFragment DocumentType EntityReference Element Attr ProcessingInstruction Comment Text CDATASection Entity Notation punktliste DTD datum punkt punkt x y x y id id Prof. Franz-Josef Behr
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. Prof. Franz-Josef Behr
10
XML-Namensräume Eindeutige Benennung von Elementnamen
Namensräumen, durch URI-Verweise identifiziert <TKFD xmlns:tkfd=" xmlns:gml=" xmlns:xsi=" xsi:schemaLocation=" <tkfd:Bahnhof> <tkfd:oar tkfd:id="EZ00VPK">9201</tkfd:oar> <gml:centerOf> <gml:Point> <gml:pos> </gml:pos> </gml:Point> </gml:centerOf> </tkfd:Bahnhof> GML Prof. Franz-Josef Behr
11
GML-Visualisierung mittels Scalable Vector Graphics (SVG)
XSL GML SVG XSLT-Prozessor Prof. Franz-Josef Behr
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. Prof. Franz-Josef Behr
13
Beispiele (offline) Landesvermessungsamt Baden-Württemberg: Thematische Kartenfachdaten Tuerlersee Prof. Franz-Josef Behr
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. Prof. Franz-Josef Behr
15
Landesvermessungsamt Baden-Württemberg: Thematische Kartenfachdaten in SVG
Prof. Franz-Josef Behr
16
Tuerlersee http://www.carto.net/papers/svg/tuerlersee/
Prof. Franz-Josef Behr
17
Schummerung http://www.carto.net/papers/svg/tuerlersee/
Prof. Franz-Josef Behr
18
Tuerlersee: Höhenprofil
Prof. Franz-Josef Behr
19
SVG-Dokumentaufbau Koordinatensystem, Canvas, Viewport
Wurzelelement, Grundstruktur Aufbau eines Beispiels aus Geometrieelemente Effekte Prof. Franz-Josef Behr
20
Koordinatensystem, Canvas und Viewport
+x View- port +y Prof. Franz-Josef Behr
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" <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> Prof. Franz-Josef Behr
22
Geometrische Grundelemente
Rechteck <rect ... Kreis: <circle ... Ellipse: <ellipse cx="200" cy="135" rx="50" ry="20" /> Linie: <line ... Polyline : <polyline points="160, , , ,220" /> Polygon: <polygon points="350,75 379, , , , , ,301" /> Path: <path... Text <text... Prof. Franz-Josef Behr
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 Farbe Umrandung Linienbreite Umrandung Prof. Franz-Josef Behr
24
Linie <line x1="10" y1="120" x2="50" y2="80"/>
Koordinaten Anfangspunkt Koordinaten Endspunkt Prof. Franz-Josef Behr
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> Prof. Franz-Josef Behr
26
Koordinaten Mittelpunkt
Kreise <circle cx="30" cy="30" r="3"/> Koordinaten Mittelpunkt Radius Prof. Franz-Josef Behr
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> Prof. Franz-Josef Behr
28
Pfade <path d="M 120,130L 130,120L 130, , , , ,125 z"/> 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 Prof. Franz-Josef Behr
29
Unser Beispiel... Vielleicht ein See ... Farbe folgt später!
<path d="M 120,130L 130,120L 130, , , , ,125 z"/> Prof. Franz-Josef Behr
30
Text <text x="15" y="135">AbcDef</text>
End-Tag Start-Tag <text x="15" y="135">AbcDef</text> Position Textinhalt <text ... style="font-family:Arial;font-size:6>...</text> Schriftart Größe Prof. Franz-Josef Behr
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=" " dx=" "> Wort! </tspan> </text> Text längs Linie Prof. Franz-Josef Behr
32
Unser Beispiel... ... <text x="15" y="135" style="font-family:Arial;font-size:6">SVG Map</text> ... Prof. Franz-Josef Behr
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> Prof. Franz-Josef Behr
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" /> ! Prof. Franz-Josef Behr
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). Prof. Franz-Josef Behr
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> Prof. Franz-Josef Behr
37
Hyperlinks Anchor-Tag, vergleichbar HTML,
Jedoch: href entstammt hier dem xlink-Namensraum. <a xlink:href=" </a> URL ‘a‘-Element Namensraum xlink href-Attribut Prof. Franz-Josef Behr
38
Filter Quelle: w3.org Prof. Franz-Josef Behr
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'„ /> Prof. Franz-Josef Behr
40
Verlauf (Gradienten) gleichmässige Abstufung von einer Quell- hin zu einer Zielfarbe. Unterscheidung lineare Verläufe radiale Verläufe jeweils durch Form und Richtung des Verlaufsmusters charakterisiert. Prof. Franz-Josef Behr
41
Unser Beispiel... Im ‚defs‘-Abschnitt Um den "See" herum:
<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 L L z"/> </g> Prof. Franz-Josef Behr
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 " /> <g id="AnimationPaths"> <use xlink:href="#car"> <animateMotion id="animMotionCar" dur="10s;" repeatCount="indefinite" rotate="auto-reverse"> <mpath xlink:href="#carpath"/> </animateMotion> </use> </g> Prof. Franz-Josef Behr
43
Zusammenfassung Prof. Franz-Josef Behr
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 Prof. Franz-Josef Behr
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) … Prof. Franz-Josef Behr
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 Prof. Franz-Josef Behr
47
GI-Systeme und SVG Direkte Unterstützung: SVG-Erzeugung über Add-ons:
MicroImages TNTmips, SVG-Erzeugung über Add-ons: ArcView (Shape2SVG, ...) MapInfo (Map2SVG, SVGMapMaker, ...) Manifold (Master Thesis P&GI) FME, Prof. Franz-Josef Behr
48
Links Die SVG-Website für Kartographie / GIS: http://www.carto.net/
SVG-Tutorials: Der Spezialist für SVG / PDF, PostScript: Linkslisten: für “Verspielte” unter den Zuhörern: Prof. Franz-Josef Behr
49
<message>Viel Spaß!</message>
SVG <message>Viel Spaß!</message> Prof. Franz-Josef Behr
50
Bereitstellung von SVG-Dokumenten im Internet
Client "User Agent" Webserver Document root SVG Dokumente http http Internet Adobe SVG Viewer CGI-Protokoll CGI-Programme Ggf. dynam. Generierung von SVG-Dokumenten Prof. Franz-Josef Behr
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.