Die Google Maps-API und benutzerdefinierte Überlagerungen

() translation by (you can also view the original English article)

In unserem vorherigen Tutorial haben wir uns angesehen, wie Sie mithilfe der API des Dienstes Markierungen hinzufügen und die Farben und Menüs einer Google-Karte anpassen können. Dieses Tutorial geht noch einen Schritt weiter und erklärt, wie Sie Ihre eigene benutzerdefinierte Karte erstellen und auf eine Google-Karte (z. B. meine Karte von Portsmouth von 1896) überlagern können.

In diesem Tutorial fügen wir der zuvor erstellten Karte eine Überlagerung mit Wettervorhersagen hinzu. Die Wetterkarte, die ich benutze, ist völlig fiktiv, aber die behandelten Techniken geben Ihnen die Freiheit, alle möglichen interessanten Dinge zu erstellen! Sie können historische Karten, benutzerdefinierte Karten und Nahaufnahmen bestimmter Bereiche wie eines Universitätscampus erstellen - die Liste ist endlos!

Google Maps bestehen aus vielen separaten Kacheln. Screenshot von der hervorragenden Website "Tiles à la Google Maps".

Ein paar Dinge, die Sie wissen müssen, bevor Sie beginnen:

Eine Google-Karte wird mit vielen Bildkacheln erstellt (siehe Bild oben). Mit anderen Worten, die Karte ist in ein unsichtbares Gitter aufgeteilt und jedes Gitterquadrat ist eine separate Bilddatei mit 256 x 256 Pixel.
Für jede Zoomstufe benötigen Sie eine Reihe von Bildkacheln. Die Zoomstufe ist eine Zahl ab Null, die sich beim Vergrößern und Verkleinern der Karte ändert (sehen Sie Abbildung oben).
Ihre Kartenüberlagerung beginnt ihr Leben als ein wirklich großes Bild (ein JPEG oder ein PNG), das Sie dann in Kacheln aufteilen. Es ist ein sich wiederholender Vorgang in dem Sinne, dass das Bild einmal in Scheiben geschnitten wird, um einen Satz Kacheln für die erste Zoomstufe zu erstellen, und dann erneut in kleinere Segmente geschnitten wird, um den zweiten Satz Kacheln für die nächste Zoomstufe zu erstellen, und bald.

Dieses Tutorial erklärt jeden Schritt, einschließlich der Software-Tools, die (zum Glück!) Verfügbar sind, um Dinge zu automatisieren und das Leben viel einfacher zu machen. Die Quelldateien für jeden Schritt sind im Download-Paket verfügbar.

Vorlage herunterladen

Zunächst müssen Sie eine Vorlage erstellen, auf der Sie Ihr eigenes Overlay erstellen können.

Template image into which you create your map This image is actually 9984x11776 pixels if you take a look at it in the tutorial files — Vorlagenbild, in das Sie Ihre Karte erstellen. Dieses Bild ist tatsächlich 9984x11776 Pixel

Ihr Ziel ist es, in Photoshop (oder einer gleichwertigen Grafikanwendung) eine Vorlage zu erstellen, die genau die gleiche Größe und Form hat wie die Google-Karte, über die Sie sie legen möchten, wenn sie die höchste Zoomstufe aufweist. (maptiler.org ist nützlich, wenn Sie nicht sicher sind, welche Zoomstufe Sie am meisten benötigen).

Dazu können Sie eine Vorlagenkarte mit dem Maptup von maptiler speichern und dann in Photoshop auf die gewünschte maximale Zoomstufe vergrößern. Beispielsweise:

Verwenden Sie Ihre Grafikanwendung, um das von Ihnen gespeicherte Vorlagenkartenbild zu öffnen.
Gehen Sie zur Website "Kacheln à la Google Maps" und machen Sie einen Screenshot eines Segments Ihrer Google-Karte mit der erforderlichen maximalen Zoomstufe.
Fügen Sie den Screenshot in Ihre Photoshop-Datei ein.
Vergrößern Sie dann Ihr Vorlagenkartenbild so, dass es genau mit dem entsprechenden gezoomten Kartensegment übereinstimmt.
Löschen Sie als Nächstes das gezoomte Segment. Die Qualität Ihrer Vorlagenkarte wird nicht besonders gut sein, aber das spielt keine Rolle, da Sie sie nur für die Gliederung benötigen und sie schließlich löschen.

