Nel nostro tutorial precedente abbiamo esaminato come è possibile aggiungere marcatori e personalizzare i colori e i menu di una mappa di Google utilizzando l'API del servizio. Questo tutorial fa un passo in più, spiegando come è possibile creare la propria mappa personalizzata e copertura su una mappa di Google (come la mia mappa 1896 di Portsmouth).
In questo tutorial aggiungeremo una sovrapposizione delle previsioni del tempo alla mappa che abbiamo creato in precedenza. La mappa del tempo che uso è del tutto fittizia, ma le tecniche trattate ti daranno la libertà di creare ogni sorta di cose interessanti! Sarai in grado di costruire mappe storiche, mappe disegnate su misura, primi piani di aree specifiche come un campus universitario - la lista è infinita!
Le mappe di Google sono composte da molte tessere separate. Screenshot tratto dall'eccellente sito Web di "Tiles à la Google Maps".
Alcune cose che devi sapere prima di iniziare:
Una mappa di Google viene creata utilizzando molte "tessere" di immagine (vedi immagine sopra). In altre parole, la mappa viene divisa in una griglia invisibile e ciascun riquadro della griglia è un file di immagine separato di 256x256 pixel.
Hai bisogno di un set di tessere immagine per ogni livello di zoom. Il livello di zoom è un numero, da zero verso l'alto, che cambia man mano che ingrandisci e riduci la mappa (vedi immagine sopra).
La tua sovrapposizione di mappe inizia la sua vita come un'immagine molto grande (un jpeg o png), che poi "affetta" in tessere. È un processo ripetitivo, nel senso che l'immagine viene affettata una sola volta per creare un set di tessere per il primo livello di zoom, e quindi viene ridisegnata in segmenti più piccoli per creare il secondo set di tessere per il successivo livello di zoom, e presto.
Questo tutorial spiega ogni passaggio, inclusi gli strumenti software che sono (per fortuna!) Disponibili per automatizzare le cose e semplificare la vita. I file di origine per ogni passaggio sono disponibili nel pacchetto di download.
Download di un modello
Per iniziare, il primo passo è creare un modello sul quale creare il proprio overlay.
Immagine del modello in cui crei la tua mappa. Questa immagine è in realtà 9984x11776 pixel
Il tuo obiettivo è creare un modello in Photoshop (o un'applicazione grafica equivalente) che abbia esattamente le stesse dimensioni e la stessa forma della mappa di Google che stai per sovrapporre, quando è al suo livello il più alto livello di zoom. (maptiler.org è utile se non sei sicuro di quale sia il livello di zoom più alto di cui hai bisogno).
Per fare ciò, è possibile salvare una mappa modello utilizzando il mathup di Maptiler e quindi ingrandirla in Photoshop al livello di zoom massimo desiderato. Per esempio:
Usa la tua applicazione grafica per aprire l'immagine della mappa del modello che hai salvato.
Vai sul sito Tiles à la Google Maps e fai uno screenshot di un segmento della tua mappa di Google, al livello di zoom massimo richiesto.
Incolla lo screenshot nel tuo file Photoshop.
Quindi ingrandisci l'immagine della mappa del modello in modo che si allinea esattamente con il corrispondente segmento di mappa ingrandito.
Quindi, elimina il segmento ingrandito. La qualità della tua mappa modello non sarà grande, ma non importa quanto ti serve per la struttura e la eliminerai alla fine.
Mancia: Un'altra opzione è il downloader di Google Maps, ma ti preghiamo di prestare attenzione ai T & C di Google. Inoltre, questa opzione non è valida per mappe grandi e dettagliate; una mappa del Regno Unito ingrandita al livello 12 sarà troppo grande per essere aperta in Photoshop.
A questo punto, non ho intenzione di complicare le cose! Quindi, con una leggera modifica al tutorial precedente, ho modificato il livello di zoom massimo da 12 a 10 per darci una dimensione di file gestibile con cui lavorare.
Crea la tua mappa personale
Una volta che hai la tua mappa jpg utilizzando la procedura descritta sopra, aprila in Photoshop o nella tua applicazione grafica preferita.
La mia sovrapposizione personalizzata. Non è esattamente una vetrina di talenti artistici che conosco, ma fa il lavoro per questa demo. La tua mappa sarà fantastica. (Dimensione reale 7248x10929 file png)
Userai questa immagine come modello e disegnerai la tua mappa sopra di essa. Questo per garantire che la tua mappa si allinei perfettamente con la mappa di Google.
Blocca il tuo livello di modello di mappa.
Aggiungi un nuovo livello / s.
Crea qualcosa di incredibile. (In realtà, non ti preoccupare troppo per iniziare. In effetti, è una buona idea creare qualcosa di semplice, come la mia mappa del tempo, e seguire il resto del tutorial per avere un'idea di cosa sta succedendo. !)
Nascondi il livello del modello di mappa.
Salva la tua mappa come png o jpg (se hai parti trasparenti, come il mare in questo tutorial, allora vai a fare un png).
Dai un'occhiata all'immagine della mappa meteo che ho creato in questa fase, disponibile nel download sorgente.
Affettare la tua mappa
Ci sono un paio di modi in cui puoi dividere la tua immagine per creare le tessere della mappa. Se vuoi un po 'di informazioni di base su ciò che stai facendo, continua a leggere. Altrimenti, se non ti interessa perché o come funziona, passa alla sezione successiva!
Sistemi di proiezione
Un sistema di proiezione, nel senso geografico, è il modo in cui viene creata una mappa piatta da un oggetto rotondo, cioè il globo. Ci sono tutti i tipi di formule e algoritmi (francamente sconcertanti) usati per raggiungere questo obiettivo. Tutto ciò che devi sapere è che i diversi sistemi di proiezione danno origine a diverse mappe piane del mondo.
La proiezione di Mercatore (in alto) e la proiezione di Gall-Peters (in basso) creano mappe bidimensionali piuttosto diverse. (Le griglie delle immagini sopra non sono correlate alle tessere della mappa di Google, che sono quadrate).
Per creare una sovrapposizione per una mappa di Google è necessario utilizzare il sistema "Spherical Mercator" che utilizza la proiezione di Mercator. Questo è definito come EPSG: 900913 o EPSG: 3857. Per saperne di più sui sistemi di proiezione, consulta la pagina Web di Tiles à la Google Maps.
Trovare ogni lato della tua mappa
Prima di poter generare le tue tessere, devi calcolare la posizione dei lati nord, sud, ovest ed est della mappa. Poiché stai utilizzando il sistema "Mercator sferico", questi devono essere in metri sferici anziché in latitudine o longitudine.
Come leggere l'output sul sito Web Mashup: numero in alto a sinistra = lato ovest, numero in alto a destra = lato sud, numero in basso a sinistra = lato est, numero in basso a destra = lato nord.
Puoi trovare questi valori di posizione usando questo mashup. Ho scoperto che il metodo più semplice è quello di ingrandire direttamente e trovare un lato alla volta. Quindi trova il valore per il lato ovest della mappa, prendi nota di esso, quindi trova il valore per il lato sud e così via.
Una volta che hai trovato questi quattro valori, ora puoi "affettare" la tua mappa in tessere. Ci sono un paio di opzioni disponibili.
Opzione di taglio 1: MapTiler
Fortunatamente, il software MapTiler è davvero semplice da usare! Al momento di scrivere questo tutorial, MapTiler sta aggiornando il loro software. Ma indipendentemente dalla versione scaricata, questi sono i passaggi di base:
Scarica Maptiler. O la versione beta più recente.
Avvia il programma e seleziona Google Maps opzione compatibile.
Quindi aggiungi l'immagine della mappa che hai creato nel passaggio precedente.
Ti verrà chiesto di dare il georeferenziazione dei confini della tua mappa, cioè la posizione in metri sferici di ciascun lato che hai appena trovato. Nella versione 0.41 (la più recente delle due versioni) questo è indicato come a Rettangolo di selezione. Fai attenzione con l'ordine in cui inserisci i valori!
Quando viene richiesto l'uso del riferimento spaziale / sistema di coordinate ESPG: 3857 . (Se stai usando la vecchia versione 1 (beta) di MapTiler, allora usa EPSG: 900913).
Quindi selezionare i livelli di zoom per cui si desidera generare le tessere. Il valore massimo dovrebbe essere il valore in cui hai salvato la mappa del modello al momento della creazione (sopra). La pagina Tiles à la Google Maps è utile per capire cosa ti serve per il valore minimo dello zoom.
Continuare fino alla fine della procedura guidata e avviare il rendere. Questo può richiedere un po '; una buona occasione per prendere un caffè!
Nota: Se stai usando la nuova versione di MapTiler, c'è un trucco; le tessere della mappa sono filigranate. In alcuni casi, suppongo che in alcuni casi, forse per un progetto Uni o per un proof-of-concept tecnico, questo non sia comunque un problema. Tuttavia, ci sono un paio di modi per aggirare questo. Il modo più ovvio è comprare l'aggiornamento per $ 20, credo. L'altra opzione è usare lo script Python GDAL2Tiles. La mia preferenza personale è quella di passare all'aggiornamento perché preferirei dedicarmi alle cose creative piuttosto che sopportare le irritazioni legate alla creazione dell'ambiente di scripting, ma potresti sentirti diversamente.
Mancia: Se si riscontrano problemi nell'utilizzo del software MapTiler, il forum utente è estremamente utile.
Opzione di taglio 2: GDAL2Tiles
Un'alternativa a MapTiler è lo script GDAL2Tiles. Il software MapTiler è in realtà costruito sopra questo script, che viene eseguito attraverso l'interfaccia del prompt dei comandi.
GDAL2Tiles è lo script Python che si trova al centro della GUI di MapTiler. È possibile utilizzare questo script direttamente tramite l'interfaccia del prompt dei comandi.
GDAL2Tiles offre ulteriori possibilità, ma è anche un po 'più complicato da usare; quindi continua a leggere solo se hai un senso di avventura!
La prima fase è la creazione dell'ambiente per eseguire lo script GDAL2Tiles. Il modo in cui lo fai dipende dal tuo sistema operativo. Se stai usando una macchina Windows a 32 bit (clicca qui se non sei sicuro), allora puoi usare OSGeo4W.
Devi prima installare Python e controllare che python sia sulla tua variabile path.
Quindi scaricare OSGeo4W.
Esegui il programma di installazione e seleziona Installazione avanzata.
Selezionare libs e selezionare GDAL e GDAL-python nei pacchetti selezionati.
Prosegui e completa l'installazione.
Al termine, dovresti avere l'icona OSGeo4W sul desktop. Questo è un file batch per avviare il prompt dei comandi.
Se si utilizza una macchina Windows a 64 bit (fare clic qui se non si è sicuri), l'installazione è leggermente diversa. Queste istruzioni sono citate (con gentile concessione) direttamente dal blog di Jaerock Kwon, che merita pieno credito per aver fornito tali istruzioni dettagliate.
Installa Python da x86-64.
Controlla python è sulla tua variabile di percorso.
Esegui python.exe. (ad esempio, fare clic su C: \ Python27 \ python.py) Dobbiamo trovare la versione del compilatore che ha creato il python. Nel mio caso, la versione di Python è 2.7.5 ed è stata compilata e costruita con Python 2.7.5 (predefinito, 15 maggio 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] su win32.
I pacchetti binari GDAL per macchine a 64 bit possono essere trovati su http://vbkto.dyndns.org/sdk/. Seleziona una versione corrispondente nella tabella. Nel mio caso, release-1500-x64-gdal-1-10-mapserver-6-2 è la versione corretta nella riga "MSVC2008 (Win64) -stable" perché il Python è stato creato dal 1500.
Scarica il programma di installazione generico per i componenti principali di GDAL. Nel mio caso - gdal-110-1500-x64-core.msi
Scarica il programma di installazione per i collegamenti Python GDAL (richiede l'installazione del core GDAL). Nel mio caso GDAL-1.10.0.win-amd64-py2.7.msi - Ho scelto questo perché 1.10.0 è l'ultimo e il mio Python è 2.7.5.
Installa i componenti principali GDAL. Non esiste alcuna opzione per scegliere la cartella di destinazione per GDAL core. Verrà installato nella cartella "C: \ Programmi \ GDAL".
Installa i collegamenti Python GDAL.
Dopo l'associazione, puoi spostare la cartella GDAL in C: \ Programmi in qualunque posto tu voglia.
Infine, fai clic su Inizio menu e poi Tutti i programmi e poi GDAL. Questo dovrebbe iniziare il prompt della riga di comando.
Quindi, supponendo che tu abbia superato il processo (talvolta traumatico!) Di configurazione dell'ambiente software GDAL2Tiles, è tempo di fare qualcosa con esso.
Il prompt dei comandi di GDAL. OSGeo4W sembra estremamente simile a questo. I comandi sono gli stessi per entrambi.
Sia che tu abbia OSGeo4W o l'ambiente GDAL, il tuo prompt dei comandi dovrebbe apparire simile alla schermata precedente. Ora puoi iniziare a utilizzare lo script GDAL2Tiles.
Innanzitutto, è necessario navigare nella cartella in cui è salvata la mappa che si desidera tagliare. (Questi comandi sono utili per ottenere dove devi essere: dir ti dà una lista di tutto nella directory corrente, CD significa cambiare directory, CD… significa spostare di un livello l'albero).
Una volta che sei nella cartella corretta, puoi iniziare a creare le tue tessere. Per creare la mappa dimostrativa in questo tutorial, questi sono i comandi che ho usato -
Per spiegare cosa stanno facendo questi comandi, vedere il gdal_translate pagina e il gdal2tiles.py pagina. Esiste anche un comando GDAL warp strettamente correlato, ma in questo caso non è necessario. Alcune cose da notare sono:
I tre -GCP le proprietà si riferiscono a tre angoli della tua mappa. La prima coppia di valori dopo ciascuno GCP la proprietà si riferisce alle dimensioni in pixel del file immagine di input e la seconda coppia di valori sono le coordinate in metri sferici (non latitudine e longitudine - vedi sopra).
Quindi, per applicare questo alla tua mappa:
gdal_translate -of VRT -a_srs EPSG: 900913 -gcp 0 0 ovest nord -gcp width_of_your_input_map_file_in_pixels 0 est nord -gcp width_of_your_input_map_file_in_pixels height_of_your_input_map_file_in_pixels east south your_input_file_name.png your_output_file_name.vrt
Dopo aver sparato il secondo comando, il tuo computer prenderà vita e inizierà a tagliare la tua immagine per creare le tessere della mappa. Ti potrebbe piacere dare un'occhiata ai comandi esatti che ho digitato in OSGeo4W e negli ambienti GDAL se non sei sicuro di navigare tra le cartelle usando il prompt dei comandi.
Capire l'output
Indipendentemente dal metodo utilizzato per generare le tue tessere, le cartelle generate saranno le stesse.
Alcune delle piastrelle generate. Questi sono il livello di zoom 6, la posizione 'x' è 31, e la posizione 'y' è il nome di ciascun file.
Tutte le tessere su una mappa di Google hanno un valore 'x' e 'y'. (Sì - ancora un altro sistema di coordinate diverso!) Il primo livello di cartelle è il livello di zoom, quindi all'interno del quale il livello successivo di cartelle è la coordinata 'x' e all'interno del quale il nome del file è la coordinata 'y'.
Se dai un'occhiata alla mappa su questo sito web dovresti vedere che i nomi delle tue tessere corrispondono. In altre parole, vai nella posizione desiderata, regola il livello di zoom in modo che corrisponda al nome della cartella, quindi guarda i valori di Google 'x' e 'y'. Dovresti vedere che corrispondono alla sottocartella e ai nomi dei file per le tessere della mappa corrispondenti.
Per ricontrollare le tessere è OK, consiglio vivamente di copiare una o due tessere generate per il livello di zoom più basso nel file della mappa (ad esempio il file di Photoshop) creato durante la fase precedente. Verifica che si adattino esattamente in cima alla tua mappa. Dai un'occhiata ai file sorgente che ho fornito per un esempio di questo.
Se tutto va bene allora - congratulazioni - il duro lavoro è fatto!
Aiuto, Le mie tessere mappa non sono denominate correttamente!
Oh caro. Questo accadrà se hai usato la versione precedente del software MapTiler o dello script GDAL2Tiles. I file (ma non le cartelle) sono denominati utilizzando la convenzione di denominazione TMS. Se guardi le tessere in questa pagina puoi vedere che ogni tessera ha due valori xey; vale a dire. una coppia di Google e una coppia di TMS. Abbiamo solo bisogno di rinominarli alla convenzione di denominazione delle mappe di Google.
Questa rinomina può essere eseguita manualmente, ma impiegherà troppo tempo per la maggior parte delle mappe. Fortunatamente, c'è un pratico script di shell che farà il lavoro per te. È necessario conoscere un po 'dei comandi di base di Linux, come cambiare la cartella. Prima di eseguire lo script della shell, crea una copia delle tue tessere su cui lavorare.
#! / bin / sh per thisPath in 'ls -d * / * / *' fai thisFile = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1<
Copia e incolla lo script sopra nel Blocco note e salvalo con il nome "rinomina" e l'estensione ".sh". Quando salvi il file "sh" nel blocco note, assicurati che "tutti i file" accanto a "salva come tipo" sia selezionato e inserisci il nome tra virgolette, ad es. “Rename.sh”.
Se si utilizza un Mac, questo script di shell può essere eseguito in Terminale (selezionare applicazioni poi Utilità poi terminale).
Se si è su una macchina Windows, quindi per eseguire script di shell (o file '.sh') è necessario utilizzare Cygwin, che è un ambiente simile a Linux per Windows:
Scarica e installa Cygwin
Copia il file 'rename.sh' che hai appena salvato nella cartella cygwin \ bin.
Avvia Cygwin.
Sposta in cygwin \ bin cartella. (vale a dire. CD significa cambiare directory, CD… significa muovere l'albero di un livello, e ls indica i file e le cartelle nella directory corrente.)
È necessario anche convertirlo in un file Linux prima di eseguirlo altrimenti si otterranno errori di tipo "\ r" causati dalle interruzioni di riga. Quindi corri assicurati di essere ancora nel cygwin \ bin cartella ed eseguire d2u rename.sh
Quindi vai alla cartella che contiene le tue tessere (vedi la schermata sopra).
Quindi per eseguire lo script, digitare rename.sh
Dopo che lo script della shell è stato eseguito, puoi controllare che abbia fatto il lavoro dando un'altra occhiata ai tuoi file. Controlla se i loro nomi ora corrispondono alle coordinate di Google su questa pagina.
Se si confrontano i nomi dei file nei file "Parte 3" e "Parte 4" nei file di origine, è possibile vedere la differenza.
Comprimere i titoli della mappa
Per assicurarti che la tua mappa funzioni nel modo più fluido possibile, puoi comprimere i riquadri della mappa.
Ci sono varie utilità di compressione gratuite per le immagini png, ma ho faticato (e non sono riuscito) a trovarne una completamente libera e al lavoro. Ad esempio, il popolare software PNGGauntlet non ha conservato la struttura delle cartelle, mentre altre utilità gratuite avevano un limite sul numero massimo di file.
Alla fine ho dovuto mordere il proiettile e acquistare il software PNGOUTWin. Questo ha costato circa £ 10, che è un vero affare dato il fatto che è stato salvato! PNGOUTWin preserva entrambi la struttura del file e ti consente di comprimere tutti i tuoi file contemporaneamente.
Se usi PNGOUTWin, è piuttosto intuitivo. La mia unica parola di avvertimento è che dovresti fare una copia delle tue tessere e quindi eseguire il software sulla copia. Inoltre, fai attenzione che il software si avvii letteralmente non appena hai selezionato la cartella!
JavaScript Magic per portare tutto insieme
Ok, siamo quasi arrivati. Tutto ciò che rimane è la piccola questione di allegare le tue bellissime nuove mappe alla tua mappa di Google.
Il codice di base
Innanzitutto, dai un'occhiata a un semplice esempio di una sovrapposizione di mappe affiancate (i file di origine sono disponibili dal link nella parte superiore di questa pagina).
Se si ingrandisce e rimpicciolisce, la sovrapposizione della mappa rimane inserita.
// impostazione della mappa delle precipitazioni overlay var rainMapOverlay = new google.maps.ImageMapType (getTileUrl: function (coord, zoom) return 'tiles / rainfall' + '/' + zoom + '/' + coord.x + '/' + coord.y + '. png';, tileSize: new google.maps.Size (256, 256));
Questo snippet utilizza la classe ImageMapType per creare l'overlay personalizzato. Il coord.x si riferisce al nome della cartella e al coord.y si riferisce al nome del file. Questi sono uniti nel codice per creare il percorso per ogni tessera.
Agganciarlo alla mappa del festival del Regno Unito
Questo è il prodotto finale che stai mirando. Per creare questo, puoi usare le stesse tecniche spiegate verso la fine del tutorial precedente.
Per prima cosa creiamo una variabile (rainfallOverlayToggle) per stabilire se la sovrapposizione meteo è attualmente visualizzata o meno. E, quindi creando una nuova opzione nel handelRequests funzione per affrontare la situazione quando il pulsante dell'ombrello (ombrello) viene cliccato.
// Visualizza la mappa delle precipitazioni quando si fa clic sul pulsante Unbrella e rimosso se già visualizzato. altrimenti se (buttonPressed === "rainfall") // Se la mappa delle precipitazioni NON sta mostrando all'avvio allora mostrala ... if (rainfallOverlayToggle === 0) // Sovrappone la mappa delle precipitazioni sulla parte superiore del festival di Google mapMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Mostra la chiave meteo. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); rainfallOverlayToggle = 1; // Se la mappa delle precipitazioni sta già mostrando, nascondila ... else // rimuovi la mappa sovrapposta. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // rimuove la chiave meteo festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); rainfallOverlayToggle = 0;
Cosa Avanti?
Ben fatto per aver raggiunto la fine! Se avete domande, per favore chiedete via nei commenti. Il prossimo tutorial vedrà la connessione all'API di Flickr, che ti permetterà di catturare automaticamente le foto da Flickr e visualizzarle sulla tua mappa.
Share
Immagine del modello in cui crei la tua mappa. Questa immagine è in realtà 9984x11776 pixel 
La proiezione di Mercatore (in alto) e la proiezione di Gall-Peters (in basso) creano mappe bidimensionali piuttosto diverse. (Le griglie delle immagini sopra non sono correlate alle tessere della mappa di Google, che sono quadrate). 
GDAL2Tiles è lo script Python che si trova al centro della GUI di MapTiler. È possibile utilizzare questo script direttamente tramite l'interfaccia del prompt dei comandi. 
Il prompt dei comandi di GDAL. OSGeo4W sembra estremamente simile a questo. I comandi sono gli stessi per entrambi. 
Accentsconagua
