I vår tidligere opplæring så vi på hvordan du kan legge til markører og tilpasse fargene og menyene til et Google-kart ved hjelp av tjenestens API. Denne opplæringen tar ting et skritt videre, forklarer hvordan du kan lage ditt eget tilpassede kart og overlegg det på et Google-kart (for eksempel min 1896-kart over Portsmouth).
I denne opplæringen legger vi til et «weather predictions» overlegg til kartet vi bygget tidligere. Værarkartet jeg bruker er helt fiktivt, men teknikkene som dekkes, gir deg friheten til å skape alle slags interessante ting! Du vil kunne bygge historiske kart, tilpassede trukket kart, nærbilder av bestemte områder som et universitetsområde - listen er uendelig!
Noen ting du må vite før du begynner:
Denne opplæringen forklarer hvert trinn, inkludert programvareverktøyene som (heldigvis!) Er tilgjengelige for å automatisere ting og gjøre livet enklere. Kildefilene for hvert trinn er tilgjengelig i nedlastingspakken.
For å komme i gang er det første trinnet å lage en mal der du kan lage ditt eget overlegg.
Malbil hvor du lager ditt kart. Dette bildet er faktisk 9984x11776 pikslerMålet ditt er å lage en mal i Photoshop (eller tilsvarende grafikkprogram) som er nøyaktig den samme størrelsen og formen som Google-kartet du skal legge på den på toppen av, når den er i sin høyeste zoomnivå. (maptiler.org er nyttig hvis du ikke er sikker på hva det høyeste zoomnivået du trenger er).
For å gjøre dette kan du lagre et malekart ved hjelp av kartleggerens mashup og deretter forstørre det i Photoshop til ønsket maksimal zoomnivå. For eksempel:
På dette stadiet kommer jeg ikke til å komplisere ting! Så i en liten forandring til den forrige opplæringen har jeg endret det maksimale zoomnivået fra 12 til 10 for å gi oss en håndterlig filstørrelse for å jobbe med.
Når du har kartet jpg ved hjelp av prosessen beskrevet ovenfor, åpner du den i Photoshop, eller det foretrukne grafikkprogrammet.
Du vil bruke dette bildet som en mal og tegne ditt eget kart på toppen av det. Dette er for å sikre at kartet ditt står perfekt sammen med Google-kartet.
Ta en titt på vær kartbildet jeg opprettet på dette stadiet, som er tilgjengelig i kilde nedlastingen.
Det er et par måter du kan skjære opp bildet ditt for å lage kartfliser. Hvis du vil ha litt bakgrunnsinformasjon om hva du gjør, les videre. Ellers, hvis du ikke bryr deg hvorfor eller hvordan det fungerer, bare hopp til neste avsnitt!
Et projeksjonssystem, i geografisk forstand, er hvordan et flatt kart er opprettet fra et rundt objekt, dvs. kloden. Det finnes alle slags (ærlig baffling) formler og algoritmer som brukes til å oppnå dette. Alt du trenger å vite er at forskjellige projeksjonssystemer resulterer i forskjellige flate kart over hele verden.
Mercatorprojeksjon (topp) og Gall-Peters-projeksjonen (bunn) skaper ganske forskjellige todimensjonale kart. (Rutenettene på bildene ovenfor er ikke relatert til Google-kartfliser, som er firkantede).For å opprette en overlapping for et Google-kart må du bruke "Sfærisk Mercator" -systemet som bruker Mercator-projeksjonen. Dette er definert som EPSG: 900913 eller EPSG: 3857. For å finne ut mer om projeksjonssystemer, se Tiles à la Google Maps nettside.
Før du kan generere fliser, må du utarbeide plasseringen av nord, sør, vest og østsiden av kartet. Som du bruker "Sfærisk Mercator" -systemet, må disse være i sfæriske målere i motsetning til breddegrad eller lengdegrad.
Du kan finne disse posisjonverdiene ved hjelp av denne mashupen. Jeg har funnet ut at den enkleste metoden er å zoome rett inn og finne en side av gangen. Så finn verdien for vestsiden av kartet ditt, noter det, og finn verdien for sørsiden, og så videre.
Når du har funnet disse fire verdiene, kan du nå "skjære opp" kartet til fliser. Det er et par alternativer tilgjengelig.
Heldigvis er MapTiler-programvaren veldig enkel å bruke! Når du skriver denne opplæringen, oppdaterer MapTiler sin programvare. Men uansett hvilken versjon du laster ned, er disse grunnleggende trinnene:
Merk: Hvis du bruker den nye versjonen av MapTiler, er det en gotcha; Kartplatene dine er vannmerket. Jeg gjetter i noen tilfeller, kanskje for et Uni-prosjekt eller teknisk proof-of-concept, dette er ikke et problem uansett. Det er imidlertid et par måter å komme rundt på dette. Den mest åpenbare måten er å kjøpe oppgraderingen for $ 20 jeg tror. Det andre alternativet er å bruke GDAL2Tiles python script. Min personlige preferanse er å gå til oppgraderingen, fordi jeg hellere vil bruke tiden min på de kreative tingene, i stedet for å fortsette å irritere å sette opp skriptmiljøet, men du kan føle seg annerledes.
Tips: Hvis du opplever problemer med å bruke MapTiler-programvaren, er brukerforumet ekstremt nyttig.Et alternativ til MapTiler er GDAL2Tiles-skriptet. MapTiler-programvaren er faktisk bygget på toppen av dette skriptet, som går gjennom ledetekstgrensesnittet.
GDAL2Tiles er Python-skriptet som ligger i hjertet av MapTiler GUI. Du kan bruke dette skriptet direkte gjennom ledetekstgrensesnittet.GDAL2Tiles tilbyr flere muligheter, men det er også litt vanskeligere å bruke; så bare fortsett å lese hvis du har en følelse av eventyr!
Det første trinnet er å sette opp miljøet for å kjøre GDAL2Tiles-skriptet. Hvordan du gjør dette, avhenger av operativsystemet ditt. Hvis du bruker en 32-biters Windows-maskin (klikk her hvis du ikke er sikker), kan du bruke kanalen OSGeo4W.
Hvis du bruker en 64-biters Windows-maskin (klikk her hvis du ikke er sikker), så er oppsettet litt annerledes. Disse instruksjonene er oppgitt (med vennlig tillatelse) direkte fra Jaerock Kwons blogg, som fortjener full kreditt for å gi slike detaljerte instruksjoner.
Så forutsatt at du har kommet gjennom (noen ganger traumatisk!) Prosessen med å sette opp GDAL2Tiles-programvaremiljøet, er det på tide å gjøre noe med det.
Kommandoprompten til GDAL. OSGeo4W ser ekstremt ut som dette. Kommandoene er de samme for begge.Enten du har OSGeo4W eller GDAL-miljøet, burde kommandoprompten din lignes på skjermbildet ovenfor. Du kan nå begynne å bruke GDAL2Tiles-skriptet.
Først må du navigere inn i mappen der kartet du vil kutte opp, blir lagret. (Disse kommandoene er nyttige for å komme dit du trenger å være: dir
gir deg en liste over alt i gjeldende katalog, cd
betyr endringskatalog, cd ...
betyr flytte ett nivå oppover treet).
Når du er i riktig mappe, kan du begynne å lage fliser. For å lage demokartet i denne opplæringen, er disse kommandoene jeg brukte -
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
For å forklare hva disse kommandoene gjør, se gdal_translate
side og gdal2tiles.py
side. Det er også en GDAL warp-kommando som er nært beslektet, men det er ikke nødvendig i dette tilfellet. Noen ting å merke seg er:
-GCP
egenskaper relaterer seg til tre hjørner av kartet ditt. Det første parverdier etter hver GCP
Egenskapen er relatert til dimensjonene i piksler av inngangsbilledfilen, og det andre parverdier er koordinatene i sfæriske målere (ikke breddegrad og lengdegrad - se ovenfor).Så å bruke dette på kartet ditt:
gdal_translate -of VRT -a_srs EPSG: 900913 -gcp 0 0 vest nord -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 øst sør your_input_file_name.png your_output_file_name.vrt
gdal2tiles.py -p mercator -z zoom_range name_of_output_file.vrt
Etter å ha brent den andre kommandoen, vil datamaskinen din komme inn i livet og begynne å kutte opp bildet ditt for å lage kartfliser. Du vil kanskje se på de nøyaktige kommandoene jeg skrev inn i OSGeo4W og GDAL-miljøene hvis du er usikker på å navigere rundt mapper ved hjelp av kommandoprompten.
Uansett hvilken metode du brukte til å generere fliser, vil de genererte mappene være de samme.
Alle fliser på et Google-kart har en 'x' og 'y' -verdi. (Ja - enda et annet koordinatsystem!) Det første nivået av mapper er zoomnivået, så inne i det neste nivået av mapper er 'x'-koordinaten, og inne i filnavnet er' y'-koordinaten.
Hvis du ser på kartet på denne nettsiden, bør du se at navnene på flisene stemmer overens. Med andre ord, gå til ønsket sted, juster zoomnivået slik at det samsvarer med mappens navn, så se på Google 'x' og 'y' -verdiene. Du bør se at de samsvarer med din undermappe og filnavn for de tilhørende kartfliser.
For å dobbeltsjekke at flisene dine er OK, anbefaler jeg på det sterkeste å kopiere en eller to av flisene som er generert for det laveste zoomnivået tilbake til kartfilen din (for eksempel Photoshop-filen) som ble opprettet under forrige trinn. Sjekk at de passer akkurat på toppen av kartet. Ta en titt i kildefilene jeg har gitt for et eksempel på dette.
Hvis alt er bra da - gratulerer - det harde arbeidet er gjort!
Åh kjære. Dette vil skje hvis du brukte den eldre versjonen av MapTiler-programvaren eller GDAL2Tiles-skriptet. Dine filer (men ikke mappene) er navngitt ved hjelp av TMS-navngivningskonvensjonen. Hvis du ser på fliser på denne siden, kan du se at hver flis har to x- og y-verdier; dvs. et Google-par og et TMS-par. Vi må bare omdøpe dem til Google Map-navngivningskonvensjonen.
Denne omdøpet kan gjøres manuelt, men det vil ta altfor lang tid for de fleste kart. Heldigvis er det et praktisk skript som vil gjøre jobben for deg. Du trenger å vite litt om svært grunnleggende Linux-kommandoer, for eksempel hvordan du endrer mappe. Før du kjører skalskriptet, lag en kopi av flisene dine for å jobbe med.
#! / bin / sh for thisPath i 'ls -d * / * / *' gjør detteFile = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1<Kopier og lim inn det ovennevnte skriptet i Notisblokk og lagre det med navnet 'omdøpe' og '.sh' -utvidelsen. Når du lagrer "sh" -filen i notisblokken, må du kontrollere at alle filer ved siden av "Lagre som type" er valgt, og sett navnet i anførselstegn, f.eks. “Rename.sh”.
Hvis du bruker en Mac, kan dette shell-skriptet kjøres i Terminal (velg applikasjoner deretter verktøy deretter Terminal).
Hvis du er på en Windows-maskin, så å kjøre shell-skript (eller '. SH' -filer), må du bruke Cygwin, som er et Linux-lignende miljø for Windows:
- Last ned og installer Cygwin
- Kopier filen 'rename.sh' du nettopp har lagret i cygwin \ bin-mappen.
- Start Cygwin.
- Flytt til cygwin \ bin mappe. (dvs.
cd
betyr endringskatalog,cd ...
betyr trekk opp treet ett nivå, ogls
betyr vis filene og mappene i gjeldende katalog.)- Gjør rename.sh kjørbar ved å kjøre
chmod 755 rename.sh
- Du må også konvertere den til en Linux-fil før du kjører den ellers får du feilene \\\ som skyldes linjeskiftene. Så løp sørg for at du fortsatt er i cygwin \ bin mappe og kjøre
d2u rename.sh
- Flytt deretter til mappen som inneholder fliser (se skjermbildet over).
- Deretter skriver du for å kjøre skriptet
rename.sh
Etter at skalskriptet har løpt, kan du sjekke at det er gjort jobben ved å ta en titt på filene dine. Sjekk om navnene deres nå stemmer overens med Google-koordinatene på denne siden.
Hvis du sammenligner filnavnene i "Del 3-filer" og "Del 4-filer" -mappene i kildefilene, kan du se forskjellen.
Komprimere dine karttitler
For å sikre at kartet går så jevnt som mulig, kan du komprimere kartfliser.
Det finnes ulike gratis komprimeringsverktøy for png-bilder, men jeg kjempet (og feilet) for å finne en som var helt fri og gjorde jobben. For eksempel beholdt den populære PNGGauntlet-programvaren ikke mappestrukturen, mens andre gratisverktøy hadde en grense på det maksimale antall filer.
Til slutt måtte jeg bite kulen og kjøpe PNGOUTWin-programvaren. Dette koster rundt £ 10, som er et røverkjøp gitt faffing rundt at det reddet! PNGOUTWin bevarer både filstrukturen og lar deg komprimere alle filene dine samtidig.
Hvis du bruker PNGOUTWin, er det ganske intuitivt. Mitt eneste advarsel er at du skal lage en kopi av fliser og deretter kjøre programvaren på kopien. Vær også oppmerksom på at programvaren bokstavelig talt starter så snart du har valgt mappen!
JavaScript Magic å bringe alt sammen
Ok, vi er nesten der. Alt som gjenstår, er det lille ved å knytte de vakre, nye kartene dine til Google-kartet.
Grunnkoden
Først, ta en titt på et enkelt eksempel på et flislagt kartoverlegg (kildefiler er tilgjengelig fra linken øverst på denne siden).
Hvis du zoomer inn og ut, blir kartoverlegget satt.
// sette opp regnskapsoverlegget var rainMapOverlay = nytt google.maps.ImageMapType (getTileUrl: funksjon (koord, zoom) return 'fliser / nedbør' + '/' + zoom + '/' + coord.x + '/' + coord.y + '. png';, tileSize: new google.maps.Size (256, 256));Denne brikken bruker klassen ImageMapType for å lage det tilpassede overlegget. De
coord.x
relaterer til mappenavn ogcoord.y
gjelder filnavnet. Disse er samlet sammen i koden for å lage banen til hver flis.Hooking det opp til UK Festival Map
Dette er det endelige produktet du sikter på. For å opprette dette kan du bruke de samme teknikkene som er forklart nær slutten av den forrige opplæringen.
Vi lager først en variabel (
rainfallOverlayToggle
) for å holde om væretoverlegget vises for øyeblikket eller ikke. Og så oppretter du et nytt alternativ ihandelRequests
funksjon for å håndtere situasjonen når paraplyknappen (brolly
) er klikket.// Viser nedbørskartet når unbrella-knappen klikkes, og fjernet det hvis det allerede vises. ellers hvis (buttonPressed === "nedbør") // Hvis nedbørskartet IKKE vises aleady så vis det ... hvis (rainfallOverlayToggle === 0) // Overlegger nedbørskartet på toppen av Google map festivalMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Vis værtasten. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); nedbørOverlayToggle = 1; // Hvis nedbørskartet vises allerede skjule det ... annet // fjern overleggskartet. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // fjern værnøkkelfestivalenMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); nedbørOverlayToggle = 0;
Hva nå?
Godt gjort for å nå slutten! Hvis du har noen spørsmål, vennligst spør deg bort i kommentarene. Den neste opplæringen tar en titt på å koble til Flickr API, slik at du automatisk kan ta bilder fra Flickr og vise dem på kartet ditt.
Bildekreditter
- Mercator projeksjonskart - Wikipedia
- Gall-Peters projeksjonskart - Wikipedia