Tipp: Eine weitere Option ist der Google Maps Downloader. Beachten Sie jedoch die AGB von Google. Diese Option ist auch für große und detaillierte Karten nicht geeignet. Eine auf Stufe 12 gezoomte UK-Karte ist zu groß, um in Photoshop geöffnet zu werden.

Zu diesem Zeitpunkt werde ich die Dinge nicht komplizieren! In einer geringfügigen Änderung gegenüber dem vorherigen Lernprogramm habe ich die maximale Zoomstufe von 12 auf 10 geändert, um eine überschaubare Dateigröße für die Arbeit zu erhalten.

Erstellen Sie Ihre eigene Karte

Wenn Sie Ihr Karten-JPG mit dem oben beschriebenen Verfahren erstellt haben, öffnen Sie es in Photoshop oder in Ihrer bevorzugten Grafikanwendung.

My custom overlay Not exactly a showcase of artistic talent I know but it does the job for this demo Yours will look amazing Actual size 7248x10929 png file — Mein benutzerdefiniertes Überlagerung. Nicht gerade ein Schaufenster künstlerischen Talents, das ich kenne, aber es macht den Job für diese Demo. Ihre Karte wird fantastisch aussehen. (Tatsächliche Größe 7248x10929 PNG-Datei)

Sie verwenden dieses Bild als Vorlage und zeichnen Ihre eigene Karte darüber. Dies soll sicherstellen, dass Ihre Karte perfekt mit der Google-Karte übereinstimmt.

Sperren Sie Ihren Kartenvorlagen-Layer.
Fügen Sie eine neue Ebene hinzu.
Kreieren Sie etwas Erstaunliches. (Lassen Sie sich zunächst nicht zu sehr mitreißen. Tatsächlich ist es eine gute Idee, etwas Grundlegendes wie meine Wetterkarte zu erstellen und den Rest des Tutorials zu befolgen, um ein Gefühl dafür zu bekommen, was passiert. Dann erschaffe etwas Erstaunliches!)
Blenden Sie den Kartenvorlagen-Layer aus.
Speichern Sie Ihre Karte als PNG oder JPG (wenn Sie transparente Teile wie das Meer in diesem Tutorial haben, wählen Sie ein PNG).

Schauen Sie sich das Wetterkartenbild an, das ich zu diesem Zeitpunkt erstellt habe und das im Quelldownload verfügbar ist.

Schneiden Sie Ihre Karte auf

Es gibt verschiedene Möglichkeiten, wie Sie Ihr Bild in Scheiben schneiden können, um die Kartenkacheln zu erstellen. Wenn Sie Hintergrundinformationen zu Ihren Aktivitäten wünschen, lesen Sie weiter. Wenn Sie sich nicht darum kümmern, warum oder wie es funktioniert, fahren Sie einfach mit dem nächsten Abschnitt fort!

Projektionssysteme

Ein Projektionssystem im geografischen Sinne ist, wie eine flache Karte aus einem runden Objekt, d. h. dem Globus, erstellt wird. Es gibt alle Arten von (ehrlich gesagt verwirrenden) Formeln und Algorithmen, die verwendet werden, um dies zu erreichen. Alles, was Sie wissen müssen, ist, dass unterschiedliche Projektionssysteme zu unterschiedlichen flachen Karten der Welt führen.

Mercator projection top and the GallPeters projection bottom create a quite different two dimensional maps — Die Mercator-Projektion (oben) und die Gall-Peters-Projektion (unten) erzeugen ganz unterschiedliche zweidimensionale Karten. (Die Raster auf den obigen Bildern beziehen sich nicht auf die quadratischen Google-Kartenkacheln.)

Um eine Überlappung für eine Google-Karte zu erstellen, müssen Sie das "Spherical Mercator" -System verwenden, das die Mercator-Projektion verwendet. Dies ist definiert als EPSG:900913 oder EPSG:3857. Weitere Informationen zu Projektionssystemen finden Sie auf der Webseite Tiles à la Google Maps.

