Dans notre précédent tutoriel, nous avons expliqué comment ajouter des marqueurs et personnaliser les couleurs et les menus d'une carte Google à l'aide de l'API du service. Ce didacticiel va un peu plus loin et explique comment vous pouvez créer votre propre carte personnalisée et recouvrir sur une carte Google (telle que ma carte 1896 de Portsmouth).
Dans ce didacticiel, nous allons ajouter une superposition de "prévisions météorologiques" à la carte que nous avons précédemment créée. La carte météo que j'utilise est entièrement fictive, mais les techniques abordées vous donneront la liberté de créer toutes sortes de choses intéressantes! Vous pourrez créer des cartes historiques, des cartes personnalisées, des plans rapprochés de zones spécifiques telles qu'un campus universitaire - la liste est interminable.!
Les cartes Google sont composées de nombreuses tuiles distinctes. Capture d'écran extraite de l'excellent site Web "Tiles à la Google Maps".
Quelques points à connaître avant de commencer:
Une carte Google est créée à l'aide de nombreuses "tuiles" (voir l'image ci-dessus). En d’autres termes, la carte est divisée en une grille invisible et chaque carré de la grille est un fichier image distinct de 256x256 pixels..
Vous avez besoin d'un ensemble de mosaïques d'image pour chaque niveau de zoom. Le niveau de zoom est un nombre, à partir de zéro, qui change lorsque vous effectuez un zoom avant ou arrière sur la carte (voir l'image ci-dessus)..
La superposition de votre carte commence sa vie sous la forme d'une très grande image (jpeg ou png), que vous «découpez» ensuite en mosaïques. Il s’agit d’un processus répétitif, c’est-à-dire que l’image est découpée une fois pour créer un ensemble de mosaïques pour le premier niveau de zoom, puis redimensionnée en segments plus petits pour créer le deuxième ensemble de mosaïques pour le niveau de zoom suivant, et bientôt.
Ce tutoriel explique chaque étape, y compris les outils logiciels disponibles (heureusement!) Pour automatiser les tâches et rendre la vie beaucoup plus facile. Les fichiers source pour chaque étape sont disponibles dans le package de téléchargement.
Télécharger un modèle
Pour commencer, la première étape consiste à créer un modèle sur lequel vous pouvez créer votre propre superposition..
Image modèle dans laquelle vous créez votre carte. Cette image est en réalité 9984x11776 pixels
Votre objectif est de créer un modèle dans Photoshop (ou une application graphique équivalente) ayant exactement la même taille et la même forme que la carte Google que vous allez superposer, lorsqu'elle sera à son niveau. niveau de zoom le plus élevé. (maptiler.org est utile si vous n’êtes pas sûr du niveau de zoom le plus élevé dont vous avez besoin).
Pour ce faire, vous pouvez enregistrer un modèle de carte à l'aide du mashup de Maptiler, puis l'agrandir dans Photoshop au niveau de zoom maximal souhaité. Par exemple:
Utilisez votre application graphique pour ouvrir l'image de carte modèle que vous avez enregistrée..
Accédez au site Web Tuiles à la carte Google Maps et faites une capture d'écran d'un segment de votre carte Google, au niveau de zoom maximal requis..
Collez la capture d'écran dans votre fichier Photoshop.
Puis agrandissez votre modèle de carte afin qu’il soit parfaitement aligné sur le segment de carte agrandi correspondant..
Ensuite, supprimez le segment zoomé. La qualité de votre modèle de carte ne sera pas excellente, mais peu importe, vous en aurez simplement besoin pour le contour et vous le supprimerez éventuellement..
Pointe: Une autre option est le téléchargeur de Google Maps, mais tenez compte des conditions générales de Google. En outre, cette option n'est pas viable pour les cartes volumineuses et détaillées. une carte du Royaume-Uni agrandie au niveau 12 sera trop grande pour être ouverte dans Photoshop.
A ce stade, je ne vais pas compliquer les choses! Donc, dans une légère modification par rapport au didacticiel précédent, j'ai modifié le niveau de zoom maximal de 12 à 10 afin de nous permettre de gérer une taille de fichier gérable..
Créer votre propre carte
Une fois que vous avez votre carte jpg en utilisant le processus décrit ci-dessus, ouvrez-la dans Photoshop ou votre application graphique préférée..
Ma superposition personnalisée. Ce n’est pas vraiment une vitrine de talent artistique que je connais, mais cela fait le travail pour cette démo. Votre carte sera superbe. (Fichier png de taille réelle 7248x10929)
Vous utiliserez cette image comme modèle et dessinerez votre propre carte par dessus. Cela permet de vous assurer que votre carte est parfaitement alignée sur la carte Google..
Verrouillez votre couche de modèle de carte.
Ajouter un nouveau calque / s.
Créer quelque chose d'incroyable. (En fait, ne vous laissez pas emporter par le début. En fait, c'est une bonne idée de créer quelque chose de fondamental, comme ma carte météo, et de suivre le reste du didacticiel pour avoir une idée de ce qui se passe. Créez ensuite quelque chose d'extraordinaire. !)
Masquer la couche de modèle de carte.
Enregistrez votre carte au format png ou jpg (si vous avez des parties transparentes, telles que la mer dans ce tutoriel, optez pour un png).
Jetez un coup d’œil à l’image de la carte météo que j’ai créée à ce stade, qui est disponible dans le téléchargement source.
Découper votre carte
Vous pouvez découper votre image de différentes manières pour créer les mosaïques de carte. Si vous voulez un peu d’information sur ce que vous faites, lisez la suite. Sinon, si vous ne vous souciez pas de savoir pourquoi ou comment cela fonctionne, passez directement à la section suivante.!
Systèmes de projection
Un système de projection, au sens géographique, est la manière dont une carte plate est créée à partir d’un objet rond, c’est-à-dire du globe. Il existe toutes sortes de formules et d’algorithmes (franchement déroutants) pour y parvenir. Tout ce que vous devez savoir, c’est que différents systèmes de projection génèrent différentes cartes à plat du monde..
La projection de Mercator (en haut) et la projection de Gall-Peters (en bas) créent des cartes bidimensionnelles assez différentes. (Les grilles sur les images ci-dessus ne sont pas liées aux tuiles de carte Google, qui sont carrées).
Pour créer un chevauchement pour une carte Google, vous devez utiliser le système «Mercator sphérique» qui utilise la projection de Mercator. Ceci est défini comme EPSG: 900913 ou EPSG: 3857. Pour en savoir plus sur les systèmes de projection, voir la page Web Tiles à la Google Maps.
Trouver chaque côté de votre carte
Avant de pouvoir générer vos tuiles, vous devez déterminer la position des côtés nord, sud, ouest et est de votre carte. Comme vous utilisez le système 'Spherical Mercator', ceux-ci doivent être en mètres sphériques, par opposition à la latitude ou la longitude..
Comment lire la sortie sur le site Web de Mashup: Numéro en haut à gauche = côté ouest, numéro en haut à droite = côté sud, numéro en bas à gauche = côté est, numéro en bas à droite = côté nord.
Vous pouvez trouver ces valeurs de position à l'aide de ce mashup. J'ai trouvé que la méthode la plus simple consiste à effectuer un zoom avant et à trouver un côté à la fois. Recherchez donc la valeur du côté ouest de votre carte, notez-la, puis recherchez la valeur du côté sud, etc..
Une fois que vous avez trouvé ces quatre valeurs, vous pouvez maintenant «découper» votre carte en mosaïques. Il y a deux options disponibles.
Option de découpage 1: MapTiler
Heureusement, le logiciel MapTiler est vraiment simple à utiliser! Au moment de la rédaction de ce tutoriel, MapTiler met à jour son logiciel. Mais quelle que soit la version que vous téléchargez, voici les étapes de base:
Téléchargez Maptiler. Ou la nouvelle version bêta.
Démarrer le programme et sélectionner Google Maps option compatible.
Ajoutez ensuite l'image de la carte créée à l'étape précédente..
Vous serez invité à donner le géoréférence des limites de votre carte, c’est-à-dire la position en mètres sphériques de chaque côté que vous venez de trouver. Dans la version 0.41 (la plus récente des deux versions), on parle de Bounding Box. Soyez prudent avec l'ordre dans lequel vous entrez les valeurs!
Lorsqu'on vous le demande pour votre référence spatiale / système de coordonnées, utilisez ESPG: 3857 . (Si vous utilisez l'ancienne version 1 (beta) de MapTiler, utilisez EPSG: 900913).
Sélectionnez ensuite les niveaux de zoom pour lesquels vous souhaitez générer des mosaïques. La valeur maximale doit être celle que vous avez enregistrée lors de la création de votre carte modèle (ci-dessus). La page Tuiles à la carte Google Maps est utile pour déterminer ce dont vous avez besoin pour la valeur minimale du zoom..
Continuez jusqu’à la fin de l’assistant et lancez la Rendre. Cela peut prendre un certain temps. une bonne occasion de prendre un café!
Remarque: Si vous utilisez la nouvelle version de MapTiler, il y a un piège; vos tuiles de carte sont filigranées. Je suppose que dans certains cas, peut-être pour un projet Uni ou une preuve de concept technique, ce n'est pas un problème de toute façon. Cependant, il y a plusieurs façons de contourner ce problème. Le moyen le plus évident est d'acheter la mise à niveau pour 20 $, je crois. L'autre option consiste à utiliser le script python GDAL2Tiles. Ma préférence personnelle est d’opter pour la mise à niveau car je préférerais passer mon temps à la création plutôt qu’à supporter les irritations liées à la configuration de l’environnement de script, mais vous pouvez vous sentir différent..
Pointe: Si vous rencontrez des problèmes avec le logiciel MapTiler, le forum des utilisateurs est extrêmement utile..
Tranche Option 2: GDAL2Tiles
Une alternative à MapTiler est le script GDAL2Tiles. Le logiciel MapTiler est en fait construit sur ce script, qui s'exécute via l'interface d'invite de commande..
GDAL2Tiles est le script Python qui est au cœur de l'interface graphique de MapTiler. Vous pouvez utiliser ce script directement via l'interface d'invite de commande.
GDAL2Tiles offre d'autres possibilités, mais son utilisation est également un peu plus délicate. alors ne continuez à lire que si vous avez le sens de l'aventure!
La première étape consiste à configurer l'environnement pour exécuter le script GDAL2Tiles. Cela dépend de votre système d'exploitation. Si vous utilisez une machine Windows 32 bits (cliquez ici si vous n’êtes pas sûr), vous pouvez utiliser le fichier OSGeo4W..
Vous devez d’abord installer Python et vérifier que Python est sur votre variable de chemin..
Alors téléchargez OSGeo4W.
Exécutez le programme d'installation et sélectionnez Installation avancée.
Sélectionner Libs et sélectionnez Gdal et gdal-python dans les packages sélectionnés.
Continuer et terminer l'installation.
Lorsque cela est fait, vous devriez avoir l’icône OSGeo4W sur votre bureau. Ceci est un fichier de commandes pour démarrer l'invite de commande.
Si vous utilisez une machine Windows 64 bits (cliquez ici si vous n’êtes pas sûr), la configuration est un peu différente. Ces instructions sont citées (avec l'aimable autorisation) directement du blog de Jaerock Kwon, qui mérite tout le crédit pour avoir donné des instructions aussi détaillées.
Installer Python à partir de x86-64.
Vérifiez que python est sur votre variable de chemin.
Exécutez python.exe. (par exemple, cliquez sur C: \ Python27 \ python.py) Nous devons trouver la version du compilateur qui a construit le python. Dans mon cas, la version Python est 2.7.5 et elle a été compilée et construite avec Python 2.7.5 (défaut, 15 mai 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] sur win32.
Les packages binaires GDAL pour les machines 64 bits peuvent être trouvés sur http://vbkto.dyndns.org/sdk/. Sélectionnez une version correspondante dans la table. Dans mon cas, release-1500-x64-gdal-1-10-mapserver-6-2 est la bonne version de la rangée "MSVC2008 (Win64) -stable", car le Python a été construit par 1500.
Téléchargez le programme d'installation générique pour les composants de base de GDAL. Dans mon cas - gdal-110-1500-x64-core.msi
Téléchargez le programme d'installation pour les liaisons python GDAL (nécessite l'installation du noyau GDAL). Dans mon cas, GDAL-1.10.0.win-amd64-py2.7.msi - J'ai choisi ceci car 1.10.0 est le dernier et mon Python est 2.7.5.
Installez les principaux composants de GDAL. Il n'y a pas d'option pour choisir le dossier de destination pour le noyau GDAL. Il sera installé dans le dossier “C: \ Program Files \ GDAL”..
Installer les liaisons Python GDAL.
Après la liaison, vous pouvez déplacer le dossier GDAL dans C: \ Program Files dans le répertoire de votre choix..
Enfin, cliquez sur le Début menu puis Tous les programmes et alors GDAL. Cela devrait démarrer l'invite de ligne de commande.
Donc, en supposant que vous ayez suivi le processus (parfois traumatisant!) De configuration de l'environnement logiciel GDAL2Tiles, il est temps de faire quelque chose avec..
La ligne de commande de GDAL. L'OSGeo4W ressemble beaucoup à cela. Les commandes sont les mêmes pour les deux.
Que vous ayez l'environnement OSGeo4W ou GDAL, votre invite de commande devrait ressembler à la capture d'écran ci-dessus. Vous pouvez maintenant commencer à utiliser le script GDAL2Tiles.
Tout d'abord, vous devez naviguer dans le dossier où la carte que vous souhaitez découper est enregistrée. (Ces commandes sont utiles pour vous rendre où vous devez être: dir vous donne une liste de tout ce qui se trouve dans le répertoire courant, CD signifie changer de répertoire, CD… signifie déplacer d'un niveau vers le haut de l'arbre).
Une fois que vous êtes dans le bon dossier, vous pouvez commencer à créer vos tuiles. Pour créer la carte de démonstration dans ce tutoriel, ce sont les commandes que j'ai utilisées -
Pour expliquer ce que font ces commandes, voir le gdal_translate page et la gdal2tiles.py page. Il existe également une commande de chaîne GDAL étroitement liée, mais elle n’est pas nécessaire dans ce cas. Quelques choses à noter sont:
L'arbre -gcp les propriétés se rapportent aux trois coins de votre carte. La première paire de valeurs après chaque gcp propriété concerne les dimensions en pixels de votre fichier image en entrée et la deuxième paire de valeurs correspond aux coordonnées en mètres sphériques (et non en latitude et en longitude, voir ci-dessus)..
Une fois la deuxième commande lancée, votre ordinateur reprend vie et commence à découper votre image pour créer les mosaïques de la carte. Vous pouvez consulter les commandes exactes que j’ai tapées dans les environnements OSGeo4W et GDAL si vous n’êtes pas sûr de naviguer dans les dossiers à l’aide de l’invite de commande..
Comprendre le résultat
Quelle que soit la méthode utilisée pour générer vos tuiles, les dossiers générés seront les mêmes..
Certaines des tuiles générées. Il s’agit du niveau de zoom 6, la position «x» est de 31 et la position «y» est le nom de chaque fichier..
Toutes les mosaïques d'une carte Google ont une valeur "x" et "y". (Oui - encore un autre système de coordonnées différent!) Le premier niveau de dossiers est le niveau de zoom, puis à l'intérieur de ce niveau, le prochain niveau de dossiers est la coordonnée 'x' et à l'intérieur de ce nom de fichier, la coordonnée 'y'..
Si vous regardez la carte sur ce site, vous devriez voir que les noms de vos tuiles correspondent. En d’autres termes, allez à l’emplacement de votre choix, réglez le niveau de zoom de sorte qu’il corresponde au nom de votre dossier, puis examinez les valeurs «x» et «y» de Google. Vous devriez voir qu'ils correspondent à vos sous-dossiers et noms de fichiers pour les tuiles de carte correspondantes..
Pour vérifier que vos vignettes sont correctes, je vous recommande vivement de copier une ou deux des vignettes générées pour le niveau de zoom le plus faible dans votre fichier de carte (par exemple, le fichier Photoshop) créé au cours de l'étape précédente. Vérifiez qu'ils correspondent exactement au-dessus de votre carte. Jetez un coup d’œil dans les fichiers sources que j’ai fournis pour un exemple..
Si tout va bien alors - félicitations - le dur travail est fait!
Aide, les vignettes de ma carte ne sont pas nommées correctement!
Oh cher. Cela se produira si vous avez utilisé l'ancienne version du logiciel MapTiler ou le script GDAL2Tiles. Vos fichiers (mais pas les dossiers) sont nommés selon la convention de dénomination TMS. Si vous regardez les carreaux sur cette page, vous pouvez voir que chaque carreau a deux valeurs x et y; c'est à dire. une paire Google et une paire TMS. Il suffit de les renommer selon la convention de nommage des cartes Google..
Ce changement de nom peut être fait manuellement, mais cela prendra beaucoup trop de temps pour la plupart des cartes. Heureusement, il existe un script shell pratique qui fera le travail pour vous. Vous devez en savoir un peu plus sur les commandes très basiques de Linux, telles que la façon de changer de dossier. Avant d’exécuter le script shell, faites une copie de vos tuiles sur lesquelles travailler..
#! / bin / sh pour thisPath dans 'ls -d * / * / *' do thisFile = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1<
Copiez et collez le script ci-dessus dans le Bloc-notes et enregistrez-le sous le nom 'renommer' et l'extension '.sh'. Lorsque vous enregistrez le fichier "sh" dans le bloc-notes, assurez-vous que "tous les fichiers" en regard de "enregistrer en tant que type" est sélectionné et mettez le nom entre guillemets, par exemple. "Renommer.sh".
Si vous utilisez un Mac, ce script shell peut être exécuté dans Terminal (sélectionnez Applications puis Utilitaires puis Terminal).
Si vous êtes sur une machine Windows, pour exécuter des scripts shell (ou des fichiers '.sh'), vous devez utiliser Cygwin, qui est un environnement semblable à Linux pour Windows:
Téléchargez et installez Cygwin
Copiez le fichier 'rename.sh' que vous venez de sauvegarder dans le dossier cygwin \ bin.
Démarrer Cygwin.
Déplacer vers le cygwin \ bin dossier. (c'est à dire. CD signifie changer de répertoire, CD… signifie déplacer l'arbre d'un niveau, et ls signifie afficher les fichiers et les dossiers du répertoire en cours.)
Rendre exécutable rename.sh en lançant chmod 755 rename.sh
Vous devez également le convertir en fichier Linux avant de l’exécuter, sinon vous obtiendrez des erreurs "\ r" causées par les sauts de ligne. Alors, assurez-vous que vous êtes toujours dans le cygwin \ bin dossier et courir d2u rename.sh
Puis déplacez-vous dans le dossier contenant vos tuiles (voir la capture d'écran ci-dessus).
Ensuite, pour exécuter le script, tapez renommer.sh
Une fois le script shell exécuté, vous pouvez vérifier que le travail est bien fait en consultant vos fichiers. Vérifiez si leurs noms correspondent maintenant aux coordonnées Google sur cette page.
Si vous comparez les noms de fichier dans les dossiers "Fichiers de la partie 3" et "Fichiers de la partie 4" dans les fichiers source, vous pourrez constater la différence..
Compresser vos titres de carte
Pour vous assurer que votre carte fonctionne le mieux possible, vous pouvez compresser les tuiles de la carte..
Il existe différents utilitaires de compression gratuits pour les images png, mais je me suis battu (et j’ai échoué) pour en trouver un qui était totalement gratuit et qui a fait le travail. Par exemple, le logiciel populaire PNGGauntlet ne préservait pas la structure des dossiers, alors que d'autres utilitaires gratuits imposaient une limite au nombre maximal de fichiers..
Finalement, j'ai dû mordre la balle et acheter le logiciel PNGOUTWin. Cela coûte environ 10 £, ce qui est une bonne affaire étant donné les inconvénients qui ont été épargnés! PNGOUTWin préserve la structure du fichier et vous permet de compresser tous vos fichiers à la fois..
Si vous utilisez PNGOUTWin, c'est plutôt intuitif. Mon seul avertissement est que vous devez faire une copie de vos tuiles, puis exécuter le logiciel sur la copie. Veillez également à ce que le logiciel démarre littéralement dès que vous avez sélectionné le dossier.!
JavaScript magique pour tout réunir
Ok, nous y sommes presque. Il ne reste plus qu'à attacher vos nouvelles superbes tuiles à votre carte Google..
Le code de base
Tout d’abord, jetez un coup d’œil à un exemple simple de superposition d’une carte en mosaïque (les fichiers source sont disponibles à partir du lien en haut de cette page).
Si vous effectuez un zoom avant ou arrière, la superposition de carte reste en place.
// configuration de la superposition de la carte de précipitations var rainMapOverlay = new google.maps.ImageMapType (getTileUrl: function (coord, zoom) return 'tiles / précipitations' + '/' + zoom + '/' + coord.x + '/' + coord.y + '. png';, tileSize: nouveau google.maps.Size (256, 256));
Cet extrait utilise la classe ImageMapType pour créer la superposition personnalisée. le coord.x concerne le nom du dossier et le coord.y se rapporte au nom du fichier. Ceux-ci sont réunis dans le code pour créer le chemin d'accès à chaque tuile.
Raccordement à la carte du festival britannique
Ceci est le produit final que vous visez. Pour créer cela, vous pouvez utiliser les mêmes techniques que celles décrites à la fin du didacticiel précédent..
Nous créons d'abord une variable (précipitationsOverlayToggle) pour déterminer si la superposition météo est actuellement affichée ou non. Et puis créer une nouvelle option dans le handelRequests fonction pour faire face à la situation lorsque le bouton de parapluie (brolly) est cliqué.
// Affiche la carte des précipitations lorsque l'utilisateur clique sur le bouton Unbrella et la supprime si elle est déjà affichée. else if (buttonPressed === "pluies") // Si la carte des précipitations ne s'affiche pas déjà, montrez-la… if (précipitationsOverlayToggle === 0) // Superpose la carte des précipitations au sommet de la carte Google festivalMap.overlayMapTypes .insertAt (0, rainMapOverlay); // Affiche la clé météo. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); précipitationsOverlayToggle = 1; // Si la carte des précipitations est déjà affichée, masquez-la… else // supprime la carte superposée. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // supprime la clé météo festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); précipitationsOverlayToggle = 0;
Quoi ensuite?
Bravo pour atteindre la fin! Si vous avez des questions, veuillez les demander dans les commentaires. Le prochain tutoriel se penchera sur la connexion à l'API Flickr, vous permettant de saisir automatiquement des photos à partir de Flickr et de les afficher sur votre carte..
Share
Image modèle dans laquelle vous créez votre carte. Cette image est en réalité 9984x11776 pixels 
La projection de Mercator (en haut) et la projection de Gall-Peters (en bas) créent des cartes bidimensionnelles assez différentes. (Les grilles sur les images ci-dessus ne sont pas liées aux tuiles de carte Google, qui sont carrées). 
GDAL2Tiles est le script Python qui est au cœur de l'interface graphique de MapTiler. Vous pouvez utiliser ce script directement via l'interface d'invite de commande. 
La ligne de commande de GDAL. L'OSGeo4W ressemble beaucoup à cela. Les commandes sont les mêmes pour les deux. 
Accentsconagua
