xml basierte visualisierung von geodaten mittels svg n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
XML-basierte Visualisierung von Geodaten mittels SVG PowerPoint Presentation
Download Presentation
XML-basierte Visualisierung von Geodaten mittels SVG

Loading in 2 Seconds...

play fullscreen
1 / 47

XML-basierte Visualisierung von Geodaten mittels SVG - PowerPoint PPT Presentation


  • 143 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'XML-basierte Visualisierung von Geodaten mittels SVG' - hani


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
gliederung
Gliederung
  • Einleitung: Entwicklung, Übersicht
  • einige Grundlagen
  • Beispiele
  • Dokumentstruktur, Aufbau einer einfachen SVG-basierten Karte
  • Zusammenfassung
entwicklung

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
grunds tze von xml
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
die basis elemente

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
aufbau eines xml dokuments

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>

document object model dom

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

document object model dom1
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.

xml namensr ume
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

slide12
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.
beispiele offline
Beispiele (offline)
  • Landesvermessungsamt Baden-Württemberg:Thematische Kartenfachdaten
  • Tuerlersee
landesvermessungsamt baden w rttemberg thematische kartenfachdaten tkfd
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.
tuerlersee
Tuerlersee

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

schummerung
Schummerung

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

tuerlersee h henprofil
Tuerlersee: Höhenprofil

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

svg dokumentaufbau
SVG-Dokumentaufbau
  • Koordinatensystem, Canvas, Viewport
  • Wurzelelement, Grundstruktur
  • Aufbau eines Beispiels aus Geometrieelemente
  • Effekte
erstellung eines svg dokuments
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>

geometrische grundelemente
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...
rechteck als kartenrahmen
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

linie
Linie

<line x1="10" y1="120" x2="50" y2="80"/>

Koordinaten Anfangspunkt

Koordinaten Endspunkt

unser beispiel
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>

kreise
Kreise

<circle cx="30" cy="30" r="3"/>

Koordinaten Mittelpunkt

Radius

unser beispiel1
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>

pfade
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
unser beispiel2
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"/>

slide30
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

text weitere m glickeiten
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
unser beispiel3
Unser Beispiel...

...

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

definitionen das defs element
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>

das use element
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" />

!

transformationen
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).
unser beispiel4
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>

hyperlinks
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

filter
Filter

Quelle: w3.org

unser beispiel5
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'„ />

verlauf gradienten
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.
unser beispiel6
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>

animation
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>

zusammenfassung1
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
relevanz von xml im gi bereich
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)
r sum e svg
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
slide47
SVG

<message>Viel Spaß!</message>