Finden Sie jede Seite Ihrer Karte

Bevor Sie Ihre Kacheln erstellen können, müssen Sie die Position der Nord-, Süd-, West- und Ostseite Ihrer Karte ermitteln. Wenn Sie das "Spherical Mercator" -System verwenden, müssen diese in sphärischen Metern angegeben werden und nicht in Längen- oder Breitengraden.

How to read the output on the Mashup Top-left number west side top-right number south-side bottom-left number east side bottom-right number north side — So lesen Sie die Ausgabe auf der Mashup-Website: Oben links = Westseite, oben rechts = Südseite, links unten = Ostseite, rechts unten = Nordseite.

Sie können diese Positionswerte mit diesem Mashup finden. Ich habe festgestellt, dass die einfachste Methode darin besteht, direkt hineinzuzoomen und jeweils eine Seite zu finden. Suchen Sie also den Wert für die Westseite Ihrer Karte, notieren Sie ihn, suchen Sie den Wert für die Südseite und so weiter.

Sobald Sie diese vier Werte gefunden haben, können Sie Ihre Karte in Kacheln aufteilen. Es stehen einige Optionen zur Verfügung.

Slicing Option 1: MapTiler

Glücklicherweise ist die MapTiler-Software wirklich einfach zu bedienen! Zum Zeitpunkt des Schreibens dieses Tutorials aktualisiert MapTiler seine Software. Unabhängig davon, welche Version Sie herunterladen, sind dies die grundlegenden Schritte:

Laden Sie Maptiler herunter. Oder die neuere Beta-Version.
Starten Sie das Programm und wählen Sie die mit Google Maps kompatible Option.
Fügen Sie dann das Kartenbild hinzu, das Sie im vorherigen Schritt erstellt haben.
Sie werden aufgefordert, die Georeferenzierung der Grenzen Ihrer Karte anzugeben, d. h. die Position in sphärischen Metern jeder Seite, die Sie gerade gefunden haben. In Version 0.41 (der neueren der beiden Versionen) wird dies als Bounding Box bezeichnet. Seien Sie vorsichtig bei der Reihenfolge, in der Sie die Werte eingeben!
Wenn Sie nach Ihrem räumlichen Referenz- / Koordinatensystem gefragt werden, verwenden Sie ESPG: 3857. (Wenn Sie die alte Version 1(Beta) von MapTiler verwenden, verwenden Sie EPSG: 900913).
Wählen Sie dann die Zoomstufen aus, für die Sie Kacheln generieren möchten. Der Maximalwert sollte der Wert sein, unter dem Sie Ihre Vorlagenzuordnung gespeichert haben, als Sie sie erstellt haben(oben). Auf der Seite Kacheln à la Google Maps können Sie herausfinden, was Sie für den minimalen Zoomwert benötigen.
Fahren Sie bis zum Ende des Assistenten fort und starten Sie das Rendern. Dies kann eine Weile dauern; eine gute Gelegenheit, einen Kaffee zu bekommen!

Hinweis: Wenn Sie die neue Version von MapTiler verwenden, gibt es ein Gotcha. Ihre Kartenkacheln sind mit einem Wasserzeichen versehen. Ich vermute in einigen Fällen, vielleicht für ein Uni-Projekt oder einen technischen Proof-of-Concept, dass dies sowieso kein Problem ist. Es gibt jedoch einige Möglichkeiten, dies zu umgehen. Der naheliegendste Weg ist, das Upgrade für 20 US-Dollar zu kaufen, glaube ich. Die andere Option ist die Verwendung des Python-Skripts GDAL2Tiles. Meine persönliche Präferenz ist das Upgrade, da ich meine Zeit lieber mit kreativen Dingen verbringen möchte, als die Irritationen beim Einrichten der Skriptumgebung zu ertragen, aber Sie fühlen sich möglicherweise anders.

Tipp: Wenn bei der Verwendung der MapTiler-Software Probleme auftreten, ist das Benutzerforum äußerst nützlich.

Slicing Option 2: GDAL2Tiles

Eine Alternative zu MapTiler ist das GDAL2Tiles-Skript. Die MapTiler-Software basiert auf diesem Skript, das über die Eingabeaufforderungsoberfläche ausgeführt wird.

