Dynamische Map load

grillfleisch

grillfleisch

Erfahrenes Mitglied
Hallo,

Ich habe mal wieder eine Hobbyidee und weiß nicht wie man weiterkommt bzw. wie man ansetzt um weiterzukommen.

Ich habe eine Map erstellt. Die Daten sind in einem zweidimensionalem Array in einer Datei auf dem Server gespeichert und werden über eine Klasse ausgelesen. -> mehr sehen will

Wären die Daten in einer Datenbank besser aufgehoben?

Über ein einfaches GET kann man sich auch schon ein wenig auf der Map bewegen.

Ich würde die Map jedoch gerne per Maus hin und her bewegen können.

Ich weiß, dass man heirbei Daten nachladen bzw. parallel nachladen muss. Am besten man lädt mehr als man sieht und fadet dann einfach dahin.

Suche den ganzen Tag schon im Internet und finde entweder nur tote Links oder nicht das was ich benötige.

Vielleicht kann mir einer von euch ein paar Tips geben und mir somit den Zahn ziehen :D

habe bei Tutorials.de nur das gefunden:
Ich würde hier einfach mit IMG-tags arbeiten, die allesamt absolut positioniert sind. Diese befinden sich in einem DIV, das ebenfalls absolut positioniert ist. Das DIV hat eine feste Größe und overflow:hidden. Zieht man mit der Maus eine Grafik, werden die top + left Angaben aller Grafiken parallel modifiziert. Alternativ kann man sie in einem DIV gruppieren und somit alle auf einmal bewegen - spart nochmals performance und läuft flüssiger. Ist aber auch aufwändiger, da man immer wieder eine Auswahl an images neu gruppieren muss - nämlich immer die, die mit der nächsten Zieh-Aktion potenziell in den sichtbaren Bereich rücken könnten. Dies impliziert auch das eine Gruppe von Bildern immer 9x größer ist wie die sichtbare Fläche (die sichtbare Fläche mit eingerechnet). Wird die Maus losgelassen, muss überall wo Bildmaterial fehlt um diese Bedingung zu erfüllen, sofort welches nachgeladen werden. Rechts und unten Bildmaterial nachladen ist kein Problem. Links und oben dagegen eine herausforderung, denn es darf die Karte an sich nicht verrücken. Da jedoch alles absolut positioniert ist, sollte auch das kein Problem sein.
Zum Vergrößern anklicken....
http://www.tutorials.de/javascript-ajax/307476-dynamische-map.html

Aber wie ich Anfangen soll .... BAHNHOF
 
Hallo,

Ich habe mir den Text von solquery nocheinmal durchgelesen als ich ausgeschlafen war.

Ich habe nun ein absoluten positionierten DIV Container.
Ich habe alles auf img Tags umgestellt und diese auch absolut Positioniert.

Ich habe einen Kartenausschnitt wo ich 9x9 Felder sehe.
Geladen sind aber 40x40 Felder.

Wie kann man das nun mit Javascript bewegen. Jquery? Oder reicht ein einfaches JSscript?

@Antwort: zusätzlicher Div-Container + jquery-ui-1.8.20 draggable! -> $('#dragme').draggable(); ... war ja zu einfach ;)

Jetzt kommen wir zum schwierigen Teil ...

Wenn ich die Daten per ajax nachlade, wie kann ich herrausbekommen wo ich mich auf der map gerade befinde? Damit er die umliegenden Felder laden kann.
 
Zuletzt bearbeitet:
Du musst, sobald du anfängst zu ziehen (bzw. klickst), die aktuelle Koordinate merken (und auch das Bild, an dem du ziehst) und dann entsprechend verschieben.
Idealerweise lässt du nur zu, dass sich die Map innerhalb des Rasters verschiebt... sonst hast du überall abgehackte, halbe Flächen - es sei denn du willst das.

Irgendwo gabs dazu schon mal einen ausführlichen Thread wo wir lange diskutiert haben... Wenn ich ihn finde schreib ich den Link noch hinzu.
 
