In onze vorige zelfstudie hebben we gekeken hoe u markeringen kunt toevoegen en de kleuren en menu's van een Google-kaart kunt aanpassen met behulp van de API van de service. Deze tutorial gaat een stap verder en legt uit hoe je je eigen aangepaste kaart kunt maken en bedekking het op een Google-kaart (zoals mijn 1896 kaart van Portsmouth).
In deze zelfstudie voegen we een 'weersvoorspellingen'-overlay toe aan de kaart die we eerder hebben gemaakt. De weerkaart die ik gebruik is volledig fictief, maar de technieken die worden behandeld geven je de vrijheid om allerlei interessante dingen te maken! Je zult in staat zijn om historische kaarten, op maat gemaakte kaarten, close-ups van specifieke gebieden zoals een universiteitscampus te bouwen - de lijst is eindeloos!
Google-kaarten bestaan uit veel verschillende tegels. Schermafbeelding van de uitstekende website 'Tegels à la Google Maps'.
Een paar dingen die u moet weten voordat u begint:
Een Google-kaart is gemaakt met behulp van veel 'tegels' van afbeeldingen (zie afbeelding hierboven). Met andere woorden, de kaart is gesplitst in een onzichtbaar raster en elk rastervierkant is een afzonderlijk beeldbestand van 256x256 pixels.
Voor elk zoomniveau hebt u een set beeldtegels nodig. Het zoomniveau is een getal, van nul naar boven, dat verandert als u in- en uitzoomt op de kaart (zie afbeelding hierboven).
Uw kaartoverlay begint zijn leven als een echt grote afbeelding (een jpeg of png), die u vervolgens in tegels kunt 'verdelen'. Het is een repetitief proces, in die zin dat de afbeelding één keer wordt opgedeeld om een reeks tegels te maken voor het eerste zoomniveau, en dan wordt het opnieuw in kleinere segmenten verdeeld om de tweede reeks tegels voor het volgende zoomniveau te maken, en spoedig.
Deze tutorial legt elke stap uit, inclusief de softwaretools die (gelukkig!) Beschikbaar zijn om dingen te automatiseren en het leven een stuk eenvoudiger te maken. De bronbestanden voor elke stap zijn beschikbaar in het downloadpakket.
Een sjabloon downloaden
Om te beginnen, is de eerste stap om een sjabloon te maken waarop u uw eigen overlay kunt maken.
Sjabloonafbeelding waarin u uw kaart maakt. Deze afbeelding is eigenlijk 9984x11776 pixels
Uw doel is om een sjabloon te maken in Photoshop (of een vergelijkbare grafische toepassing) die exact dezelfde grootte en vorm heeft als de Google-kaart waar u het bovenop wilt plaatsen, wanneer het op zijn hoogste zoomniveau. (maptiler.org is handig als je niet zeker weet wat het hoogste zoomniveau is dat je nodig hebt).
Hiertoe kunt u een sjabloontoewijzing opslaan met de mashup van de maptiler en deze vervolgens in Photoshop vergroten tot het gewenste maximale zoomniveau. Bijvoorbeeld:
Gebruik uw grafische toepassing om de sjabloonafbeelding te openen die u hebt opgeslagen.
Ga naar de website Tegels à la Google Maps en maak een screenshot van een segment van uw Google-kaart, op het door u gewenste maximale zoomniveau.
Plak de schermafbeelding in uw Photoshop-bestand.
Breid vervolgens uw sjabloonkaartafbeelding uit zodat deze exact wordt uitgelijnd met het overeenkomstige ingezoomde kaartsegment.
Verwijder vervolgens het ingezoomde segment. De kwaliteit van je sjabloontoewijzing zal niet geweldig zijn, maar dit maakt niet uit, je hebt het alleen nodig voor de omtrek en je zult het uiteindelijk verwijderen.
Tip: Een andere optie is de Google Maps Downloader, maar houd rekening met T & C's van Google. Ook is deze optie niet haalbaar voor grote en gedetailleerde kaarten; een UK-kaart die is ingezoomd tot niveau 12, is te groot om te openen in Photoshop.
In dit stadium zal ik dingen niet ingewikkeld maken! Dus bij een kleine wijziging in de vorige zelfstudie, heb ik het maximale zoomniveau gewijzigd van 12 in 10 om ons een beheersbare bestandsgrootte te geven om mee te werken.
Uw eigen kaart maken
Zodra u uw jpg-kaart hebt met behulp van het hierboven beschreven proces, opent u deze in Photoshop of uw gewenste grafische toepassing.
Mijn aangepaste overlay. Niet echt een showcase van artistiek talent die ik ken, maar het doet het werk voor deze demo. Je kaart zal er geweldig uitzien. (Ware grootte 7248x10929 png-bestand)
Je gebruikt deze afbeelding als een sjabloon en tekent er je eigen kaart bovenop. Dit is om ervoor te zorgen dat uw kaart perfect aansluit bij de Google-kaart.
Vergrendel je kaartsjabloonlaag.
Voeg een nieuwe laag / lagen toe.
Creëer iets geweldigs. (Eigenlijk, laat je niet te snel meenemen. Het is zelfs een goed idee om iets eenvoudigs te maken, zoals mijn weerkaart, en de rest van de tutorial te volgen om een idee te krijgen van wat er gebeurt. !)
Verberg de kaartsjabloonlaag.
Sla je kaart op als een png of jpg (als je in deze tutorial transparante delen hebt, zoals de zee, ga dan voor een png).
Kijk eens naar de weerkaartafbeelding die ik in deze fase heb gemaakt, die beschikbaar is in de brondownload.
Je kaart opdelen
Er zijn een aantal manieren waarop u uw afbeelding kunt indelen om de kaarttegels te maken. Als je een beetje achtergrondinformatie wilt over wat je aan het doen bent, lees dan verder. Anders, als het u niet uitmaakt waarom of hoe het werkt, gaat u gewoon door naar het volgende gedeelte!
Projectiesystemen
Een projectiesysteem, in de geografische zin, is hoe een platte kaart wordt gemaakt van een rond object, d.w.z. de globe. Er zijn allerlei (ronduit verbijsterende) formules en algoritmen om dit te bereiken. Het enige dat u moet weten, is dat verschillende projectiesystemen resulteren in verschillende platte kaarten van de wereld.
Mercator-projectie (boven) en de Gall-Peters-projectie (onder) creëren behoorlijk verschillende tweedimensionale kaarten. (De rasters op de bovenstaande afbeeldingen zijn niet gerelateerd aan de Google-kaarttegels, die vierkant zijn).
Om een overlapping voor een Google-kaart te maken, moet u het 'sferische Mercator'-systeem gebruiken dat de Mercator-projectie gebruikt. Dit wordt gedefinieerd als EPSG: 900913 of EPSG: 3857. Voor meer informatie over projectiesystemen, zie de webpagina Tiles à la Google Maps.
Elke kant van uw kaart vinden
Voordat u uw tegels kunt genereren, moet u de positie van de noord-, zuid-, west- en oostzijde van uw kaart bepalen. Omdat u het 'sferische Mercator'-systeem gebruikt, moeten deze in sferische meters zijn in tegenstelling tot de breedtegraad of lengtegraad.
Hoe de uitvoer op de Mashup-website te lezen: Linksboven getal = westzijde, rechtsboven = zuidzijde, linksonder = oostzijde, rechtsonder = noordzijde.
U kunt deze positiewaarden vinden met behulp van deze mashup. Ik heb gemerkt dat de eenvoudigste methode is om in te zoomen en een zijde tegelijk te vinden. Zoek dus de waarde voor de westkant van je kaart, maak er een notitie van, en vind de waarde voor de zuidkant, enzovoort.
Zodra u deze vier waarden hebt gevonden, kunt u uw kaart nu in tegels verdelen. Er zijn een aantal opties beschikbaar.
Snijoptie 1: MapTiler
Gelukkig is de MapTiler-software heel eenvoudig te gebruiken! Op het moment dat deze tutorial wordt geschreven, werkt MapTiler hun software bij. Maar ongeacht welke versie u downloadt, dit zijn de basisstappen:
Maptiler downloaden. Of de nieuwere bètaversie.
Start het programma en selecteer Google maps compatibele optie.
Voeg vervolgens de kaartafbeelding toe die u in de vorige stap hebt gemaakt.
U wordt gevraagd om de georeference van de grenzen van uw kaart, d.w.z. de positie in bolvormige meters van elke zijde die u zojuist hebt gevonden. In versie 0.41 (de meer recente versie van de twee versies) wordt dit een a Begrenzende Box. Wees voorzichtig met de volgorde waarin u de waarden invoert!
Wanneer u wordt gevraagd om uw ruimtelijke referentie- / coördinatensysteem te gebruiken ESPG: 3857 . (Als u de oude versie 1 (bèta) -versie van MapTiler gebruikt, gebruikt u EPSG: 900913).
Selecteer vervolgens de zoomniveaus waarvoor u tegels wilt genereren. De maximale waarde moet de waarde zijn die u bij het opslaan van uw sjabloon hebt opgeslagen toen u deze maakte (hierboven). De pagina Tegels à la Google Maps is handig om uit te vinden wat u nodig heeft voor de minimale zoomwaarde.
Ga naar het einde van de wizard en start de geven. Dit kan een tijdje duren; een goede gelegenheid om koffie te drinken!
Notitie: Als u de nieuwe versie van MapTiler gebruikt, is er een kaart; je kaarttegels hebben een watermerk. Ik vermoed dat in sommige gevallen, misschien voor een Uni-project of technische proof-of-concept, dit toch geen probleem is. Er zijn echter een aantal manieren om dit te omzeilen. De meest voor de hand liggende manier is om de upgrade voor $ 20 te kopen geloof ik. De andere optie is om het Pythonscript van GDAL2Tiles te gebruiken. Mijn persoonlijke voorkeur gaat uit naar de upgrade, omdat ik veel liever mijn tijd aan het creatieve spul zou besteden, dan aan het irriteren van het instellen van de scriptingomgeving, maar je voelt je misschien anders.
Tip: Als u problemen ondervindt bij het gebruik van de MapTiler-software, dan is het gebruikersforum uiterst nuttig.
Snijoptie 2: GDAL2Tiles
Een alternatief voor MapTiler is het script GDAL2Tiles. De MapTiler-software is eigenlijk bovenop dit script gebouwd, dat door de interface van de opdrachtprompt loopt.
GDAL2Tiles is het Python-script dat de kern vormt van de MapTiler GUI. U kunt dit script rechtstreeks gebruiken via de opdrachtprompt-interface.
GDAL2Tiles biedt nog meer mogelijkheden, maar het is ook een beetje lastiger om te gebruiken; dus lees alleen verder als je een gevoel van avontuur hebt!
De eerste stap is het opzetten van de omgeving om het GDAL2Tiles-script uit te voeren. Hoe u dit doet, is afhankelijk van uw besturingssysteem. Als u een 32-bit Windows-machine gebruikt (klik hier als u het niet zeker weet), dan kunt u OSGeo4W gebruiken..
Je moet eerst Python installeren en controleren of python op je padvariabele staat.
Download dan OSGeo4W.
Voer het installatieprogramma uit en selecteer Geavanceerde installatie.
kiezen libs en selecteer GDAL en GDAL-python in de geselecteerde pakketten.
Ga door en voltooi de installatie.
Wanneer dit klaar is, zou u het OSGeo4W-pictogram op uw bureaublad moeten hebben. Dit is een batchbestand om de opdrachtprompt te starten.
Als u een 64-bits Windows-machine gebruikt (klik hier als u het niet zeker weet), is de installatie iets anders. Deze instructies staan (met vriendelijke toestemming) rechtstreeks op de blog van Jaerock Kwon, die alle eer verdient voor het geven van dergelijke gedetailleerde instructies.
Installeer Python van x86-64.
Controleer of python op je padvariabele staat.
Python.exe uitvoeren. (bijvoorbeeld klik op C: \ Python27 \ python.py) We moeten de compilerversie vinden die de python heeft gebouwd. In mijn geval is de Python-versie 2.7.5 en deze is gecompileerd en gebouwd met Python 2.7.5 (standaard, 15 mei 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] op win32.
GDAL binaire pakketten voor 64bit-machines zijn te vinden op http://vbkto.dyndns.org/sdk/. Selecteer een overeenkomstige versie in de tabel. In mijn geval is release-1500-x64-gdal-1-10-mapserver-6-2 de juiste versie in de rij "MSVC2008 (Win64) -stable" omdat de Python werd gebouwd door 1500.
Generic installer downloaden voor de GDAL-kerncomponenten. In mijn geval - gdal-110-1500-x64-core.msi
Download het installatieprogramma voor de GDAL-python-bindingen (vereist om de GDAL-kern te installeren). In mijn geval GDAL-1.10.0.win-amd64-py2.7.msi - Ik koos dit omdat 1.10.0 de nieuwste is en mijn Python 2.7.5.
Installeer de GDAL-kerncomponenten. Er is geen optie om de bestemmingsmap voor de GDAL-kern te kiezen. Het zal worden geïnstalleerd in de map "C: \ Program Files \ GDAL".
Installeer de GDAL python-bindingen.
Na de binding kunt u de GDAL-map verplaatsen naar C: \ Program Files naar waar u maar wilt.
Klik ten slotte op de Begin menu en vervolgens Alle programma's en dan GDAL. Dit zou de commandoregelprompt moeten starten.
Dus ervan uitgaande dat je het (soms traumatische!) Proces van het opzetten van de GDAL2Tiles-softwareomgeving hebt doorstaan, is het tijd om er iets mee te doen.
De opdrachtprompt van GDAL. De OSGeo4W lijkt hier erg op. De opdrachten zijn hetzelfde voor beide.
Of u nu de OSGeo4W- of de GDAL-omgeving gebruikt, uw opdrachtprompt moet er ongeveer zo uitzien als de bovenstaande schermafbeelding. U kunt nu beginnen met het script GDAL2Tiles te gebruiken.
Eerst moet u naar de map navigeren waar de kaart die u wilt opdelen wordt opgeslagen. (Deze commando's zijn handig om te krijgen waar je moet zijn: dir geeft je een lijst met alles in de huidige map, CD betekent map wijzigen, CD… betekent één niveau hoger in de boom bewegen).
Als je eenmaal in de juiste map bent, kun je beginnen met het maken van je tegels. Om de demokaart in deze zelfstudie te maken, zijn dit de opdrachten die ik heb gebruikt -
Zie de. Om uit te leggen wat deze opdrachten aan het doen zijn gdal_translate pagina en de gdal2tiles.py pagina. Er is ook een GDAL-warp-opdracht die nauw verwant is, maar in dit geval is dit niet nodig. Een paar dingen om op te merken zijn:
De boom -gcp eigenschappen hebben betrekking op drie hoeken van uw kaart. Het eerste paar waarden na elk gcp eigenschap heeft betrekking op de afmetingen in pixels van uw invoerafbeeldingsbestand en het tweede paar waarden zijn de coördinaten in bolvormige meters (niet lengte- en breedtegraad - zie hierboven).
Dus om dit op je kaart toe te passen:
gdal_translate -of VRT -a_srs EPSG: 900913 -gcp 0 0 west noord -gcp width_of_your_input_map_file_in_pixels 0 oost noord -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
Nadat je de tweede opdracht hebt geactiveerd, komt je computer tot leven en begin je je afbeelding te verkleinen om de kaarttegels te maken. Misschien wilt u eens kijken naar de exacte opdrachten die ik in de OSGeo4W- en de GDAL-omgeving heb getypt als u niet zeker weet hoe u door de mappen navigeert met behulp van de opdrachtprompt.
De uitvoer begrijpen
Ongeacht de methode die u gebruikte om uw tegels te genereren, zullen de gegenereerde mappen hetzelfde zijn.
Sommige van de tegels gegenereerd. Dit zijn zoomniveau 6, de 'x'-positie is 31 en de' y'-positie is de naam van elk bestand.
Alle tegels op een Google-kaart hebben de waarde 'x' en 'y'. (Ja - nog een ander ander coördinatensysteem!) Het eerste niveau van mappen is het zoomniveau, dan is binnen dat het volgende niveau van mappen de 'x' coördinaat, en daarbinnen is de bestandsnaam de 'y'-coördinaat.
Als u de kaart op deze website bekijkt, zou u moeten zien dat de namen van uw tegels overeenkomen. Ga met andere woorden naar de gewenste locatie, pas het zoomniveau aan zodat het overeenkomt met uw mapnaam en kijk vervolgens naar de x- en y-waarden van Google. U zou moeten zien dat ze overeenkomen met uw submap en bestandsnamen voor de corresponderende kaarttegels.
Om te controleren of uw tegels in orde zijn, raad ik u ten zeerste aan om één of twee tegels die zijn gegenereerd voor het laagste zoomniveau terug te kopiëren naar uw kaartbestand (bijvoorbeeld het Photoshop-bestand) dat in de vorige fase is gemaakt. Controleer of ze precies op uw kaart passen. Neem een kijkje in de bronbestanden die ik heb verstrekt voor een voorbeeld hiervan.
Als alles goed is, dan - gefeliciteerd - is het harde werk gedaan!
Help, mijn kaarttegels zijn niet correct benoemd!
Oh jee. Dit gebeurt als u de oudere versie van de MapTiler-software of het script GDAL2Tiles hebt gebruikt. Uw bestanden (maar niet de mappen) worden genoemd met de naamgevingsconventie van TMS. Als u de tegels op deze pagina bekijkt, kunt u zien dat elke tegel twee x- en y-waarden heeft; d.w.z. een Google-paar en een TMS-paar. We moeten ze gewoon hernoemen naar de naamgevingsconventie voor Google-kaarten.
Dit hernoemen kan handmatig gebeuren, maar het zal veel te lang duren voor de meeste kaarten. Gelukkig is er een handig shellscript dat het werk voor je zal doen. U moet iets weten over de meest elementaire Linux-opdrachten, zoals het wijzigen van de map. Maak voordat je het shell-script uitvoert een kopie van je tegels om aan te werken.
#! / bin / sh voor thisPath in 'ls -d * / * / *' do thisFile = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1<
Kopieer en plak het bovenstaande script in Kladblok en sla het op met de naam 'hernoemen' en de extensie '.sh'. Zorg ervoor dat bij het opslaan van het 'sh'-bestand in Kladblok' alle bestanden 'naast' Opslaan als type 'is geselecteerd en zet de naam tussen aanhalingstekens, bijvoorbeeld “Rename.sh”.
Als u een Mac gebruikt, kan dit shellscript in Terminal worden uitgevoerd (selecteer toepassingen dan nutsbedrijven dan Terminal).
Als u op een Windows-computer werkt, moet u voor het uitvoeren van shellscripts (of '.sh'-bestanden) Cygwin gebruiken, wat een Linux-achtige omgeving voor Windows is:
Download en installeer Cygwin
Kopieer het bestand 'rename.sh' dat u zojuist in de map cygwin \ bin hebt opgeslagen.
Start Cygwin.
Ga naar de cygwin \ bin map. (d.w.z. CD betekent map wijzigen, CD… betekent op één niveau omhooggaan, en ls middelen tonen de bestanden en mappen in de huidige map.)
Maak rename.sh uitvoerbaar door te draaien chmod 755 hername.sh
Je moet het ook omzetten naar een Linux-bestand voordat je het uitvoert, anders krijg je '\ r' fouten veroorzaakt door de regeleinden. Dus ren erover dat je nog steeds in de cygwin \ bin map en uitvoeren d2u hername.sh
Ga vervolgens naar de map met uw tegels (zie de schermafbeelding hierboven).
Typ vervolgens om het script uit te voeren rename.sh
Nadat het shellscript is uitgevoerd, kunt u controleren of de taak is voltooid door nog een keer naar uw bestanden te kijken. Controleer of hun namen nu overeenkomen met de Google-coördinaten op deze pagina.
Als u de bestandsnamen in de mappen 'Deel 3-bestanden' en de map 'Deel 4-bestanden' in de bronbestanden vergelijkt, ziet u het verschil.
Uw kaarttitels comprimeren
Om ervoor te zorgen dat uw kaart zo soepel mogelijk werkt, kunt u uw kaarttegels comprimeren.
Er zijn verschillende gratis compressieprogramma's voor png-afbeeldingen, maar ik had moeite (en faalde) om er een te vinden die volledig gratis was en het werk deed. De populaire PNGGauntlet-software bewaarde bijvoorbeeld niet de mapstructuur, terwijl andere gratis hulpprogramma's een limiet op het maximale aantal bestanden hadden.
Uiteindelijk moest ik bijtanken en de PNGOUTWin-software kopen. Dit kost ongeveer £ 10, wat een koopje is gezien de faffing rond dat het bespaard! PNGOUTWin behoudt allebei de bestandsstructuur en laat je al je bestanden in één keer comprimeren.
Als u PNGOUTWin gebruikt, is het vrij intuïtief. Mijn enige waarschuwing is dat je een kopie van je tegels moet maken en de software vervolgens op de kopie moet uitvoeren. Let er ook op dat de software letterlijk start zodra u de map hebt geselecteerd!
JavaScript Magic om alles samen te brengen
Oké, we zijn er bijna. Het enige dat overblijft is de kleine kwestie van het bevestigen van je mooie nieuwe kaarttegels aan je Google-kaart.
De basiscode
Bekijk eerst een eenvoudig voorbeeld van een overlay met een betegelde kaart (bronbestanden zijn beschikbaar via de link bovenaan deze pagina).
Als u in- en uitzoomt, blijft de kaart-overlay behouden.
// instellen van de overlay met de regenkaart 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));
Dit fragment gebruikt de klasse ImageMapType om de aangepaste overlay te maken. De coord.x heeft betrekking op de mapnaam en de coord.y heeft betrekking op de bestandsnaam. Deze worden samengevoegd in de code om het pad naar elke tegel te maken.
Aansluiten op de UK Festival Map
Dit is het uiteindelijke product waarnaar u streeft. Om dit te maken, kunt u dezelfde technieken gebruiken die aan het einde van de vorige zelfstudie zijn uitgelegd.
We maken eerst een variabele (rainfallOverlayToggle) om aan te geven of de weer-overlay momenteel wordt getoond of niet. En vervolgens een nieuwe optie maken in de handelRequests functie om te gaan met de situatie wanneer de paraplu-knop (parasol) is geklikt.
// Geeft de neerslagkaart weer wanneer op de knop unbrella wordt geklikt en deze wordt verwijderd als deze al wordt weergegeven. else if (buttonPressed === "rainfall") // Als de regenkaart NIET permanent wordt weergegeven, laat deze dan zien ... if (rainfallOverlayToggle === 0) // overlapt de neerslagkaart bovenop het kaartmapfestivalMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Toon de weersleutel. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .Schuif (weatherKeyDiv); rainfallOverlayToggle = 1; // Als de kaart met regenval al wordt weergegeven, verberg deze dan ... anders // verwijder de overlaykaart. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // verwijder de weercode festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); rainfallOverlayToggle = 0;
Wat nu?
Goed gedaan om het einde te bereiken! Als je nog vragen hebt, vraag het dan in de comments. In de volgende zelfstudie wordt de verbinding met de Flickr API bekeken, zodat u automatisch foto's van Flickr kunt pakken en ze op uw kaart kunt weergeven.
Share
Sjabloonafbeelding waarin u uw kaart maakt. Deze afbeelding is eigenlijk 9984x11776 pixels 
Mercator-projectie (boven) en de Gall-Peters-projectie (onder) creëren behoorlijk verschillende tweedimensionale kaarten. (De rasters op de bovenstaande afbeeldingen zijn niet gerelateerd aan de Google-kaarttegels, die vierkant zijn). 
GDAL2Tiles is het Python-script dat de kern vormt van de MapTiler GUI. U kunt dit script rechtstreeks gebruiken via de opdrachtprompt-interface. 
De opdrachtprompt van GDAL. De OSGeo4W lijkt hier erg op. De opdrachten zijn hetzelfde voor beide. 
Accentsconagua