cdsbfds — GDAL2Tiles ist das Python-Skript, das das Herzstück der MapTiler-GUI bildet. Sie können dieses Skript direkt über die Eingabeaufforderungsoberfläche verwenden.

GDAL2Tiles bietet weitere Möglichkeiten, ist aber auch etwas schwieriger zu bedienen. Lesen Sie also nur weiter, wenn Sie ein Gefühl für Abenteuer haben!

In der ersten Phase wird die Umgebung zum Ausführen des GDAL2Tiles-Skripts eingerichtet. Wie Sie dies tun, hängt von Ihrem Betriebssystem ab. Wenn Sie einen 32-Bit-Windows-Computer verwenden (klicken Sie hier, wenn Sie sich nicht sicher sind), können Sie OSGeo4W verwenden.

Sie müssen zuerst Python installieren und überprüfen, ob Python in Ihrer Pfadvariablen enthalten ist.
Dann laden Sie OSGeo4W herunter.
Führen Sie das Installationsprogramm aus und wählen Sie Erweiterte Installation.
Wählen Sie Libs und dann gdal und gdal-python in den ausgewählten Paketen.
Fahren Sie fort und schließen Sie die Installation ab.
Wenn dies erledigt ist, sollte das OSGeo4W-Symbol auf Ihrem Desktop angezeigt werden. Dies ist eine Batchdatei zum Starten der Eingabeaufforderung.

Wenn Sie einen 64-Bit-Windows-Computer verwenden (klicken Sie hier, wenn Sie sich nicht sicher sind), ist das Setup etwas anders. Diese Anweisungen werden (mit freundlicher Genehmigung) direkt aus Jaerock Kwons Blog zitiert, der die volle Anerkennung für die Erteilung derart detaillierter Anweisungen verdient.

Installieren Sie Python von x86-64.
Überprüfen Sie, ob Python in Ihrer Pfadvariablen enthalten ist.
Führen Sie python.exe aus. (Klicken Sie beispielsweise auf C:\Python27\python.py) Wir müssen die Compilerversion herausfinden, die die Python erstellt hat. In meinem Fall ist die Python-Version 2.7.5 und wurde mit Python 2.7.5 (Standard, 15. Mai 2013, 22:44:16) [MSC v.1500 64-Bit(AMD64)] unter win32 kompiliert und erstellt.
GDAL-Binärpakete für 64-Bit-Computer finden Sie unter http://vbkto.dyndns.org/sdk/. Wählen Sie eine entsprechende Version in der Tabelle aus. In meinem Fall ist Release-1500-x64-gdal-1-10-mapserver-6-2 die richtige Version in der Zeile "MSVC2008(Win64) -stable", da Python bis 1500 erstellt wurde.
Laden Sie das generische Installationsprogramm für die GDAL-Kernkomponenten herunter. In meinem Fall - gdal-110-1500-x64-core.msi
Laden Sie das Installationsprogramm für die GDAL-Python-Bindungen herunter (erfordert die Installation des GDAL-Kerns). In meinem Fall GDAL-1.10.0.win-amd64-py2.7.msi - Ich habe dies gewählt, weil 1.10.0 die neueste und mein Python 2.7.5 ist.
Installieren Sie die GDAL-Kernkomponenten. Es gibt keine Möglichkeit, den Zielordner für den GDAL-Kern auszuwählen. Es wird im Ordner "C:\Programme\GDAL" installiert.
Installieren Sie die GDAL-Python-Bindungen.
Nach der Bindung können Sie den GDAL-Ordner in C:\Programme an einen beliebigen Ort verschieben.
Klicken Sie abschließend auf das Start-Menü und dann auf Alle Programme und dann auf GDAL. Dies sollte die Eingabeaufforderung der Befehlszeile starten.

Angenommen, Sie haben den (manchmal traumatischen!) Prozess des Einrichtens der GDAL2Tiles-Softwareumgebung durchlaufen, ist es Zeit, etwas damit zu tun.

gbfgr — Die Eingabeaufforderung von GDAL. Das OSGeo4W sieht dem sehr ähnlich. Die Befehle sind für beide gleich.

