Gummiband zwischen zwei Punkten
Vonni
- html
Hallo liebe Selfhtml-Gemeinde,
ich bin zur Zeit damit beschäftigt eine Landkarte im Netz zu präsentieren. Dabei würde ich gern die Streckenmessung zwischen zwei Punkten mit anbieten, so dass der Nutzer sieht wo er geade hingedrückt hat. Allerdings fehlt mir dazu jeglicher Ansatz. Bin über jeden Hinweis und jeder bereits mit diesem Thema gemachte Erfahrung dankbar.
MfG. Vonni
Hallo,
zunächst einmal stellt sich mir folgende Frage (die Du Dir scheinbar auch noch nicht überlegt hast): Wie soll zunächst überhaupt die Ausgabe der Landkarte erfolgen (ich nehme mal an, das soll stattfinden)? Mal abgesehen davon, dass man dazu sicher eine komplexe (und teure) Datenbank bräuchte, müsste man ja daraus irgendwie eine Ausgabe generieren (z.B. serverseitig mit einem CGI, oder clientseitig mit Java (s. Map24.de) oder vielleicht (eher unkonventionell) mit Flash oder oder oder...).
Mirko
Hallo Mirko,
ich schreibe zur Zeit an meiner Diplomarbeit und arbeite mit einer Firma zusammen, die mir einen entsprechendenden Server zur Verfügung stellt. Die Karte wird als gif oder jpg, also als Bild in die Seite geladen und die Bildkoordinaten werden in Gauß-Krüger-Koordinaten (also x,y) umgerechnet.... Bis hierhin steht die Sache!
Jetzt soll dem Nutzer die Möglichkeit gegeben werden clientseitig in der Karte die Strecken (immer 2 Punkte) abzustecken und zu messen....auch das geht bereits! Zur verbesserten Übersichtlichkeit sollen jetzt die Punkte mit einem "Gummiseil" verbunden werden. Und hier suche ich einen Ansatz!!!
Vonni
Hallo,
Jetzt soll dem Nutzer die Möglichkeit gegeben werden clientseitig in der Karte die Strecken (immer 2 Punkte) abzustecken und zu messen....auch das geht bereits! Zur verbesserten Übersichtlichkeit sollen jetzt die Punkte mit einem "Gummiseil" verbunden werden.
ich fürchte, dass dies eine (fast) unlösbare Aufgabe ist. Selbst wenn es dir gelingt mit Hilfe von http://www.walterzorn.de/jsgraphics/jsgraphics.htm eine Linie zu zeichnen wirst du spätestens beim Löschen/Neuzeichnen der Linie jeden Browser überfordern.
Grüße,
Jochen
Hallo und natürlich recht vielen Dank für eure schnelle Hilfe. Hätte nicht gedacht, dass ich gleich so viele Hinweise, wenn auch nicht immer aufbauender Art, bekomme.
Jetzt habe erst einmal wieder eine Richtung in der ich mich vortasten kann.
Habt recht herzlichen Dank.
Vonni
Hallo,
es gibt irgendeinen INPUT-Element-Typ (ich glaube type=image), bei dem beim Daraufklicken die Koordinaten submittet werden.
Du könntest also relativ "undynamisch" (also nicht so schick "zappel-zappel-interaktiv" auf der Seite) in zwei Schritten (bedeutet also "primitiverweise" zweimal Request vom Server) die 2 Punkte vom User festlegen lassen und: beim 1. Submit den 1. Punkt in die Grafik generieren (serverseitig, und dann wieder zum Client posten) und beim 2. Klick (= beim 2. Submitten durch den User) eine Grafik mit der eingezeichneten Strecke zurückschicken. Das Ganze dann in einer HTML-Seite, in die das CGI auch gleich die Distanz reinschreibt.
Anderer Ansatz: Mit JavaScript würde man sicher die Klicks auch relativ zum Bildursprung (eine Ecke des Bildes) rauskriegen und clientseitig mit 2 Layern, zumindest 2 Kreuze auf der Grafik positionieren können und das ganze ebenso mit JS ausrechnen und ausgeben (wie auch immer, bleibt Dir überlassen (am primitivsten in ein INPUT-Feld)).
Mirko
Hallo,
ich schreibe zur Zeit an meiner Diplomarbeit und arbeite mit einer Firma zusammen, die mir einen entsprechendenden Server zur Verfügung stellt. Die Karte wird als gif oder jpg, also als Bild in die Seite geladen und die Bildkoordinaten werden in Gauß-Krüger-Koordinaten (also x,y) umgerechnet.... Bis hierhin steht die Sache!
Wurde mal die Verwendung von SVG angedacht? Gerade im Bereich Kartografie wird dieses Vektorformat favorisiert, siehe http://www.carto.net/.
MfG, Thomas
Hi Thomas,
Wurde mal die Verwendung von SVG angedacht? Gerade im Bereich Kartografie wird dieses Vektorformat favorisiert, siehe http://www.carto.net/.
kannst Du mir sagen, wo ich eine gute (!) Deutschlandkarte mit Bundesland- und Landkreisgrenzen im SVG-Format bekomme (respektive die Vektordaten dafuer), die frei benutzt werden darf? Bisher habe ich nur Karten mit den Grenzen der Bundesländer, nicht aber mit den Grenzen der Landkreise gefunden.
Danke Dir schonmal.
Ciao,
Harry
Hallo,
kannst Du mir sagen, wo ich eine gute (!) Deutschlandkarte mit Bundesland- und Landkreisgrenzen im SVG-Format bekomme (respektive die Vektordaten dafuer), die frei benutzt werden darf?
Dazu ist mir keine (freie) Quelle bekannt. Das wuerde mich selbst interessieren.
Bisher habe ich nur Karten mit den Grenzen der Bundesländer, nicht aber mit den Grenzen der Landkreise gefunden.
Aktuell zeigt das Statistische Bundesamt einen "Atlas zur Regionalstatistik" unter: http://www.destatis.de/onlineatlas/ oder direkt: http://www.destatis.de/atlas/atlas.svg. Dort sind auch Kreisgrenzen enthalten.
Als Kartengrundlage wird auf das Bundesamt für Kartographie und Geodäsie verwiesen.
MfG, Thomas
Hi,
Allerdings fehlt mir dazu jeglicher Ansatz. Bin über jeden Hinweis und jeder bereits mit diesem Thema gemachte Erfahrung dankbar.
Ein "Gummiband" wirst Du weder mit HTML, noch mit JavaScript hinbekommen (was man zusammen gemeinhin als DHTML bezeichnen würde). Das wäre etwas für z.B. ein Java-Applet.
Was die Entfernungsmessung angeht: Mit dem Satz des Pythagoras + Maßstab der Karte läßt sich die Entfernung leicht auch in JavaScript berechnen. Mittels JS sind auch die Mauskoordinaten zu ermitteln, bzw. werden die Koordinaten bereits via reinem HTML übermittelt, wenn eine ImageMap Verwendung findet. Eine Suche im </archiv/> bringt definitiv weitere Hilfe ...
Gruß, Cybaer
Hallo Cybear, hallo Vonni,
Ein "Gummiband" wirst Du weder mit HTML, noch mit JavaScript hinbekommen (was man zusammen gemeinhin als DHTML bezeichnen würde). Das wäre etwas für z.B. ein Java-Applet.
Was die Entfernungsmessung angeht: Mit dem Satz des Pythagoras + Maßstab der Karte läßt sich die Entfernung leicht auch in JavaScript berechnen. Mittels JS sind auch die Mauskoordinaten zu ermitteln, bzw.
Das gilt natürlich auch alles für Flash und Actionscript welches ich hier zur darstellung des Gumibandes (Vektor!) und zur Berechnung der Strecke verwenden würde.
Gruß Gernot
Hi,
ich bin zur Zeit damit beschäftigt eine Landkarte im Netz zu präsentieren. Dabei würde ich gern die Streckenmessung zwischen zwei Punkten mit anbieten, so dass der Nutzer sieht wo er geade hingedrückt hat. Allerdings fehlt mir dazu jeglicher Ansatz. Bin über jeden Hinweis und jeder bereits mit diesem Thema gemachte Erfahrung dankbar.
Eine beliebige Linie zu zeichnen ist aufwendig (ja, mit e!), siehe den bereits geposteten Link.
Wenn Du aber damit leben könntest, daß ein Rechteck erscheint mit den beiden Punkten als gegenüberliegenden Ecken, dann würde ein einziges transparentes div mit einer border reichen. Und da könnte man sogar noch z.B. nur die untere und die rechte Border anzeigen.
cu,
Andreas
Hi,
ich bin zur Zeit damit beschäftigt eine Landkarte im Netz zu präsentieren. Dabei würde ich gern die Streckenmessung zwischen zwei Punkten mit anbieten, so dass der Nutzer sieht wo er geade hingedrückt hat. Allerdings fehlt mir dazu jeglicher Ansatz. Bin über jeden Hinweis und jeder bereits mit diesem Thema gemachte Erfahrung dankbar.
Noch eine Idee:
Du brauchst zwei Bilder (nicht zu klein, jeweils quadratisch, transparent bis auf eine der Diagonalen).
Je nach Lage der beiden Punkte muß halt das BIld mit der - oder mit der /-Diagonale benutzt werden.
Das Bild so positionieren, das seine linke obere Ecke auf die linke obere Ecke des durch die Koordinaten bestimmten Rechtecks fällt und dann mit width und height auf die passende Größe ziehen (so daß die rechte untere Ecke paßt).
Dann wird das Bild halt vom Browser verzerrt, die Linie wird nicht allzu sauber aussehen.
cu,
Andreas
Hallo Vonni,
Fuer so etwas ist zB SVG (scaleable vector graphics) geeignet. Basiert auf XML, Informationen finden sich zB auf der W3C website.
Gruss,
Melanie
Moin,
falls es was hilft hier die Berechnung für Luftlinienentfernungen mit Gauß-Krüger-Koordinaten in Javascript:
var luftlinienentfernung = Math.sqrt((hw1-hw2)*(hw1-hw2) + (rw1-rw2)*(rw1-rw2))
hw1 = Hochwert1
rw1= Rechtswert1
cu mipu