Google Maps API og tilpassede overlegg

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!


Google maps består av mange separate fliser. Skjermbilde hentet fra det gode nettsted "Tiles à la Google Maps".

Noen ting du må vite før du begynner:

  • Et Google-kart er laget med mange bilder "fliser" (se bildet over). Kort sagt er kartet delt inn i et usynlig rutenett, og hvert rutenett er en separat bildefil på 256 x 256 piksler.
  • Du trenger et sett med bildefliser for hvert zoomnivå. Zoomnivået er et tall, fra null oppover, som endres når du zoomer inn og ut av kartet (se bildet over).
  • Kartoverlegget starter livet som et veldig stort bilde (en jpeg eller png), som du så "skar opp" til fliser. Det er en repetitiv prosess, i den forstand at bildet er oppskåret en gang for å lage et sett med fliser for det første zoomnivået, og deretter blir det skåret opp igjen i mindre segmenter for å lage det andre settet med fliser til neste zoomnivå, og så videre.

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.


Laster ned en mal

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 piksler 

Må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:

  • Bruk grafikkprogrammet til å åpne malkartbildet du har lagret.
  • Gå til Tiles à la Google Maps-nettstedet og ta et skjermbilde av et segment av Google-kartet ditt, med ditt ønskede maksimale zoomnivå.
  • Lim inn skjermbildet i Photoshop-filen.
  • Forstørr deretter kartbildet for mallkort slik at det nøyaktig justeres med det tilsvarende zoomede kartsegmentet.
  • Deretter sletter du det zoomede segmentet. Kvalitetskortet ditt vil ikke være bra, men det spiller ingen rolle da du bare trenger det for omrisset, og du vil slette det til slutt.
Tips: Et annet alternativ er Google Maps Downloader, men vær oppmerksom på Google T & Cs. Også dette alternativet er ikke levedyktig for store og detaljerte kart; et britisk kart zoomet til nivå 12 blir for stort til å åpnes i Photoshop.

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.


Opprette ditt eget kart

Når du har kartet jpg ved hjelp av prosessen beskrevet ovenfor, åpner du den i Photoshop, eller det foretrukne grafikkprogrammet.


Mitt tilpassede overlegg. Ikke akkurat et utstillingsvindu av kunstnerisk talent jeg vet, men det gjør jobben for denne demoen. Ditt kart vil se fantastisk ut. (Faktisk størrelse 7248x10929 png-fil)

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.

  • Lås kartmalmalaget ditt.
  • Legg til et nytt lag / s.
  • Lag noe fantastisk. (Faktisk, ikke bli forøvrig borte til å begynne med. Faktisk er det en god ide å lage noe grunnleggende, som værvarselet mitt, og følg resten av opplæringen for å få en følelse av hva som skjer. Deretter oppretter du noe utrolig !)
  • Skjul kartmalmalaget.
  • Lagre kartet som png eller jpg (hvis du har transparente deler, for eksempel havet i denne opplæringen, så gå for en png).

Ta en titt på vær kartbildet jeg opprettet på dette stadiet, som er tilgjengelig i kilde nedlastingen.


Slicing opp kartet

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!

Projeksjonssystemer

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.

Finne hver side av kartet

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.


Slik leser du utdataene på Mashup-nettstedet: Topp-venstre nummer = vestsiden, topp-høyre tall = sørsiden, nederst til venstre tall = østsiden, nederst til høyre = nordsiden.

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.

Skjærealternativ 1: MapTiler

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:

  • Last ned Maptiler. Eller den nyere Beta-versjonen.
  • Start programmet og velg Google Kart kompatibelt alternativ.
  • Legg deretter til kartbildet du opprettet i forrige trinn.
  • Du vil bli bedt om å gi georeference av grensene til kartet ditt, dvs. posisjonen i sfæriske målere på hver side som du nettopp har funnet. I versjon 0.41 (den nyere av de to versjonene) er dette referert til som a Bounding Box.  Vær forsiktig med rekkefølgen du oppgir verdiene!
  • Når du blir bedt om ditt mellomrom for referanse / koordinatsystem ESPG: 3857 . (Hvis du bruker den gamle versjon 1 (beta) versjonen av MapTiler, bruk så EPSG: 900913).
  • Velg deretter zoomnivåene du vil generere fliser for. Den maksimale verdien skal være verdien du lagret malekartet ditt når du opprettet det (over). Flisene på la Google Maps-siden er nyttige for å finne ut hva du trenger for min zoom-verdien.
  • Fortsett til slutten av veiviseren og start Render. Dette kan ta en stund; en god mulighet til å ta en kaffe!

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.

Skjæringsalternativ 2: GDAL2Tiler

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.

  • Du må først installere Python og sjekke python er på sti variabelen.
  • Last ned OSGeo4W.
  • Kjør installasjonsprogrammet og velg Avansert installasjon.
  • Å velge libs og velg GDAL og GDAL-python i utvalgte pakker.
  • Fortsett og fullfør installasjonen.
  • Når det er gjort, bør du ha OSGeo4W-ikonet på skrivebordet. Dette er en batchfil for å starte kommandoprompten.

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.

  • Installer Python fra x86-64.
  • Sjekk python er på din variabel for sti.
  • Kjør python.exe. (for eksempel klikk på C: \ Python27 \ python.py) Vi må finne ut kompilatorversjonen som bygde pythonen. I mitt tilfelle er Python-versjonen 2,7,5 og den ble kompilert og bygget med Python 2.7.5 (standard, 15. mai 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] på win32.
  • GDAL binære pakker for 64bit-maskiner finnes på http://vbkto.dyndns.org/sdk/. Velg en tilsvarende versjon i tabellen. I mitt tilfelle er utgivelse-1500-x64-gdal-1-10-mapserver-6-2 den riktige versjonen i "MSVC2008 (Win64) -stabilt" rad fordi Python ble bygget med 1500.
  • Last ned generisk installasjonsprogramvare for GDAL-kjerneelementene. I mitt tilfelle - gdal-110-1500-x64-core.msi
  • Last ned installasjonsprogrammet for GDAL python bindinger (krever å installere GDAL kjernen). I mitt tilfelle GDAL-1.10.0.win-amd64-py2.7.msi - Jeg valgte dette fordi 1.10.0 er det siste og min Python er 2.7.5.
  • Installer GDAL-kjerneelementene. Det er ikke mulig å velge målmappe for GDAL-kjerne. Det vil bli installert i mappen "C: \ Program Files \ GDAL".
  • Installer GDAL pythonbindingene.
  • Etter bindingen kan du flytte GDAL-mappen i C: \ Program Files til hvor du vil.
  • Til slutt klikker du på Start menyen og deretter Alle programmene og så GDAL. Dette burde starte kommandolinjeleverandøren.

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:

  • De tre -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.


Forstå utgangen

Uansett hvilken metode du brukte til å generere fliser, vil de genererte mappene være de samme.


Noen av flisene genereres. Disse er zoomnivå 6, posisjonen 'x' er 31, og 'y' -posisjonen er navnet på hver fil.

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!

Hjelp, Mine kartfliser er ikke navngitt riktig!

Å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å, og ls 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 og coord.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 i handelRequests 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