I vår tidigare handledning såg vi på hur du kan lägga till markörer och anpassa färgerna och menyerna på en Google-karta med hjälp av tjänstens API. Denna handledning tar saker ett steg längre, förklarar hur du kan skapa din egen anpassade karta och täcka över det på en Google-karta (till exempel min 1896-karta över Portsmouth).
I den här handledningen lägger vi till ett "weather predictions" -överlägg till kartan vi byggt tidigare. Vädret kartan jag använder är helt fiktiv, men de tekniker som omfattas kommer att ge dig friheten att skapa alla möjliga intressanta saker! Du kommer att kunna bygga historiska kartor, skräddarsydda kartor, närbilder av specifika områden som universitetskampus - listan är oändlig!
Google Maps består av många separata plattor. Skärmdump från den utmärkta webbplatsen "Tiles à la Google Maps".
Några saker du behöver veta innan du börjar:
En Google-karta görs med många bilder "kakel" (se bilden ovan). Med andra ord är kartan uppdelad i ett osynligt rutnät och varje rutnätkant är en separat bildfil med 256x256 pixlar.
Du behöver en uppsättning bildkakor för varje zoomnivå. Zoomnivån är ett tal, från noll uppåt, vilket ändras när du zoomar in och ut ur kartan (se bilden ovan).
Din kartläggning börjar sitt liv som en riktigt stor bild (en jpeg eller png), som du sedan slits upp i plattor. Det är en repetitiv process, i den meningen att bilden skivas upp en gång för att skapa en uppsättning kakel för den första zoomnivån och sedan skivas den upp igen i mindre segment för att skapa den andra uppsättningen kakel för nästa zoomnivå och så vidare.
Denna handledning förklarar varje steg, inklusive programvaruverktygen som (lyckligtvis!) Är tillgängliga för att automatisera saker och göra livet mycket enklare. Källfilerna för varje steg finns i nedladdningspaketet.
Hämtar en mall
För att komma igång är det första steget att skapa en mall där du kan skapa ditt eget överlag.
Mallbild där du skapar din karta. Den här bilden är faktiskt 9984x11776 pixlar
Ditt mål är att skapa en mall i Photoshop (eller motsvarande grafikprogram) som är exakt samma storlek och form som Google-kartan du kommer att lägga på den ovanpå, när den är på dess högsta zoomnivå. (maptiler.org är användbar om du inte är säker på vad den högsta zoomnivån du behöver är).
För att göra detta kan du spara en mallkarta med hjälp av maptilers mashup och förstora den i Photoshop till önskad maximal zoomnivå. Till exempel:
Använd din grafikprogram för att öppna mallkartabilden du har sparat.
Gå till Tiles à la Google Maps-webbplatsen och ta en skärmdump av ett segment av din Google-karta, med din önskade maximala zoomnivå.
Klistra in skärmdumpen i din Photoshop-fil.
Förstora sedan din mallkarta så att den justerar just nu med motsvarande zoomade kartsegment.
Därefter raderas det zoomade segmentet. Kvaliteten på din mallkarta kommer inte att vara bra, men det spelar ingen roll eftersom du bara behöver det för konturen och du tar bort det så småningom.
Tips: Ett annat alternativ är Google Maps Downloader, men var uppmärksam på Google T & C. Dessutom är detta alternativ inte genomförbart för stora och detaljerade kartor. en brittisk karta zoomad till nivå 12 kommer att vara för stor att öppna i Photoshop.
I det här skedet kommer jag inte att komplicera saker! Så i en liten förändring till den tidigare handledningen har jag ändrat maximal zoomnivå från 12 till 10 för att ge oss en hanterbar filstorlek att arbeta med.
Skapa din egen karta
När du har din karta jpg med den ovan beskrivna processen, öppna den i Photoshop eller din favoritgrafikprogram.
Mitt anpassade överlägg. Inte precis en utställning av konstnärlig talang jag vet, men det gör jobbet för den här demo. Din karta kommer att se fantastiskt ut. (Faktisk storlek 7248x10929 png-fil)
Du använder bilden som en mall och ritar din egen karta ovanpå den. Detta är för att säkerställa att kartan är perfekt i linje med Google-kartan.
Låsa ditt kartmallagret.
Lägg till ett nytt lager / s.
Skapa något fantastiskt. (Faktum är att du inte blir förrad för att börja med. Det är faktiskt en bra idé att skapa något grundläggande, som min väderkarta, och följ resten av handledningen för att få en känsla för vad som händer. Skapa sedan något fantastiskt !)
Dölj kartmallskiktet.
Spara din karta som en png eller jpg (om du har transparenta delar, till exempel havet i den här handledningen, gå sedan till en png).
Ta en titt på den väderkarta som jag skapade på det här steget, vilket är tillgängligt i källnedladdning.
Skärning av din karta
Det finns ett par sätt att skära upp din bild för att skapa kartplattorna. Om du vill ha lite bakgrundsinformation om vad du gör, läs vidare. Annars, om du inte bryr dig om varför eller hur det fungerar, gå bara till nästa avsnitt!
Projektionssystem
Ett projektionssystem, i geografisk mening, är hur en platt karta skapas från ett runt objekt, dvs jorden. Det finns alla slags (uppriktigt förvirrande) formler och algoritmer som används för att uppnå detta. Allt du behöver veta är att olika projektionssystem resulterar i olika platta kartor över världen.
Mercatorprojektionen (topp) och Gall-Petersprojektionen (botten) skapar ganska olika tvådimensionella kartor. (Raderna på ovanstående bilder är inte relaterade till Google-plattorna, som är fyrkantiga).
För att skapa en överlappning för en Google-karta måste du använda "Sfäriska Mercator" -systemet som använder Mercator-projektionen. Detta definieras som EPSG: 900913 eller EPSG: 3857. För mer information om projektionssystem, se Tiles à la Google Maps webbsida.
Hitta varje sida av din karta
Innan du kan skapa dina kakel måste du träna positionen på norra, södra, västra och östra sidorna av kartan. Eftersom du använder "sfäriska Mercator" -systemet måste dessa vara i sfäriska mätare i motsats till latitud eller longitud.
Så här läser du utmatningen på Mashup-webbplatsen: Vänster vänstra = väster sida, högra högsta antal = södra sidan, vänster längst ned = östra sidan, nedre högra antal = norra sidan.
Du kan hitta dessa positionsvärden med hjälp av denna mashup. Jag har funnit att den enklaste metoden är att zooma in och hitta en sida i taget. Så hitta värdet för västra sidan av din karta, notera det, hitta värdet för södra sidan och så vidare.
När du har hittat dessa fyra värden kan du nu "skära upp" din karta i kakel. Det finns några alternativ tillgängliga.
Skärning Alternativ 1: MapTiler
Lyckligtvis är MapTiler-programvaran enkel att använda! När du skrivit denna handledning uppdaterar MapTiler programvaran. Men oavsett vilken version du laddar ned, är dessa grundläggande steg:
Hämta Maptiler. Eller den nyare Beta-versionen.
Starta programmet och välj Google kartor kompatibelt alternativ.
Lägg sedan till den kartbild du skapade i föregående steg.
Du kommer att bli ombedd att ge georeference av gränserna för din karta, dvs positionen i sfäriska mätare på varje sida som du just har hittat. I version 0.41 (den senare av de två versionerna) kallas detta som a Bounding Box. Var försiktig med den ordning du anger värdena!
När du frågade om ditt spacial referens / koordinatsystem användning ESPG: 3857 . (Om du använder den gamla versionen 1 (beta) versionen av MapTiler, använd sedan EPSG: 900.913).
Välj sedan de zoomnivåer du vill skapa kakel för. Maxvärdet ska vara det värde du sparade din mallkarta vid när du skapade den (ovan). Plattorna på sidan Google Maps är användbara för att utreda vad du behöver för min zoom-värdet.
Fortsätt till guiden och starta Göra. Det kan ta ett tag. ett bra tillfälle att få en kaffe!
Notera: Om du använder den nya versionen av MapTiler finns det en gotcha; dina kartor är vattenmärkta. Jag gissar i vissa fall, kanske för ett Uni-projekt eller teknisk proof-of-concept, det är inte ett problem ändå. Det finns dock ett par sätt att komma runt detta. Det mest uppenbara sättet är att köpa uppgraderingen för $ 20 som jag tror. Det andra alternativet är att använda GDAL2Tiles python script. Min personliga preferens är att gå till uppgraderingen, eftersom jag hellre skulle spendera min tid på de kreativa sakerna, i stället för att uthärda irritationerna för att upprätta skriptmiljön, men du kan känna sig annorlunda.
Tips: Om du får problem med att använda MapTiler-programmet, är användarforumet mycket användbart.
Skärning Alternativ 2: GDAL2Tiles
Ett alternativ till MapTiler är GDAL2Tiles-skriptet. MapTiler-programvaran är faktiskt byggd ovanpå det här skriptet, som går igenom kommandotolgränssnittet.
GDAL2Tiles är Python-skriptet som ligger i hjärtat av MapTiler GUI. Du kan använda det här skriptet direkt via kommandotolgränssnittet.
GDAL2Tiles erbjuder ytterligare möjligheter, men det är också lite knepigare att använda; så fortsätt bara att läsa om du har en känsla av äventyr!
Det första steget är att ställa in miljön för att köra GDAL2Tiles-skriptet. Hur du gör detta beror på ditt operativsystem. Om du använder en 32-bitars Windows-maskin (klicka här om du är osäker) kan du använda kanalen OSGeo4W.
Du behöver först installera Python och kontrollera python är på din variabel för sökvägen.
Ladda sedan OSGeo4W.
Kör installationsprogrammet och välj Avancerad installation.
Välj libs och välj gdal och gdal-python i valda paket.
Fortsätt och slutför installationen.
När det är klart borde du ha OSGeo4W-ikonen på skrivbordet. Detta är en batchfil för att starta kommandotolken.
Om du använder en 64-bitars Windows-maskin (klicka här om du är osäker), är installationen lite annorlunda. Dessa instruktioner är citerade (med vänlig tillåtelse) direkt från Jaerock Kwons blogg, som förtjänar full kredit för att ge sådana detaljerade instruktioner.
Installera Python från x86-64.
Kontrollera python är på din väg variabel.
Kör python.exe. (t ex klicka på C: \ Python27 \ python.py) Vi måste ta reda på kompilatorversionen som byggde pythonen. I mitt fall är Python-versionen 2,7,5 och den kompilerades och byggdes med Python 2.7.5 (standard, 15 maj 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] på win32.
GDAL binära paket för 64bit-maskiner finns på http://vbkto.dyndns.org/sdk/. Välj en motsvarande version i tabellen. I mitt fall är release-1500-x64-gdal-1-10-mapserver-6-2 den rätta versionen i "MSVC2008 (Win64) -stabil" rad eftersom Python byggdes 1500.
Hämta generiskt installationsprogram för GDAL-kärnkomponenterna. I mitt fall - gdal-110-1500-x64-core.msi
Hämta installationsprogrammet för GDAL pythonbindningarna (krävs för att installera GDAL-kärnan). I mitt fall GDAL-1.10.0.win-amd64-py2.7.msi - Jag valde detta eftersom 1.10.0 är det senaste och min Python är 2.7.5.
Installera GDAL-kärnkomponenterna. Det finns inget alternativ att välja destinationsmapp för GDAL-kärnan. Det kommer att installeras i mappen "C: \ Program Files \ GDAL".
Installera GDAL pythonbindningarna.
Efter bindningen kan du flytta GDAL-mappen i C: \ Programfiler till var du än vill.
Slutligen klickar du på Start menyn och sedan Alla program och då GDAL. Detta bör starta kommandoraden för kommandoraden.
Så förutsatt att du har kommit igenom (ibland traumatisk!) Processen med att konfigurera GDAL2Tiles mjukvarumiljö, är det dags att göra något med det.
Kommandoprompt för GDAL. OSGeo4W ser extremt ut som detta. Kommandon är desamma för båda.
Oavsett om du har OSGeo4W eller GDAL-miljön, ska kommandotolken se ut som ovanstående skärmdump. Du kan nu börja använda GDAL2Tiles-skriptet.
Först måste du navigera i mappen där kartan du vill skära upp sparas. (Dessa kommandon är användbara för att komma dit du behöver vara: dir ger dig en lista över allt i den aktuella katalogen, CD betyder byte katalog, CD… medel flyttar en nivå uppför trädet).
När du väl är i rätt mapp kan du börja skapa dina kakel. För att skapa demokartan i denna handledning är dessa kommandon som jag använde -
För att förklara vad dessa kommandon gör, se gdal_translate sida och gdal2tiles.py sida. Det finns också ett GDAL warp-kommando som är nära besläktat, men det är inte nödvändigt i det här fallet. Några saker att notera är:
De tre -GCP Egenskaper relaterar till tre hörn av din karta. Det första parvärdet efter varje GCP egenskapen avser dimensionerna i pixlarna i din inmatningsbildfil och det andra värdet är koordinaterna i sfäriska mätare (inte latitud och longitud - se ovan).
Så att tillämpa detta på din karta:
gdal_translate -of VRT -a_srs EPSG: 900913 -gcp 0 0 west north -gcp width_of_your_input_map_file_in_pixels 0 öst nord -gcp width_of_your_input_map_file_in_pixels height_of_your_input_map_file_in_pixels östra söder your_input_file_name.png your_output_file_name.vrt
Efter det att det andra kommandot har skjutits, kommer din dator att springa in i livet och börja klippa upp din bild för att skapa kartorna. Du kan gärna titta på exakta kommandon som jag skrev in i OSGeo4W och GDAL-miljöerna om du är osäker på att navigera runt mappar med kommandotolken.
Förstå utgången
Oavsett vilken metod du brukade generera dina plattor kommer de genererade mapparna att vara desamma.
Några av plattorna genererade. Dessa är zoomnivå 6, positionen "x" är 31 och positionen "y" är namnet på varje fil.
Alla plattor på en Google-karta har ett "x" och "y" -värde. (Ja - ännu ett annat koordinatsystem!) Den första nivån på mappar är zoomnivån, och därmed är nästa nivå av mappar "x" -koordinaten, och inuti är filnamnet "y" -koordinaten.
Om du tittar på kartan på denna webbplats bör du se att namnen på dina plattor matchar. Med andra ord, gå till önskad plats, justera zoomnivån så att den matchar ditt mappnamn, kolla sedan på googles "x" och "y" -värden. Du bör se att de matchar din undermapp och filnamn för motsvarande kartor.
För att dubbelklicka på dina kakel är OK, rekommenderar jag starkt att kopiera en eller två av kakelarna som genererats för den lägsta zoomnivån tillbaka till din kartfil (t ex Photoshop-filen) som skapades under föregående steg. Kontrollera att de passar exakt ovanpå kartan. Ta en titt i källfilerna som jag har angett för ett exempel på detta.
Om allt är bra då - grattis - det hårda arbetet är gjort!
Hjälp, Mina kartplattor är inte namngiven korrekt!
Kära nån. Detta kommer att hända om du använde den äldre versionen av MapTiler-mjukvaran eller GDAL2Tiles-skriptet. Dina filer (men inte mapparna) heter med TMS-namngivningskonventionen. Om du tittar på kakel på denna sida kan du se att varje kakel har två x och y värden; dvs. ett Google-par och ett TMS-par. Vi behöver bara byta namn på dem till Google Map Naming Convention.
Den här omdanningen kan göras manuellt, men det tar alltför lång tid för de flesta kartor. Lyckligtvis finns det ett praktiskt skalskript som gör jobbet för dig. Du behöver veta lite om väldigt grundläggande Linux-kommandon, till exempel hur man ändrar mapp. Innan du kör skalskriptet, gör en kopia av dina plattor för att fungera.
#! / bin / sh för thisPath i 'ls -d * / * / *' gör thisFile = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1<
Kopiera och klistra in det ovanstående skriptet i anteckningsblocket och spara det med namnet "byt namn" och ".sh" -tillägget. När du sparar "sh" -filen i anteckningsblocket måste du se till att "alla filer" bredvid "Spara som typ" är markerade och ange namnet i citat, t.ex. ”Rename.sh”.
Om du använder en Mac kan det här skalskriptet köras i Terminal (välj tillämpningar sedan verktyg sedan Terminal).
Om du är på en Windows-dator, måste du använda Cygwin, som är en Linux-liknande miljö för Windows, för att köra skalskript (eller .sh-filer)
Ladda ner och installera Cygwin
Kopiera filen "rename.sh" som du just sparat i cygwin \ bin-mappen.
Börja Cygwin.
Flytta till cygwin \ bin mapp. (dvs.. CD betyder byte katalog, CD… medel flyttar upp trädet en nivå, och ls medel visar filerna och mapparna i den aktuella katalogen.)
Gör rename.sh körbar genom att köra chmod 755 rename.sh
Du måste också konvertera den till en Linux-fil innan du kör den annars får du felmeddelanden som orsakas av raderna. Så kör se till att du fortfarande är i cygwin \ bin mapp och körning d2u rename.sh
Flytta sedan till mappen som innehåller dina kakel (Se skärmbilden ovan).
Därefter skriver du för att köra skriptet rename.sh
När skalskriptet har kört kan du kontrollera att det är gjort jobbet genom att ta en titt på dina filer igen. Kontrollera om deras namn nu matchar Google-koordinaterna på den här sidan.
Om du jämför filnamnen i "Del 3-filer" och "Del 4-filer" -mappen i källfilerna kan du se skillnaden.
Komprimera dina karttitlar
För att säkerställa att din karta går så smidigt som möjligt kan du komprimera dina kartor.
Det finns olika komprimeringsverktyg för png-bilder, men jag kämpade (och misslyckades) för att hitta en som var helt fri och gjorde jobbet. Till exempel behöll den populära PNGGauntlet-programvaran inte mappstrukturen, medan andra fria verktyg hade en gräns för det maximala antalet filer.
Till slut var jag tvungen att bita på kullen och köpa PNGOUTWin-programvaran. Detta kostar runt £ 10, vilket är ett fynd givet faffing runt att det sparade! PNGOUTWin både bevarar filstrukturen och låter dig komprimera alla dina filer samtidigt.
Om du använder PNGOUTWin är det ganska intuitivt. Mitt enda varningstecken är att du ska göra en kopia av dina plattor och sedan köra programvaran på kopian. Se också till att programvaran startar bokstavligen så snart du har valt mappen!
JavaScript Magic för att få allt tillsammans
Okej, vi är nästan där. Allt som stannar kvar är det lilla med att fästa dina vackra nya kartor till din Google-karta.
Grundkoden
Ta en titt på ett enkelt exempel på en kaklade kartläggning (källfiler finns tillgängliga från länken längst upp på denna sida).
Om du zooma in och ut visas kartläggningen överlagd.
// inställning av regnskartskartläggningen var rainMapOverlay = ny google.maps.ImageMapType (getTileUrl: funktion (koord, zoom) return 'kakel / regnfall + +/- + zoom +' / '+ koord.x +' / ' + coord.y + '. png';, tileSize: new google.maps.Size (256, 256));
Det här stycket använder klassen ImageMapType för att skapa det anpassade överlägget. De coord.x relaterar till mappnamnet och coord.y relaterar till filnamnet. Dessa förenas i koden för att skapa sökvägen till varje kakel.
Hooking det upp till UK Festival Map
Det här är den slutliga produkten du strävar efter. För att skapa detta kan du använda samma tekniker som förklaras i slutet av föregående handledning.
Vi skapar först en variabel (rainfallOverlayToggle) för att hålla om det är aktuellt att visa väderöverlagringen eller ej. Och sedan skapa ett nytt alternativ i handelRequests funktion för att hantera situationen när paraplyknappen (brolly) är klickat.
// Visar regnskartskortet när du trycker på unbrella-knappen och tar bort den om den redan visas. annars om (buttonPressed === "rainfall") // Om regnskartet inte visar aleady så visa det ... om (rainfallOverlayToggle === 0) // Överlagrar nedfallskartan ovanpå Google map festivalMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Visa väderknappen. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); rainfallOverlayToggle = 1; // Om regnskartet visas redan döljer du det ... annars // ta bort överlagskartan. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // ta bort vädernyckeln festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); rainfallOverlayToggle = 0;
Vad Nästa?
Bra gjort för att nå slutet! Om du har några frågor, vänligen fråga i kommentarerna. Nästa handledning tar en titt på att ansluta till Flickr API, så att du automatiskt kan ta bilder från Flickr och visa dem på din karta.
Share
Mallbild där du skapar din karta. Den här bilden är faktiskt 9984x11776 pixlar 
Mercatorprojektionen (topp) och Gall-Petersprojektionen (botten) skapar ganska olika tvådimensionella kartor. (Raderna på ovanstående bilder är inte relaterade till Google-plattorna, som är fyrkantiga). 
GDAL2Tiles är Python-skriptet som ligger i hjärtat av MapTiler GUI. Du kan använda det här skriptet direkt via kommandotolgränssnittet. 
Kommandoprompt för GDAL. OSGeo4W ser extremt ut som detta. Kommandon är desamma för båda. 
Accentsconagua