Unabhängig davon, ob Sie über die OSGeo4W- oder die GDAL-Umgebung verfügen, sollte Ihre Eingabeaufforderung dem obigen Screenshot ähneln. Sie können jetzt das GDAL2Tiles-Skript verwenden.

Zunächst müssen Sie in den Ordner navigieren, in dem die Karte, die Sie aufteilen möchten, gespeichert ist. (Diese Befehle sind nützlich, um dorthin zu gelangen, wo Sie sein müssen: dir gibt Ihnen eine Liste aller Elemente im aktuellen Verzeichnis, cd bedeutet Verzeichnis wechseln, cd .. bedeutet, eine Ebene nach oben zu verschieben).

Sobald Sie sich im richtigen Ordner befinden, können Sie mit dem Erstellen Ihrer Kacheln beginnen. Um die Demo-Map in diesem Tutorial zu erstellen, habe ich folgende Befehle verwendet:

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 -910307.6791052371 8109796.717743561 -gcp 7248 0 196252.07012218982 8109796.717743561 -gcp 7248 10929 196252.07012218982 6438749.514630105 part2_rainfall_map.png out.vrt

gdal2tiles.py -p mercator -z 6-10 out.vrt

Informationen zur Funktionsweise dieser Befehle finden Sie auf den Seiten gdal_translate und gdal2tiles.py. Es gibt auch einen GDAL-Warp-Befehl, der eng verwandt ist, aber in diesem Fall nicht benötigt wird. Einige Dinge zu beachten sind:

Die drei -gcp-Eigenschaften beziehen sich auf drei Ecken Ihrer Karte. Das erste Wertepaar nach jeder gcp-Eigenschaft bezieht sich auf die Abmessungen in Pixel Ihrer Eingabebilddatei, und das zweite Wertepaar sind die Koordinaten in sphärischen Metern (nicht Längen- und Breitengrad - sehen Sie oben).

So wenden Sie dies auf Ihre Karte an:

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 west north -gcp width_of_your_input_map_file_in_pixels 0 east north -gcp width_of_your_input_map_file_in_pixels height_of_your_input_map_file_in_pixels east south your_input_file_name.png your_output_file_name.vrt

gdal2tiles.py -p mercator -z zoom_range name_of_output_file.vrt

Nach dem Auslösen des zweiten Befehls erwacht Ihr Computer zum Leben und schneidet Ihr Bild, um die Kartenkacheln zu erstellen. Sie können sich die genauen Befehle ansehen, die ich in die OSGeo4W- und GDAL-Umgebungen eingegeben habe, wenn Sie sich nicht sicher sind, ob Sie mit der Eingabeaufforderung in Ordnern navigieren sollen.

Die Ausgabe verstehen

Unabhängig von der Methode, mit der Sie Ihre Kacheln generiert haben, sind die generierten Ordner dieselben.

Some of the tiles generated These are zoom level 6 the x position is 31 and the y position is the name of each file — Einige der generierten Kacheln. Dies sind Zoomstufe 6, die Position 'x' ist 31 und die Position 'y' ist der Name jeder Datei.

Alle Kacheln auf einer Google-Karte haben die Werte "x" und "y". (Ja - noch ein anderes Koordinatensystem!) Die erste Ordnerebene ist die Zoomstufe, innerhalb der nächsten Ordnerebene die 'x'-Koordinate und innerhalb der Dateiname die' y'-Koordinate.

Wenn Sie sich die Karte auf dieser Website ansehen, sollten Sie feststellen, dass die Namen Ihrer Kacheln übereinstimmen. Mit anderen Worten, gehen Sie zu Ihrem gewünschten Speicherort, passen Sie die Zoomstufe so an, dass sie Ihrem Ordnernamen entspricht, und sehen Sie sich dann die Google-Werte "x" und "y" an. Sie sollten sehen, dass sie mit Ihrem Unterordner und den Dateinamen für die entsprechenden Kartenkacheln übereinstimmen.

Um zu überprüfen, ob Ihre Kacheln in Ordnung sind, empfehle ich dringend, eine oder zwei der für die niedrigste Zoomstufe generierten Kacheln wieder in Ihre Kartendatei (z. B. die Photoshop-Datei) zu kopieren, die in der vorherigen Phase erstellt wurde. Überprüfen Sie, ob sie genau auf Ihre Karte passen. Schauen Sie sich die Quelldateien an, die ich für ein Beispiel bereitgestellt habe.

Wenn alles in Ordnung ist, dann - herzlichen Glückwunsch - ist die harte Arbeit erledigt!

Hilfe, meine Kartenkacheln sind nicht richtig benannt!

Ach je. Dies ist der Fall, wenn Sie die ältere Version der MapTiler-Software oder das GDAL2Tiles-Skript verwendet haben. Ihre Dateien (aber nicht die Ordner) werden gemäß der TMS-Namenskonvention benannt. Wenn Sie sich die Kacheln auf dieser Seite ansehen, sehen Sie, dass jede Kachel zwei x- und y-Werte hat. dh. ein Google-Paar und ein TMS-Paar. Wir müssen sie nur in die Namenskonvention für Google-Karten umbenennen.

Diese Umbenennung kann manuell erfolgen, dauert jedoch für die meisten Karten viel zu lange. Glücklicherweise gibt es ein praktisches Shell-Skript, das die Arbeit für Sie erledigt. Sie müssen ein wenig über sehr grundlegende Linux-Befehle wissen, z. B. wie man einen Ordner wechselt. Erstellen Sie vor dem Ausführen des Shell-Skripts eine Kopie Ihrer Kacheln, an denen Sie arbeiten möchten.

#!/bin/sh
for thisPath in `ls -d */*/*`
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1&lt;&lt;zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

Kopieren Sie das obige Skript, fügen Sie es in Notepad ein und speichern Sie es unter dem Namen 'rename' und der Erweiterung '.sh'. Stellen Sie beim Speichern der Datei "sh" im Editor sicher, dass "Alle Dateien" neben "Als Typ speichern" ausgewählt ist, und setzen Sie den Namen in Anführungszeichen, z.B. "Rename.sh".

Wenn Sie einen Mac verwenden, kann dieses Shell-Skript im Terminal ausgeführt werden (wählen Sie Anwendungen, dann Dienstprogramme und dann Terminal).

Wenn Sie sich auf einem Windows-Computer befinden, müssen Sie zum Ausführen von Shell-Skripten (oder .sh-Dateien) Cygwin verwenden, eine Linux-ähnliche Umgebung für Windows:

Laden Sie Cygwin herunter und installieren Sie es
Kopieren Sie die soeben gespeicherte Datei 'rename.sh' in den Ordner cygwin\bin.
Starten Sie Cygwin.
Wechseln Sie in den Ordner cygwin\bin. (d.h. cd bedeutet Verzeichnis wechseln, cd .. bedeutet, den Baum um eine Ebene nach oben zu verschieben, und ls bedeutet, die Dateien und Ordner im aktuellen Verzeichnis anzuzeigen.)
Machen Sie rename.sh ausführbar, indem Sie chmod 755 rename.sh ausführen
Sie müssen es auch in eine Linux-Datei konvertieren, bevor Sie es ausführen, da sonst "\r"-Fehler aufgrund von Zeilenumbrüchen auftreten. Stellen Sie also sicher, dass Sie sich noch im Ordner cygwin\bin befinden, und führen Sie d2u rename.sh aus
Wechseln Sie dann zu dem Ordner, der Ihre Kacheln enthält (sehen Sie Abbildung oben).
Geben Sie dann zum Ausführen des Skripts rename.sh ein

Nachdem das Shell-Skript ausgeführt wurde, können Sie überprüfen, ob die Aufgabe erledigt ist, indem Sie sich Ihre Dateien noch einmal ansehen. Überprüfen Sie, ob ihre Namen jetzt mit den Google-Koordinaten auf dieser Seite übereinstimmen.

Wenn Sie die Dateinamen in den Ordnern "Teil 3-Dateien" und "Teil 4-Dateien" in den Quelldateien vergleichen, können Sie den Unterschied erkennen.

Komprimieren Ihrer Kartentitel

Um sicherzustellen, dass Ihre Karte so reibungslos wie möglich läuft, können Sie Ihre Kartenkacheln komprimieren.

Es gibt verschiedene kostenlose Dienstprogramme zur Komprimierung von PNG-Bildern, aber ich hatte Mühe (und konnte keine finden), eines zu finden, das völlig kostenlos war und die Arbeit erledigte. Beispielsweise hat die beliebte PNGGauntlet-Software die Ordnerstruktur nicht beibehalten, während andere kostenlose Dienstprogramme die maximale Anzahl von Dateien begrenzt haben.

Am Ende musste ich in die Kugel beißen und die PNGOUTWin-Software kaufen. Dies kostete ungefähr 10 Pfund, was angesichts der damit verbundenen Kosten ein Schnäppchen ist! PNGOUTWin behält die Dateistruktur bei und ermöglicht es Ihnen, alle Ihre Dateien gleichzeitig zu komprimieren.

Wenn Sie PNGOUTWin verwenden, ist dies ziemlich intuitiv. Meine einzige Warnung ist, dass Sie eine Kopie Ihrer Kacheln erstellen und dann die Software auf der Kopie ausführen sollten. Beachten Sie außerdem, dass die Software buchstäblich gestartet wird, sobald Sie den Ordner ausgewählt haben!

JavaScript Magic, um alles zusammenzubringen

Okay, wir sind fast da. Alles, was bleibt, ist die Kleinigkeit, Ihre schönen neuen Kartenkacheln an Ihre Google-Karte anzuhängen.

Der Basiscode

Schauen Sie sich zunächst ein einfaches Beispiel für eine gekachelte Kartenüberlagerung an (Quelldateien sind über den Link oben auf dieser Seite verfügbar).

Wenn Sie hinein- und herauszoomen, bleibt die Kartenüberlagerung erhalten.

//setting up the rainfall map overlay
var rainMapOverlay = new google.maps.ImageMapType({
 getTileUrl: function(coord, zoom) {
 return 'tiles/rainfall' + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png';
 },
 tileSize: new google.maps.Size(256, 256)
});

Dieses Snippet verwendet die ImageMapType-Klasse, um das benutzerdefinierte Overlay zu erstellen. Die Datei coord.x bezieht sich auf den Ordnernamen und die Datei coord.y auf den Dateinamen. Diese werden im Code zusammengefügt, um den Pfad zu jeder Kachel zu erstellen.

Schließen Sie es an die UK Festival Map an

Dies ist das Endprodukt, das Sie anstreben. Um dies zu erstellen, können Sie dieselben Techniken verwenden, die am Ende des vorherigen Tutorials erläutert wurden.

Wir erstellen zuerst eine Variable(rainfallOverlayToggle), um zu speichern, ob die Wetterüberlagerung gerade angezeigt wird oder nicht. Erstellen Sie anschließend eine neue Option in der Funktion handelRequests, um die Situation zu behandeln, in der auf die Umbrella-Schaltfläche (brolly) geklickt wird.

//Displays the rainfall map when the unbrella button is clicked, and removed it if is already showing.
else if (buttonPressed === "rainfall"){
//If the rainfall map is NOT showing aleady then show it ...
if (rainfallOverlayToggle === 0){
//Overlays the rainfall map on top of the Google map
festivalMap.overlayMapTypes.insertAt(0, rainMapOverlay);
//Show the weather key.
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].push(weatherKeyDiv);
rainfallOverlayToggle = 1;
}
//If the rainfall map is showing already then hide it ...
else {
//remove the overlay map.
festivalMap.overlayMapTypes.removeAt(0, rainMapOverlay);
//remove the weather key
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].pop(weatherKeyDiv);
rainfallOverlayToggle = 0;
}
}

Was nun?

Gut gemacht, um das Ende zu erreichen! Wenn Sie irgendwelche Fragen haben, fragen Sie bitte in den Kommentaren. Das nächste Tutorial befasst sich mit der Verbindung zur Flickr-API, sodass Sie automatisch Fotos von Flickr abrufen und auf Ihrer Karte anzeigen können.

Bildnachweis

Mercator-Projektionskarte - Wikipedia
Gall-Peters-Projektionskarte - Wikipedia