In unserem vorherigen Tutorial haben wir untersucht, wie Sie Markierungen hinzufügen und die Farben und Menüs einer Google-Karte mithilfe der Service-API anpassen können. Dieses Tutorial geht noch einen Schritt weiter und erläutert, wie Sie Ihre eigene benutzerdefinierte Karte erstellen können Überlagerung es auf eine Google-Karte (wie meine 1896-Karte von Portsmouth).
In diesem Lernprogramm fügen wir der zuvor erstellten Karte eine Überlagerung für "Wettervorhersagen" hinzu. Die Wetterkarte, die ich verwende, ist völlig fiktiv, aber die beschriebenen Techniken geben Ihnen die Freiheit, alle möglichen interessanten Dinge zu erstellen! Sie können historische Karten, benutzerdefinierte Karten und Nahaufnahmen von bestimmten Bereichen wie einem Universitätsgelände erstellen - die Liste ist endlos!
Google Maps bestehen aus vielen separaten Kacheln. Screenshot von der ausgezeichneten Website "Tiles à la Google Maps".
Ein paar Dinge, die Sie wissen mü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 Rasterquadrat ist eine separate Bilddatei mit 256 x 256 Pixel.
Sie benötigen für jede Zoomstufe einen Satz Bildkacheln. Die Zoomstufe ist eine Zahl von Null aufwärts, die sich beim Vergrößern und Verkleinern der Karte ändert (siehe Abbildung oben)..
Ihre Kartenüberlagerung beginnt als ein wirklich großes Bild (ein JPEG oder PNG), das Sie dann in Kacheln schneiden. Es ist ein sich wiederholender Vorgang, in dem Sinne, dass das Bild einmal aufgeschnitten wird, um einen Satz von Kacheln für die erste Zoomstufe zu erstellen, und dann erneut in kleinere Segmente geschnitten wird, um den zweiten Satz von Kacheln für die nächste Zoomstufe und zu erstellen bald.
In diesem Lernprogramm werden die einzelnen Schritte erläutert, einschließlich der Softwaretools, die (zum Glück!) Verfügbar sind, um Dinge zu automatisieren und das Leben erheblich zu vereinfachen. Die Quelldateien für jeden Schritt sind im Download-Paket verfügbar.
Vorlage herunterladen
Zunächst müssen Sie eine Vorlage erstellen, auf der Sie Ihre eigene Überlagerung erstellen können.
Vorlagenbild, in dem Sie Ihre Karte erstellen. Dieses Bild hat eine Auflösung von 9984x11776 Pixeln
Ihr Ziel ist es, eine Vorlage in Photoshop (oder einer gleichwertigen Grafikanwendung) zu erstellen, die genau dieselbe Größe und Form wie die Google-Karte hat, auf der Sie sie überlagern möchten, wenn sie sich gerade befindet höchste Zoomstufe. (maptiler.org ist nützlich, wenn Sie sich nicht sicher sind, welche Zoomstufe Sie am höchsten benötigen).
Zu diesem Zweck können Sie eine Vorlage-Map mit Mashup von maptiler speichern und dann in Photoshop auf die gewünschte maximale Zoomstufe vergrößern. Zum Beispiel:
Verwenden Sie Ihre Grafikanwendung, um das gespeicherte Vorlagen-Kartenbild zu öffnen.
Rufen Sie die Tiles à la Google Maps-Website auf und machen Sie einen Screenshot eines Segments Ihrer Google-Karte mit der gewünschten maximalen Zoomstufe.
Fügen Sie den Screenshot in Ihre Photoshop-Datei ein.
Vergrößern Sie dann das Vorlagenkartenbild, sodass es genau mit dem entsprechenden vergrößerten Kartensegment übereinstimmt.
Löschen Sie anschließend das gezoomte Segment. Die Qualität Ihrer Vorlagen-Map wird nicht großartig sein, aber dies spielt keine Rolle, da Sie sie nur für die Gliederung benötigen und Sie sie eventuell löschen.
Spitze: Eine weitere Option ist der Google Maps Downloader. Beachten Sie jedoch die Google-Nutzungsbedingungen. Diese Option ist auch für große und detaillierte Karten nicht geeignet. Eine auf Level 12 gezoomte UK-Karte ist zu groß, um sie in Photoshop zu öffnen.
Zu diesem Zeitpunkt werde ich die Dinge nicht komplizieren! In einer geringfügigen Änderung gegenüber dem vorherigen Tutorial habe ich die maximale Zoomstufe von 12 auf 10 geändert, um eine überschaubare Dateigröße zu erhalten.
Erstellen Sie Ihre eigene Karte
Wenn Sie Ihr Map-JPG mit dem oben beschriebenen Vorgang erstellt haben, öffnen Sie es in Photoshop oder Ihrer bevorzugten Grafikanwendung.
Meine benutzerdefinierte Überlagerung. Ich bin zwar nicht gerade ein Schaufenster künstlerischer Talente, aber für diese Demo ist es gut. Ihre Karte wird fantastisch aussehen. (Aktuelle Größe 7248x10929 PNG-Datei)
Sie verwenden dieses Bild als Vorlage und zeichnen darüber eine eigene Karte. Damit stellen Sie sicher, dass Ihre Karte perfekt mit der Google-Karte übereinstimmt.
Sperren Sie den Kartenvorlagen-Layer.
Neue Ebene (n) hinzufügen.
Erschaffe etwas Erstaunliches. (Tatsächlich sollten Sie sich nicht zu sehr mitreißen lassen. Eigentlich ist es eine gute Idee, etwas Grundlegendes wie meine Wetterkarte zu erstellen und dem Rest des Tutorials zu folgen, um ein Gefühl für das Geschehen zu bekommen. Erstellen Sie dann 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 Lernprogramm haben, gehen Sie zu einem PNG)..
Werfen Sie einen Blick auf das Wetterkartenbild, das ich zu diesem Zeitpunkt erstellt habe, das im Quelldownload verfügbar ist.
Aufschneiden der Karte
Es gibt mehrere Möglichkeiten, wie Sie Ihr Bild aufteilen können, um die Kartenkacheln zu erstellen. Wenn Sie ein paar Hintergrundinformationen über das, was Sie tun, erhalten möchten, lesen Sie weiter. Wenn Sie nicht wissen, warum oder wie es funktioniert, fahren Sie einfach mit dem nächsten Abschnitt fort!
Projektionssysteme
Ein Projektionssystem im geografischen Sinne ist das Erstellen einer flachen Karte aus einem runden Objekt, d. H. Dem Globus. Hierfür gibt es alle möglichen (ehrlich verwirrenden) Formeln und Algorithmen. Alles, was Sie wissen müssen, ist, dass unterschiedliche Projektionssysteme zu unterschiedlichen flachen Karten der Welt führen.
Die Mercator-Projektion (oben) und die Gall-Peters-Projektion (unten) erzeugen recht unterschiedliche zweidimensionale Karten. (Die Raster auf den obigen Bildern beziehen sich nicht auf die Google-Kartenkacheln, die quadratisch sind.).
Um eine Überlappung für eine Google-Karte zu erstellen, mü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 Website Tiles à la Google Maps.
Jede Seite Ihrer Karte finden
Bevor Sie Ihre Kacheln erzeugen können, müssen Sie die Position der Nord-, Süd-, West- und Ostseite Ihrer Karte ermitteln. Da Sie das "Spherical Mercator" -System verwenden, müssen diese in sphärischen Metern liegen, im Gegensatz zu Längen- oder Breitengrad.
So lesen Sie die Ausgabe auf der Mashup-Website: Oben links = Westseite, Oben rechts Anzahl = Südseite, Unten links Zahl = Ostseite, Unten rechts Zahl = Nordseite.
Sie können diese Positionswerte mit diesem Mashup finden. Ich habe festgestellt, dass die einfachste Methode darin besteht, die Ansicht zu vergrößern und jeweils eine Seite zu finden. So finden Sie den Wert für die Westseite Ihrer Karte, notieren Sie sich den Wert, und suchen Sie dann den Wert für die Südseite usw..
Wenn Sie diese vier Werte gefunden haben, können Sie Ihre Karte jetzt in Kacheln aufteilen. Es stehen mehrere Optionen zur Verfügung.
Schnittoption 1: MapTiler
Zum Glück ist die MapTiler-Software sehr einfach zu bedienen! Zum Zeitpunkt der Erstellung dieses Tutorials aktualisiert MapTiler seine Software. Unabhä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 wählen Sie Google Maps kompatible Option.
Fügen Sie dann das im vorherigen Schritt erstellte Kartenbild hinzu.
Sie werden gebeten, das zu geben Georeferenz der Grenzen Ihrer Karte, d. h. der Position der gerade gefundenen Seite in kugelförmigen Metern. In Version 0.41 (die neuere der beiden Versionen) wird dies als a bezeichnet Begrenzungsbox. Seien Sie vorsichtig bei der Reihenfolge, in der Sie die Werte eingeben!
Wenn Sie nach Ihrem räumlichen Bezugs- / Koordinatensystem gefragt werden ESPG: 3857 . (Wenn Sie die alte Version 1 (Beta) von MapTiler verwenden, dann verwenden Sie EPSG: 900913).
Wählen Sie dann die Zoomstufen aus, für die Sie Kacheln erstellen möchten. Der Maximalwert sollte der Wert sein, in dem Sie Ihre Vorlagenzuordnung gespeichert haben, als Sie sie erstellt haben (oben). Auf der Seite Kacheln à la Google Maps können Sie herausfinden, was Sie für den minimalen Zoomwert benötigen.
Fahren Sie bis zum Ende des Assistenten fort und starten Sie den Machen. Dies kann eine Weile dauern; eine gute Gelegenheit, um einen Kaffee zu bekommen!
Hinweis: Wenn Sie die neue Version von MapTiler verwenden, ist ein Gotcha vorhanden. Ihre Kartenkacheln sind mit einem Wasserzeichen versehen. Ich schätze mal, vielleicht für ein Uni-Projekt oder einen technischen Machbarkeitsnachweis, das ist sowieso kein Thema. Es gibt jedoch einige Möglichkeiten, dies zu umgehen. Der naheliegendste Weg ist, das Upgrade für 20 Dollar zu kaufen, glaube ich. Die andere Option ist die Verwendung des GDAL2Tiles-Python-Skripts. Ich persönlich bevorzuge das Upgrade, da ich meine Zeit lieber mit kreativem Material verbringen möchte, anstatt die Irritationen des Einrichtens der Skriptumgebung zu ertragen, aber Sie fühlen sich vielleicht anders.
Spitze: Wenn bei der Verwendung der MapTiler-Software Probleme auftreten, ist das Benutzerforum äußerst nützlich.
Schnittoption 2: GDAL2Tiles
Eine Alternative zu MapTiler ist das Skript GDAL2Tiles. Die MapTiler-Software basiert auf diesem Skript, das über die Eingabeaufforderungsschnittstelle ausgeführt wird.
GDAL2Tiles ist das Python-Skript, das im Herzen der MapTiler-Benutzeroberfläche liegt. Sie können dieses Skript direkt über die Eingabeaufforderungsschnittstelle verwenden.
GDAL2Tiles bietet weitere Möglichkeiten, ist jedoch etwas komplizierter zu bedienen. Lesen Sie also nur weiter, wenn Sie ein Gefühl von Abenteuer haben!
In der ersten Phase wird die Umgebung zur Ausführung des GDAL2Tiles-Skripts eingerichtet. Wie Sie dies tun, hängt von Ihrem Betriebssystem ab. Wenn Sie einen 32-Bit-Windows-Computer verwenden (klicken Sie hier, wenn Sie sich nicht sicher sind), können Sie OSGeo4W verwenden.
Sie müssen zuerst Python installieren und prüfen, ob sich Python in Ihrer Pfadvariablen befindet.
Dann laden Sie OSGeo4W herunter.
Führen Sie das Installationsprogramm aus und wählen Sie aus Erweiterte Installation.
Wählen Libs und wählen Sie Gdal und Gdal-Python in den ausgewählten Paketen.
Fahren Sie fort und schließen Sie die Installation ab.
Wenn Sie fertig sind, sollten Sie das OSGeo4W-Symbol auf Ihrem Desktop haben. 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 dem Blog von Jaerock Kwon zitiert, der die uneingeschränkte Anerkennung dieser detaillierten Anweisungen verdient.
Installieren Sie Python von x86-64.
Überprüfen Sie, ob sich Python in Ihrer Pfadvariablen befindet.
Führen Sie python.exe aus. (Klicken Sie beispielsweise auf C: \ Python27 \ python.py.) Wir müssen die Compiler-Version herausfinden, aus der der Python erstellt wurde. In meinem Fall ist die Python-Version 2.7.5. Sie wurde mit Python 2.7.5 (Standardeinstellung 15. Mai 2013, 22:44:16) [MSC v.1500 64 Bit (AMD64)] unter Win32 kompiliert und erstellt.
GDAL-Binärpakete für 64-Bit-Maschinen finden Sie unter http://vbkto.dyndns.org/sdk/. Wählen Sie in der Tabelle eine entsprechende Version aus. In meinem Fall ist release-1500-x64-gdal-1-10-mapserver-6-2 die richtige Version in der Zeile "MSVC2008 (Win64) -stable", da der Python von 1500 erstellt wurde.
Laden Sie das generische Installationsprogramm für die GDAL-Kernkomponenten herunter. In meinem Fall - gdal-110-1500-x64-core.msi
Laden Sie das Installationsprogramm für die GDAL-Python-Bindungen herunter (zur Installation des GDAL-Kerns erforderlich). In meinem Fall GDAL-1.10.0.win-amd64-py2.7.msi wählte ich dies, da 1.10.0 der neueste ist und mein Python 2.7.5 ist.
Installieren Sie die GDAL-Kernkomponenten. Es gibt keine Option zum Auswählen des Zielordners für den GDAL-Core. Es wird im Ordner "C: \ Programme \ GDAL" installiert.
Installieren Sie die GDAL-Python-Bindungen.
Nach dem Binden können Sie den GDAL-Ordner in C: \ Program Files dorthin verschieben, wo Sie möchten.
Zum Schluss klicken Sie auf die Start Menü und dann Alle Programme und dann GDAL. Dies sollte die Befehlszeileingabeaufforderung starten.
Vorausgesetzt, Sie haben den (manchmal traumatischen!) Prozess der Einrichtung der GDAL2Tiles-Softwareumgebung durchlaufen, ist es Zeit, etwas damit zu tun.
Die Eingabeaufforderung von GDAL. Das OSGeo4W sieht dem sehr ähnlich. Die Befehle sind für beide gleich.
Unabhängig davon, ob Sie die OSGeo4W- oder die GDAL-Umgebung haben, sollte Ihre Eingabeaufforderung der obigen Abbildung ähneln. Sie können nun das GDAL2Tiles-Skript verwenden.
Zuerst müssen Sie in den Ordner navigieren, in dem die Karte gespeichert ist, die Sie aufteilen möchten. (Diese Befehle sind nützlich, um dorthin zu gelangen, wo Sie sein müssen: dir gibt Ihnen eine Liste von allem im aktuellen Verzeichnis, CD bedeutet Verzeichnis wechseln, CD… bedeutet eine Ebene den Baum hinauf bewegen).
Sobald Sie sich im richtigen Ordner befinden, können Sie mit dem Erstellen Ihrer Kacheln beginnen. Um die Demo-Karte in diesem Lernprogramm zu erstellen, sind dies die Befehle, die ich verwendet habe -
Um zu erklären, was diese Befehle bewirken, lesen Sie die gdal_translate Seite und die gdal2tiles.py Seite. Es gibt auch einen GDAL-Warp-Befehl, der eng miteinander verbunden ist, aber in diesem Fall nicht erforderlich ist. Ein paar Dinge zu beachten sind:
Die Drei -gcp Die Eigenschaften beziehen sich auf drei Ecken Ihrer Karte. Das erste Wertepaar nach jedem gcp Diese Eigenschaft bezieht sich auf die Abmessungen in Pixeln Ihrer Eingabebilddatei. Das zweite Wertepaar gibt die Koordinaten in sphärischen Messinstrumenten an (nicht Längengrad und Breitengrad - siehe oben)..
So wenden Sie dies auf Ihre Karte an:
gdal_translate -of_r_r_t_r_t_r_sr_srs_t_r_t_r_s_ein_p_________________________________________________________________________________________________________Pixel 0 östlicher Norden -gcp___________________Up_________________Pixel
Nachdem Sie den zweiten Befehl ausgelöst haben, wird Ihr Computer zum Leben erweckt und beginnt Ihr Bild zu zerschneiden, um die Kartenkacheln zu erstellen. Vielleicht möchten Sie sich die genauen Befehle ansehen, die ich in die OSGeo4W- und GDAL-Umgebungen eingegeben habe, wenn Sie nicht sicher sind, wie Sie mit der Eingabeaufforderung durch die Ordner navigieren.
Die Ausgabe verstehen
Unabhängig von der Methode, die Sie zum Generieren Ihrer Kacheln verwendet haben, sind die Ordner gleich.
Einige der erzeugten 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 den Wert "x" und "y". (Ja - noch ein anderes Koordinatensystem!) Die erste Ebene der Ordner ist die Zoom-Ebene, dann die nächste Ebene der Ordner die X-Koordinate und der Dateiname die Y-Koordinate.
Wenn Sie sich die Karte auf dieser Website ansehen, sollten Sie feststellen, dass die Namen Ihrer Kacheln übereinstimmen. Wechseln Sie mit anderen Worten zum gewünschten Speicherort, passen Sie die Zoomstufe an den Ordnernamen an und überprüfen Sie die Werte für Google 'x' und 'y'. Sie sollten sehen, dass sie mit Ihren Unterordnern und Dateinamen für die entsprechenden Kartenkacheln übereinstimmen.
Um zu überprüfen, ob Ihre Kacheln in Ordnung sind, empfehle ich dringend, eine oder zwei der für die niedrigste Zoomstufe generierten Kacheln wieder in Ihre Map-Datei (z. B. die Photoshop-Datei) zu kopieren, die in der vorherigen Phase erstellt wurde. Überprüfen Sie, ob sie genau auf Ihre Karte passen. Schauen Sie sich die von mir bereitgestellten Quelldateien an, um ein Beispiel dafür zu erhalten.
Wenn alles gut ist - Glückwunsch - die harte Arbeit ist erledigt!
Hilfe, meine Kartenkacheln wurden nicht korrekt benannt!
Ach je. Dies ist der Fall, wenn Sie die ältere Version der MapTiler-Software oder das GDAL2Tiles-Skript verwendet haben. Ihre Dateien (aber nicht die Ordner) werden nach der TMS-Namenskonvention benannt. Wenn Sie die Kacheln auf dieser Seite betrachten, können Sie feststellen, dass jede Kachel zwei x- und y-Werte hat. dh. ein Google-Paar und ein TMS-Paar. Wir müssen sie nur umbenennen in die Namenskonvention von Google Map.
Diese Umbenennung kann manuell erfolgen, dauert jedoch für die meisten Karten viel zu lange. Glücklicherweise gibt es ein praktisches Shell-Skript, das die Arbeit für Sie erledigt. Sie müssen ein wenig über grundlegende Linux-Befehle wissen, z. B. wie Sie den Ordner ändern. Erstellen Sie vor dem Ausführen des Shell-Skripts eine Kopie Ihrer Kacheln, um daran zu arbeiten.
Kopieren Sie das obige Skript und fügen Sie es in den Editor ein. Speichern Sie es unter dem Namen "Rename" und der Erweiterung ".sh". Stellen Sie beim Speichern der 'SH'-Datei in Notepad sicher, dass' Alle Dateien 'neben' Als Typ speichern 'ausgewählt ist, und geben Sie den Namen in Anführungszeichen ein, z. "Umbenennen.sh".
Wenn Sie einen Mac verwenden, kann dieses Shell-Skript in Terminal ausgeführt werden Anwendungen dann Dienstprogramme dann Terminal).
Wenn Sie sich auf einem Windows-Computer befinden, müssen Sie zum Ausführen von Shell-Skripts (oder '.sh'-Dateien) Cygwin verwenden, eine Linux-ähnliche Umgebung fü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.
Bewegen Sie sich zum Cygwin \ bin Mappe. (dh. CD bedeutet Verzeichnis wechseln, CD… bedeutet, den Baum eine Ebene nach oben zu verschieben, und ls bedeutet, die Dateien und Ordner im aktuellen Verzeichnis anzeigen.)
Umbenennen.sh ausführbar machen, indem Sie ausführen chmod 755 umbenennen.sh
Sie müssen es auch in eine Linux-Datei konvertieren, bevor Sie es ausführen. Andernfalls werden durch die Zeilenumbrüche '\ r'-Fehler verursacht. Vergewissern Sie sich, dass Sie sich noch im Internet befinden Cygwin \ bin Ordner und ausführen d2u umbenennen.sh
Wechseln Sie dann zu dem Ordner, der Ihre Kacheln enthält (siehe Screenshot oben)..
Geben Sie dann ein, um das Skript auszuführen umbenennen.sh
Nachdem das Shell-Skript ausgeführt wurde, können Sie überprüfen, ob die Aufgabe erledigt ist, indem Sie Ihre Dateien erneut betrachten. Prüfen Sie, ob ihre Namen jetzt mit den Google-Koordinaten auf dieser Seite übereinstimmen.
Wenn Sie die Dateinamen in den 'Part 3-Dateien' und die 'Part 4-Dateien' in den Quelldateien vergleichen, können Sie den Unterschied erkennen.
Komprimieren Ihrer Kartentitel
Um sicherzustellen, dass Ihre Karte so reibungslos wie möglich läuft, können Sie Ihre Kartenkacheln komprimieren.
Es gibt verschiedene kostenlose Komprimierungsprogramme für PNG-Bilder, aber ich hatte Mühe (und schlug fehl), eines zu finden, das völlig frei war und die Arbeit erledigte. Beispielsweise hat die beliebte PNGGauntlet-Software die Ordnerstruktur nicht beibehalten, wohingegen andere kostenlose Dienstprogramme die maximale Anzahl von Dateien begrenzt haben.
Am Ende musste ich die Kugel beißen und die PNGOUTWin-Software kaufen. Dies kostete rund £ 10, was angesichts der Fantasien, die er eingespart hat, ein Schnäppchen ist! PNGOUTWin behält sowohl die Dateistruktur als auch die Komprimierung aller Dateien bei.
Wenn Sie PNGOUTWin verwenden, ist es ziemlich intuitiv. Meine einzige Warnung ist, dass Sie eine Kopie Ihrer Kacheln erstellen und dann die Software auf der Kopie ausführen. Beachten Sie auch, dass die Software buchstäblich gestartet wird, sobald Sie den Ordner ausgewählt haben!
JavaScript-Magie, um alles zusammenzubringen
Okay, wir sind fast da. Alles, was bleibt, ist die kleine Sache, Ihre schönen neuen Kartenkacheln an Ihre Google-Karte anzuhängen.
Der Basiscode
Sehen Sie sich zunächst ein einfaches Beispiel für eine gekachelte Kartenüberlagerung an (Quelldateien sind über den Link oben auf dieser Seite verfügbar)..
Wenn Sie die Ansicht vergrößern oder verkleinern, bleibt die Kartenüberlagerung erhalten.
// Einrichten der Regenkarten-Überlagerung var rainMapOverlay = new google.maps.ImageMapType (getTileUrl: function (coord, zoom)) return 'tile / rain' + '/' + zoom + '/' + coord.x + '/' + coord.y + '. png';, tileSize: new google.maps.Size (256, 256));
Dieses Snippet verwendet die ImageMapType-Klasse zum Erstellen der benutzerdefinierten Überlagerung. Das coord.x bezieht sich auf den Ordnernamen und die coord.y bezieht sich auf den Dateinamen. Diese werden im Code zusammengefügt, um den Pfad zu jeder Kachel zu erstellen.
Anschluss an die UK Festival Map
Dies ist das Endprodukt, auf das Sie abzielen. Um dies zu erstellen, können Sie dieselben Techniken verwenden, die am Ende des vorherigen Lernprogramms erläutert werden.
Wir erstellen zuerst eine Variable (rainoverlayToggle) zu halten, ob das Wetter-Overlay aktuell angezeigt wird oder nicht. Und dann erstellen Sie eine neue Option in der HandelAnforderungen Funktion, um mit der Situation umzugehen, wenn der Schirmknopf (Regenschirm) wird angeklickt.
// Zeigt die Niederschlagskarte an, wenn auf die Schaltfläche Unbrella geklickt wird, und entfernt sie, wenn sie bereits angezeigt wird. else if (buttonPressed === "regen") // Wenn die Niederschlags-Karte NICHT bereits angezeigt wird, dann zeigen Sie sie… if (rainOverlayToggle === 0) // Überlagert die Niederschlagskarte oben auf der Google-Karte festivalMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Zeigt den Wetterschlüssel an. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); rainer_overayToggle = 1; // Wenn die Niederschlagskarte bereits angezeigt wird, blenden Sie sie aus… else // Entfernen Sie die Overlay-Karte. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // Entferne den Wetterschlüssel festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); rainer_overayToggle = 0;
Was als nächstes?
Gut gemacht, um das Ende zu erreichen! Wenn Sie irgendwelche Fragen haben, fragen Sie bitte in den Kommentaren nach. Im nächsten Tutorial wird beschrieben, wie Sie sich mit der Flickr-API verbinden. So können Sie Fotos automatisch von Flickr holen und auf Ihrer Karte anzeigen.
Share
Vorlagenbild, in dem Sie Ihre Karte erstellen. Dieses Bild hat eine Auflösung von 9984x11776 Pixeln 
Die Mercator-Projektion (oben) und die Gall-Peters-Projektion (unten) erzeugen recht unterschiedliche zweidimensionale Karten. (Die Raster auf den obigen Bildern beziehen sich nicht auf die Google-Kartenkacheln, die quadratisch sind.). 
GDAL2Tiles ist das Python-Skript, das im Herzen der MapTiler-Benutzeroberfläche liegt. Sie können dieses Skript direkt über die Eingabeaufforderungsschnittstelle verwenden. 
Die Eingabeaufforderung von GDAL. Das OSGeo4W sieht dem sehr ähnlich. Die Befehle sind für beide gleich. 
Accentsconagua