Hallo,

@Maniac: Ja leuchtet ein.

@Lime: Wie kann man dies an das Raster festmachen? Obwohl es mich nicht so sehr stört. Woran liegt der Unterschied?

Wenn du den Link findest wäre schon schön :D
 
Der Unterschied ist eigentlich simpel. So wie du die Map momentan hast, verschiebst du glaub ich alles innerhalb des DIVs, also alle img-Tags. Meiner Meinung nach ist das überflüssig. Es würde durchaus reichen, wenn du die Bilder innerhalb! der IMG-Tags verschiebst. Dann hast du auch nirgends halbe Karten-Teile am Rand, was optisch einfach nicht so "geil" aussieht, wenn du verstehst was ich meine.

Die Frage ist jetzt primär: was soll die Karte später können? Willst du damit, wie z.B. bei die-stämme auf Informationen zugreifen? Dann brauchst du bei den IMG-Tags noch eine ID des Feldes dabei. Allerdings ist das nicht wirklich schwer zu programmieren.

Du machst in PHP einfach eine Schleife, die dir IMG-Tags mit folgenden IDs anlegt:
Code: 
1-1  1-2  1-3  1-4  1-5  1-6  1-7  1-8  1-9
2-1  2-2  2-3  2-4  2-5  2-6  2-7  2-8  2-9
3-1  3-2  3-3  3-4  
...
9-1  9-2  9-3  9-4  9-5  9-6  9-7  9-8  9-9
Der Image-Tag muss ja nicht viel können:
HTML: 
<img src="standard-hintergrund.png" id="1-1" />
<img src="standard-hintergrund.png" id="1-2" />

Als Standard-Hintergrund würde ich einfach eine grüne Wiese nehmen (bezogen auf deine Map). Wenn du damit fertig bist, musst du dir überlegen wie du die IMG-Tags füllst.
Ich würde einfach die ganze Map (oder zumindest einen großen Teil, ich weiß nicht wie groß die ist von den Daten her) in einen JS-Array laden.
Irgendwo brauchst du noch eine Information, welche Koordinaten du momentan hast (bezogen auf die Datenbank), also welches Map-Feld in der Mitte steht. Von dort aus kannst du dann die Felder einfach befüllen.

Zum Thema Array: Da müssen ein paar Infos rein. Zu allererst muss es ein zweidimensionaler Array sein, damit du Zeilen und Spalten hast. Jedes Feld braucht dann nochmals zwei Informationen: Was ist es für ein Feld (Stein, Wasser, Baum, leer, Haus, ... whatever!) und was für eine ID hat das Feld.
Ersteres kann man einfach mit einer Nummerierung von 0-x lösen, wobei 0 für leer, 1 für Wasser, 2 für Bäume, ... steht. Die entsprechenden Grafiken nennst du dann einfach 0.png, 1.png... so sparst du vor allem Traffic.
Die Feld-ID ist nur wichtig, wenn du auf das Feld per Klick später zugreifen willst.

Mit JS bastelst du dir jetzt einfach ein paar Funktionen, die die Felder füllen. Wenn es da hängt, dann kannst du ja nochmal fragen.

gruß lime
 
Hallo Lime,

danke für deine Antwort, ich werde das JSscript basteln auf heute Abend verschieben.

Zur Zeit lassen ich die Map mit zwei for-Schleifen in php bauen. Hatte gerade eben eine 81x81 große Map (sichtbarer Bereich nur 9x9). Das sind aber dann 6561 IMG Tags xD , eindeutig zuviele, denke ich mal. Leider baut das Script die Map immer nur nach rechts und oben auf. Wenn ich nach links und unten verschiebe komme ich immer in leeren Raum.

Irgendwann soll man auch auf den Felder bestimmte Aktionen ausführen können.
Die IDs wie du sie zeigts sind ja kein Problem, aber dürfen IDs mit einer Zahl beginnen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück