• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Womit lässt sich folgende Idee umsetzten? (zoombare Karte mit vielen Punkten)

F

FatalError

New member
Hallo!

Ich komme eigentlich aus dem Bereich Mikrocontroller-Programmierung und Simulation (alles von C++ über AVRs bis zu MATLAB/Simulink).

Da ich vom Erstellen von Internetseiten, Datenbanken noch keine große Ahnung habe, habe ich mir als Neuling in Sachen Webprogrammierung mal in den Kopf gesetzt, folgendes Spassprojekt umzusetzten:

Ich will eine rein zweidimensionale "Landkarte" von Europa zeichnen, ebenso wie in Google maps. Dabei soll diese Karte allerdings ausschließlich aus Graden Linien (sagen wir, Strassen) und Punkten unterschiedlicher Dicke (Städten) bestehen, welche durch die Straßen verbunden werden. In dieser Karte soll es möglich sein, zu Zoomen (mit dem Mausrad), sowie die Karte per Maus nach links/rechts/oben/unten zu ziehen (eben wie auch in Google Maps). Beim Zoomen sollen die Punkte und Linien entsprechend der Zoomstufe dicker/dünner gemacht werden, so dass die Übersichtlichkeit gewahrt bleibt. Das ist auch schon alles; weitere Animationen wären zwar nett, sind aber nicht nötig.

Insgesamt habe ich jetzt eine Anzahl von 10.000 Punkten (d.h. zehntausend Koordinaten von Städten), welche alle in der niedrigsten Zoomstufe (ganz herausgezoomt) gleichzeitig dargestellt werden sollen. Auch in diesem Zustand muss es noch möglich sein, die Karte per Maus zu verschieben, und, ganz wichtig:

die Karte sollte dabei noch 'flüssig' laufen!

Nun meine Frage: Wie setzte ich das am besten um? Ist das überhaupt mit heutiger Technologie und mit meinem Kenntnisstand machbar? Habe bis jetzt in der NetBenas IDE 7.3 ein wenig mit HTML5, JavaScript, SVG, XML und jQuery rumgespielt, und dachte mir, am besten wäre eine simple HTML5-Seite und zeichnen der Objekte mit JavaScript. Ist das überhaupt machbar, und wenn ja, welche Skriptsprache sollte ich dafür lernen?

Ich hoffe ihr könnt mir weiterhelfen!

Schöne Grüße,
FatalError
 
Zuletzt bearbeitet:
Das klingt eher nach SVG, du kannst mit JS nur sehr begrenzt zeichnen und bei der Anzahl der Objekte dürfte die Performance komplett einbrechen. Um SVG zu animieren brauchst aber auch JS.
 
Ok, dann müsste ich das mit SVG machen. Was mir wirklich Sorgen macht, ist aber grade die flüssige Darstellung dieser enormen Punktemenge. Wie du schreibst, ist das heutzutage wohl einfach noch nicht möglich. Gibt es dennn heute wirklich keine möglichkeit, so etwas browserbasiert umzusetzten? Gäbe es denn irgendeine Möglichkeit, vielleicht einen Umweg über ein jpg zu gehen das Serverseitig generiert wird und sich zoomen lässt?
 
Ich hab geschrieben, dass es mit JS nicht einfach ist, damit meinte ich über das normale DOM. Mit SVG ist deutlich mehr möglich. Aber wenn es nur um gerade - also horizontale und vertikale - Linien geht, ist auch das (also über das DOM) möglich.

Aber inwiefern erhoffst du dir mit einem Bild eine Performance Verbesserung? Du willst doch etwas animieren, dann müßtest du Millionen von Bildern vorhalten um jede Zoomstufe darstellen zu können.
 
ein schlauer schrieb:
Was soll damit sein?
Zum Vergrößern anklicken....

Weil du geschrieben hattest:
Aber wenn es nur um gerade - also horizontale und vertikale - Linien geht, ist auch das (also über das DOM) möglich.
Zum Vergrößern anklicken....

DOM ist (noch) ziemlich Bahnhof für mich, aber müssten dann diagonale Linien nicht funktionieren? Versteh mich bitte nicht falsch, ich will nicht kleinlich sein, ich weiß ja selbst nicht mal genau, ob das jetzt mit diagonalen Linien doch funktioniert :)
 
FatalError schrieb:
Insgesamt habe ich jetzt eine Anzahl von 10.000 Punkten [...] die Karte sollte dabei noch 'flüssig' laufen!
Zum Vergrößern anklicken....

Kann mir schwer vorstellen, dass so etwas mit einfachem HTML/JavaScript/etc. geht...
Frag mal das Google Maps-Team, ob sie dir Ihre Technologie verkaufen ;)
 
Ich wollte damit nicht ausdrücken, dass es nicht geht, sondern dass du gerade Linien evtl. auch viele Millionemal per DOM "zeichnen" kannst.
 
ein schlauer schrieb:
Nein, er wollte - zumindest klingt für mich sein Beschreibung so - eine Vektorisierte Karte, google Maps ist eine Bitmap.
Zum Vergrößern anklicken....

war auch nur ein scherz ;) aber mit Inksape müsste er doch eine SVG erstellen können und in firefox und mittlerweile sogar IE kann man die ja problemlos beliebig zoomen. und das mit dem verschieben müsste man mit javascript schon irgendwie hinkriegen.
 
Also, falls du das ganze NICHT bildbasiert machen willst, würde ich empfehlen:
Du speicherst alle Punkte und Linien per MySQL-Datenbank, die problemlos riesige Datenmengen verwalten kann,
und schickst dann serverseitig eine Anfrage an die Datenabnk, dass es dir die Punkte liefert, die auch angezeigt werden.
Daraus kannst du mit der eingebauten PHP-Methode zur Erstellung von Bildern serverseitig das Bild erstellen, wobei du beachten musst, dass das Bild clientseitig die PHP-Codedatei IST. Die lädst du also per JS, zum Beispiel is einem zu großen Ausschnitt, zum Beispiel in ein Canvas, wo du die Bewegung/Skalierung reinproggst.
Wird die Karte bewegt, lass immer gleich das Bild für die nächste Verschiebung in alle Richtungen und Zoomstufen laden. Damit kannst du sogar flüssige Animationen machen.

Hoffe, ich konnte dir helfen ;)
 
Hi!

Erstmal ein riesiges DANKE! an alle die sich hier bemüht haben mir meine Anfangsfrage zu beantworten! Nun bin ich mit dem Projekt schon einwenig weiter, habe in meinem unermesslichen Spieltrieb so einiges getestet und kann sagen:
Es funktioniert!
Ich zeichne mehrere zehntausend Punkte und Rechtecke plus zig Linien (auch diagonale;-)) per Javascript, das sind alles SVG-Elemente und lassen sich dementsprechend sehr angenehm interagieren. Das einfache Verschieben der Karte per Mausklick (dragging) ist problemlos möglich, ab 20.000 Objekten wirds bei meiner alten Kiste etwas ruckelig aber immer noch super bedienbar. Gefühlsmäßig sage ich mal, sowas wie Google Maps (vektorkarte einer Stadt) ist von der Geschwindigkeit her völlig problemlos machbar. Jetzt bin ich dabei das Interface an meine Vorstellungen anzuentwickeln; teste z.Zt. mit "per Hand" erstellten Punkten (wobei das erstellen per hand bei der Punktmenge 'etwas' mühsem ist). Die ganze Chose mit Dahinterliegender Datenbank, mySQL, serverseitiger Programmierung in PHP kommt dann später sobald 1) das Interface zu 100% tut was es soll und 2) der prototyp der grafischen Benutzeroberfläche das hält was ich von ihm erwarte.

DavidP, um noch auf deinen Punkt einzugehen; auf die serverseitige Darstellung verzichte ich, da die Interaktion der Users mit den Punkten in meinem Falle essentielll ist. Dafür scheinen mir SVG-Objekte wie gemacht!

Danke euch allen für die Gedanken und Ausführungen!

Grüße,
FatalError
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben