În tutorialul nostru anterior am analizat modul în care puteți adăuga marcaje și personaliza culorile și meniurile unei hărți Google folosind API-ul serviciului. Acest tutorial ia lucrurile un pas mai departe, explicând cum puteți crea propria hartă personalizată și acoperire pe o hartă Google (cum ar fi harta mea din 1896 din Portsmouth).
În acest tutorial vom adăuga o suprapunere de predicții meteorologice pe harta pe care am construit-o anterior. Harta de vreme pe care o folosesc este în întregime fictivă, dar tehnicile acoperite vă vor oferi libertatea de a crea tot felul de lucruri interesante! Veți putea să construiți hărți istorice, hărți desenate personalizate, zone apropiate de zone specifice, cum ar fi un campus universitar - lista este nesfârșită!
Hărțile Google sunt alcătuite din mai multe plăci separate. Captură de ecran preluată de pe site-ul excelent "Tiles à la Google Maps".
Câteva lucruri pe care trebuie să le cunoașteți înainte de a începe:
O hartă Google este făcută folosind mai multe "dale" de imagini (a se vedea imaginea de mai sus). Cu alte cuvinte, harta este împărțită într-o rețea invizibilă, iar fiecare patrat al unei rețele este un fișier de imagine separat de 256x256 pixeli.
Aveți nevoie de un set de plăci de imagine pentru fiecare nivel de mărire. Nivelul de mărire este un număr, de la zero în sus, care se modifică în timp ce măriți și micșorați harta (vedeți imaginea de mai sus).
Suprapunerea hărții își începe viața ca pe o imagine foarte mare (un jpeg sau png), pe care apoi o "tăiați" în plăci. Este un proces repetitiv, în sensul că imaginea este tăiată o dată pentru a crea un set de plăci pentru primul nivel de mărire și apoi este tăiat din nou în segmente mai mici pentru a crea al doilea set de plăci pentru următorul nivel de mărire și curând.
Acest tutorial explică fiecare pas, inclusiv instrumentele software care sunt (din fericire!) Disponibile pentru a automatiza lucrurile și pentru a face viața mult mai ușoară. Fișierele sursă pentru fiecare pas sunt disponibile în pachetul de descărcare.
Descărcarea unui șablon
Pentru a începe, primul pas este să creați un șablon pe care să puteți crea propria dvs. suprapunere.
Imagine șablon în care creați harta. Această imagine este de fapt 9984x11776 pixeli
Obiectivul dvs. este de a crea un șablon în Photoshop (sau o aplicație grafică echivalentă), care are exact aceeași dimensiune și formă ca harta Google pe care o veți suprapune peste ea, atunci când este la cel mai mare nivel de zoom. (maptiler.org este util dacă nu sunteți sigur care este cel mai mare nivel de zoom de care aveți nevoie).
Pentru a face acest lucru, puteți salva o hartă de șabloane utilizând mashup-ul cartografierului și apoi măriți-l în Photoshop până la nivelul maxim de zoom dorit. De exemplu:
Utilizați aplicația grafică pentru a deschide imaginea hărții șablon pe care ați salvat-o.
Accesați site-ul Google Tiles à la Google Maps și realizați o captură de ecran a unui segment al hărții dvs. Google, la nivelul dvs. maxim de mărire necesar.
Inserați captura de ecran în fișierul Photoshop.
Apoi, măriți imaginea de hartă a șablonului astfel încât să se alinieze exact cu segmentul corespunzător de hartă mărită.
Apoi, ștergeți segmentul mărit. Calitatea hărții dvs. de șablon nu va fi excelentă, dar acest lucru nu contează pentru că aveți nevoie de ea pentru contur și o veți șterge în cele din urmă.
Bacsis: O altă opțiune este Google Maps Downloader, dar vă rugăm să fiți atenți la Google T & C. De asemenea, această opțiune nu este viabilă pentru hărți mari și detaliate; o hartă din Marea Britanie mărite la nivelul 12 va fi prea mare pentru a se deschide în Photoshop.
În această etapă, nu voi complica lucrurile! Deci, într-o ușoară schimbare la tutorialul anterior, am schimbat nivelul maxim de zoom de la 12 la 10 pentru a ne oferi o dimensiune de fișier gestionabilă pentru a lucra cu.
Crearea hărții proprii
Odată ce aveți harta jpg folosind procesul descris mai sus, deschideți-l în Photoshop sau aplicația grafică preferată.
Suprapunerea mea particularizată. Nu este exact o prezentare a talentului artistic pe care îl știu, dar face treaba pentru acest demo. Harta va arăta uimitoare. (Dimensiunea reală 7248x10929 fișier png)
Veți folosi această imagine ca șablon și veți desena harta proprie pe partea de sus a acesteia. Aceasta este pentru a vă asigura că harta dvs. se aliniază perfect cu harta Google.
Blocați stratul șablonului hărții.
Adăugați un nou strat / s.
Creați ceva uimitor. (De fapt, nu te duce prea departe pentru a începe cu. De fapt, este o idee bună să creezi ceva de bază, cum ar fi hărțile mele meteo, și să urmezi restul tutorialului pentru a te simți ce se întâmplă. !)
Ascundeți stratul șablonului hărții.
Salvați-vă harta ca png sau jpg (dacă aveți părți transparente, cum ar fi marea în acest tutorial, apoi du-te pentru un png).
Aruncați o privire la imaginea hărții pe care am creat-o în această etapă, care este disponibilă în descărcarea sursei.
Împărțirea hărții tale
Există câteva moduri în care vă puteți alinia imaginea pentru a crea plăcile de hartă. Dacă doriți un pic de informații de fundal despre ceea ce faceți, citiți mai departe. În caz contrar, dacă nu vă interesează de ce și cum funcționează, treceți la următoarea secțiune!
Sisteme de proiectie
Un sistem de proiecție, în sensul geografic, este modul în care o hartă plată este creată dintr-un obiect rotund, adică globul. Există tot felul de formule și algoritmi folosiți pentru a realiza acest lucru. Tot ce trebuie să știți este că diferite sisteme de proiecție au ca rezultat diferite hărți plane ale lumii.
Proiecția Mercator (sus) și proiecția Gall-Peters (partea de jos) creează hărți bidimensionale diferite. (Grilele de pe imaginile de mai sus nu sunt legate de plăcile de hartă Google, care sunt pătrate).
Pentru a crea o suprapunere pentru o hartă Google, trebuie să utilizați sistemul "Spherical Mercator" care utilizează proiecția Mercator. Acesta este definit ca EPSG: 900913 sau EPSG: 3857. Pentru a afla mai multe despre sistemele de proiecție, consultați pagina Tiles à la Google Maps.
Găsirea fiecărei părți a hărții
Înainte de a vă putea genera plăcile, trebuie să vă ocupați de pozițiile nordice, sudice, vest și est ale hărții. Pe măsură ce utilizați sistemul "Sferic Mercator", acestea trebuie să fie în metri sferici, spre deosebire de latitudine sau longitudine.
Cum se citește ieșirea pe site-ul Mashup: numărul de sus-stânga = partea de vest, numărul de sus-dreapta = partea de sud, numărul din partea de jos-stânga = partea de est,.
Puteți găsi aceste valori de poziție folosind acest mashup. Am descoperit că cea mai ușoară metodă este de a mări imediat și de a găsi o parte la un moment dat. Deci găsiți valoarea pentru partea de vest a hărții dvs., notați-o, apoi găsiți valoarea pentru partea de sud și așa mai departe.
Odată ce ați găsit aceste patru valori, puteți acum să "tăiați" harta în plăci. Există câteva opțiuni disponibile.
Slicing Option 1: MapTiler
Din fericire, software-ul MapTiler este foarte simplu de utilizat! În momentul în care scrie acest tutorial, MapTiler își actualizează software-ul. Dar, indiferent de versiunea pe care o descărcați, aceștia sunt pașii de bază:
Descărcați Maptiler. Sau versiunea mai nouă beta.
Porniți programul și selectați Hărți Google compatibilă.
Apoi adăugați imaginea de hartă pe care ați creat-o în pasul anterior.
Vi se va cere să dați georeferențiere a limitelor hărții dvs., adică poziția în contoarele sferice ale fiecărei părți pe care tocmai ați găsit-o. În versiunea 0.41 (cea mai recentă dintre cele două variante), aceasta este denumită a Casetă de încadrare. Aveți grijă cu ordinea în care introduceți valorile!
Când vi se solicită utilizarea sistemului de referință / coordonat spațial ESPG: 3857 . (Dacă utilizați versiunea veche 1 (beta) a MapTiler, atunci utilizați EPSG: 900913).
Apoi selectați nivelurile de zoom pe care doriți să le generați plăci pentru. Valoarea maximă ar trebui să fie valoarea pe care ați salvat harta șablonului la momentul când l-ați creat (de mai sus). Pagina Tiles à la Google Maps este utilă pentru a afla ce aveți nevoie pentru valoarea minimă de zoom.
Continuați până la sfârșitul expertului și porniți Face. Acest lucru poate dura ceva timp; o bună ocazie de a obține o cafea!
Notă: Dacă utilizați noua versiune MapTiler, există un gotcha; plăcile dvs. de hartă sunt filigranate. Gândesc în unele cazuri, poate pentru un proiect Uni sau o probă tehnică de concepție, acest lucru nu este o problemă oricum. Cu toate acestea, există câteva modalități de a obține acest lucru. Cea mai evidentă modalitate este să cumperi upgrade-ul pentru 20 de dolari, cred. Cealaltă opțiune este să utilizați scriptul Python GDAL2Tiles. Preferința mea personală este să merg la upgrade, pentru că aș fi mai mult să-mi petrec timpul cu privire la materialele creative decât să rezist iritările de a configura mediul de scripting, dar s-ar putea să te simți diferit.
Bacsis: Dacă întâmpinați probleme la utilizarea programului MapTiler, atunci Forumul utilizator este extrem de util.
Slicing Option 2: GDAL2Tiles
O alternativă la MapTiler este scriptul GDAL2Tiles. Software-ul MapTiler este de fapt construit pe partea de sus a acestui script, care trece prin interfața prompt de comandă.
GDAL2Tiles este scriptul Python care se află în centrul graficului MapTiler. Puteți utiliza acest script direct prin interfața promptului de comandă.
GDAL2Tiles oferă și alte posibilități, dar este și un pic mai dificil de folosit; așa că continuați să citiți dacă aveți un sentiment de aventură!
Prima etapă este crearea mediului pentru a rula scriptul GDAL2Tiles. Modul în care faceți acest lucru depinde de sistemul dvs. de operare. Dacă utilizați o mașină Windows cu 32 de biți (faceți clic aici dacă nu sunteți sigur), atunci puteți utiliza programul OSGeo4W.
Mai întâi trebuie să instalați Python și să verificați dacă Python este pe variabila căii dvs..
Apoi descărcați OSGeo4W.
Rulați programul de instalare și selectați Instalare avansată.
Selectați libs și selectați GDAL și GDAL-python în pachetele selectate.
Porniți și finalizați instalarea.
Când sa terminat, ar trebui să aveți pictograma OSGeo4W de pe desktop. Acesta este un fișier batch pentru a porni promptul de comandă.
Dacă utilizați o mașină Windows pe 64 de biți (faceți clic aici dacă nu sunteți sigur), configurarea este puțin diferită. Aceste instrucțiuni sunt citate (cu permisiune amabilă) direct de pe blogul lui Jaerock Kwon, care merită deplină acordarea unor instrucțiuni detaliate.
Instalați Python din x86-64.
Verificați dacă python este pe variabila căii dvs..
Porniți python.exe. (de exemplu, faceți clic pe C: \ Python27 \ python.py) Trebuie să găsim versiunea de compilator care a construit Python. În cazul meu, versiunea Python este 2.7.5 și a fost compilată și construită cu Python 2.7.5 (implicit, 15 mai 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] pe win32.
Pachetele binare GDAL pentru mașinile pe 64 de biți pot fi găsite la http://vbkto.dyndns.org/sdk/. Selectați o versiune corespunzătoare în tabel. În cazul meu, release-1500-x64-gdal-1-10-mapserver-6-2 este versiunea corectă în rândul "MSVC2008 (Win64) -stable" deoarece Python a fost construit de 1500.
Descărcați programul de instalare generic pentru componentele de bază GDAL. În cazul meu - gdal-110-1500-x64-core.msi
Descărcați programul de instalare pentru legăturile Python GDAL (necesită instalarea nucleului GDAL). În cazul meu GDAL-1.10.0.win-amd64-py2.7.msi - Am ales acest lucru pentru că 1.10.0 este cel mai nou și Python-ul meu este 2.7.5.
Instalați componentele de bază GDAL. Nu există opțiunea de a alege dosarul destinație pentru nucleul GDAL. Acesta va fi instalat în directorul "C: \ Program Files \ GDAL".
Instalați legăturile Python GDAL.
După legare, puteți muta dosarul GDAL în C: \ Program Files unde doriți.
În cele din urmă, faceți clic pe start meniu și apoi Toate programele și apoi GDAL. Aceasta ar trebui să pornească promptul liniei de comandă de comandă.
Asumându-vă că ați trecut prin procesul (uneori traumatizant!) De configurare a mediului software GDAL2Tiles, este timpul să faceți ceva cu el.
Promptul de comandă al GDAL. OSGeo4W arată foarte asemănător cu acesta. Comenzile sunt aceleași pentru ambele.
Indiferent dacă aveți OSGeo4W sau mediul GDAL, comanda dvs. de comandă ar trebui să arate similar cu fotografia de mai sus. Acum puteți începe să utilizați scriptul GDAL2Tiles.
În primul rând, trebuie să navigați în folderul în care este salvată harta pe care doriți să o reduceți. (Aceste comenzi sunt utile pentru a obține unde trebuie să fii: dir vă oferă o listă a tuturor lucrurilor din directorul curent, CD înseamnă directorul de schimbare, CD… înseamnă a muta un nivel în sus pe copac).
După ce vă aflați în dosarul corect, puteți începe să vă creați plăcile. Pentru a crea harta demo în acest tutorial, acestea sunt comenzile pe care le-am folosit -
Pentru a explica ce fac aceste comenzi, vedeți gdal_translate pagina și gdal2tiles.py pagină. Există, de asemenea, o comandă GPAL warp care este strâns legată, dar nu este necesară în acest caz. Cateva lucruri de remarcat sunt:
Cei trei -GCP proprietățile se referă la trei colțuri ale hărții dvs. Prima pereche de valori după fiecare GCP proprietatea se referă la dimensiunile în pixeli ale fișierului de imagine de intrare și a doua pereche de valori sunt coordonatele în contoarele sferice (nu latitudine și longitudine - vezi mai sus).
Deci, pentru a aplica acest lucru pe harta dvs.:
gdal_translate -de VRT -a_srs EPSG: 900913 -gcp 0 0 la nord de nord -gcp lățime_in_prima_input_map_file_in_pixel 0 est la nord -gcp lățime_in_prima_input_map_file_in_pixels înălțime_in_proprietăți_de_insuvei_map_file_în_ pixeli la est de sud your_input_file_name.png your_output_file_name.vrt
După lansarea celei de-a doua comenzi, calculatorul va ieși în viață și va începe tăierea imaginii pentru a crea plăcile de hartă. Vă recomandăm să consultați exact comenzile pe care le-am introdus în mediile OSGeo4W și GDAL dacă nu sunteți sigur de navigarea în dosare folosind linia de comandă.
Înțelegerea rezultatelor
Indiferent de metoda pe care ați folosit-o pentru generarea plăcilor, folderele generate vor fi aceleași.
Unele dintre plăcile generate. Acestea sunt nivelul de mărire 6, poziția "x" este 31, iar poziția "y" este numele fiecărui fișier.
Toate plăcile de pe o hartă Google au o valoare "x" și "y". (Da - încă un alt sistem de coordonate diferit!) Primul nivel al folderelor este nivelul de mărire, apoi în interiorul căruia următorul nivel de foldere este coordonatul "x", iar în interiorul căruia numele fișierului este coordonatul "y".
Dacă aruncați o privire asupra hărții de pe acest site, ar trebui să vedeți că numele dalelor dvs. se potrivesc. Cu alte cuvinte, du-te la locația dorită, ajustați nivelul de zoom astfel încât să se potrivească cu numele dosarului, apoi examinați valorile Google "x" și "y". Ar trebui să vedeți că se potrivesc cu subfolderul și numele fișierelor pentru plăcile de hartă corespunzătoare.
Pentru a verifica dacă placile dvs. sunt în regulă, vă recomandăm să copiați unul sau două dintre plăcile generate pentru cel mai mic nivel de zoom înapoi în fișierul dvs. de hartă (de ex., Fișierul Photoshop) creat în timpul etapei anterioare. Verificați dacă se potrivesc exact în partea de sus a hărții. Aruncați o privire în fișierele sursă pe care le-am furnizat pentru un exemplu de acest lucru.
Dacă totul este bine, atunci - felicitări - munca grea se face!
Ajutor, plăcile mele de hartă nu sunt numite corect!
Aoleu. Acest lucru se va întâmpla dacă ați folosit versiunea mai veche a software-ului MapTiler sau scriptul GDAL2Tiles. Fișierele dvs. (dar nu dosarele) sunt numite folosind convenția de numire TMS. Dacă te uiți la dalele din această pagină, poți vedea că fiecare dală are două valori x și y; adică. o pereche Google și o pereche TMS. Trebuie doar să le redenumim la convenția de numire a hărților Google.
Această redenumire se poate face manual, dar va dura prea mult timp pentru majoritatea hărților. Din fericire, există un scenariu care să facă lucrul pentru tine. Trebuie să știți un pic despre comenzile Linux foarte simple, cum ar fi cum să schimbați folderul. Înainte de a rula scriptul shell, faceți o copie a plăcilor dvs. pentru a lucra la.
#! / bin / sh pentru această cale în 'ls -d * / * / *' face thisFile = $ thisPath # * / * / vechiY = $ thisFile% .png zoomX = $ thisPath% = $ thisPath% / * / * newY = $ (((1<
Copiați și lipiți scriptul de mai sus în Notepad și salvați-l cu extensia nume "redenumire" și ".sh". Când salvați fișierul "sh" în notepad, asigurați-vă că ați selectat "toate fișierele" de lângă "salvați ca tip" și introduceți numele în citate, de ex. „Rename.sh“.
Dacă utilizați un Mac, acest script shell poate fi rulat în Terminal (selectați Aplicații atunci Utilități atunci Terminal).
Dacă sunteți pe o mașină Windows, apoi pentru a rula scripturi shell (sau fișiere .sh), trebuie să utilizați Cygwin, care este un mediu asemănător cu Linux pentru Windows:
Descărcați și instalați Cygwin
Copiați fișierul "rename.sh" pe care tocmai l-ați salvat în dosarul cygwin \ bin.
Porniți Cygwin.
Deplasați-vă la Cygwin \ bin pliant. (de exemplu,. CD înseamnă directorul de schimbare, CD… înseamnă să se deplaseze copacul până la un nivel și ls înseamnă să afișați fișierele și directoarele din directorul curent.)
De asemenea, trebuie să îl convertiți într-un fișier Linux înainte de al rula, altfel veți obține erori "\ r" cauzate de pauzele de linie. Deci alerga asigurați-vă că sunteți încă în Cygwin \ bin folder și rulați d2u rename.sh
Apoi treceți la folderul care conține placile dvs. (consultați imaginea de mai sus).
Apoi, pentru a rula scriptul, tastați rename.sh
După ce script-ul shell-ului a rulat, puteți verifica dacă sa terminat lucrarea, luând o altă privire asupra fișierelor. Verificați dacă numele lor se potrivesc acum cu coordonatele Google din această pagină.
Dacă comparăți numele fișierelor în fișierele "Partea 3" și "Partea 4" în fișierele sursă, puteți vedea diferența.
Comprimarea titlurilor dvs. de hartă
Pentru a vă asigura că hărțile dvs. funcționează cât mai ușor posibil, puteți comprima plăcile de hartă.
Există diferite utilitare gratuite de compresie pentru imaginile png, dar am încercat (și nu am reușit) să găsesc una care a fost complet liberă și a făcut treaba. De exemplu, software-ul popular PNGGauntlet nu păstrează structura folderului, în timp ce alte utilități gratuite au avut o limită a numărului maxim de fișiere.
În cele din urmă a trebuit să musc glonțul și să cumpăr software-ul PNGOUTWin. Acest lucru costa în jur de £ 10, ceea ce este o afacere dat fiind faptul că a furat în jurul valorii de faptul că a salvat! PNGOUTWin ambele păstrează structura fișierelor și vă permite să comprimați toate fișierele simultan.
Dacă utilizați PNGOUTWin, este destul de intuitivă. Singurul meu avertisment este că ar trebui să faceți o copie a plăcilor și apoi să rulați software-ul pe copie. De asemenea, aveți grijă ca software-ul să pornească literal de îndată ce ați selectat dosarul!
Magic JavaScript pentru a aduce împreună cu toții
Bine, aproape suntem acolo. Tot ce rămâne rămâne o chestiune mică de atașare a plăcilor noi de hartă pe harta dvs. Google.
Codul de bază
Mai întâi, aruncăm o privire asupra unui exemplu simplu de acoperire cu hartă a hârtiei (fișierele sursă sunt disponibile prin link-ul din partea de sus a acestei pagini).
Dacă măriți și micșorați, suprapunerea hărții rămâne pusă.
// configurarea suprafeței de acoperire a precipitațiilor var rainMapOverlay = noul google.maps.ImageMapType (getTileUrl: funcția (coord, zoom) return 'tiles / rainfall' + '/' + zoom + '/' + coord.x + + coord.y + '. png';, tileSize: nou google.maps.Size (256, 256));
Acest fragment utilizează clasa ImageMapType pentru a crea suprapunerea personalizată. coord.x se referă la numele dosarului și la coord.y se referă la numele fișierului. Acestea sunt unite împreună în cod pentru a crea calea către fiecare țiglă.
Conectați-vă la harta festivalului din Marea Britanie
Acesta este produsul final pe care îl căutați. Pentru a crea acest lucru, puteți utiliza aceleași tehnici explicate lângă sfârșitul tutorialului anterior.
Mai întâi creăm o variabilă (rainfallOverlayToggle) pentru a ține apariția sau nu a suprapunerii meteorologice. Și apoi, creând o nouă opțiune în handelRequests pentru a face față situației când butonul umbrelă (Brolly).
// Afișează harta precipitațiilor când se face clic pe butonul unbrella și se elimină dacă se afișează deja. altceva dacă (buttonPressed === "precipitații") // Dacă harta precipitațiilor NU este afișată aleady, atunci arătați-o ... if (rainfallOverlayToggle === 0) // Suprapune harta de precipitații în partea superioară a festivalului hartă GoogleMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Afișează cheia pentru vreme. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); rainfallOverlayToggle = 1; // Dacă harta de precipitații este deja afișată, atunci ascundeți-o ... altceva // eliminați harta suprapusă. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // eliminați cheia meteo festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); rainfallOverlayToggle = 0;
Ce urmează?
Bine facut pentru a ajunge la sfarsit! Dacă aveți orice întrebări, vă rugăm să întrebați în comentarii. Următorul tutorial va arunca o privire la conectarea la API-ul Flickr, permițându-vă să accesați automat fotografiile de pe Flickr și să le afișați pe hartă.
Share
Imagine șablon în care creați harta. Această imagine este de fapt 9984x11776 pixeli 
Proiecția Mercator (sus) și proiecția Gall-Peters (partea de jos) creează hărți bidimensionale diferite. (Grilele de pe imaginile de mai sus nu sunt legate de plăcile de hartă Google, care sunt pătrate). 
GDAL2Tiles este scriptul Python care se află în centrul graficului MapTiler. Puteți utiliza acest script direct prin interfața promptului de comandă. 
Promptul de comandă al GDAL. OSGeo4W arată foarte asemănător cu acesta. Comenzile sunt aceleași pentru ambele. 
Accentsconagua
