À quoi ressemblent les cartes en ligne? Comment connaître l'adresse du serveur de la carte qui vous intéresse? Comment créer un fichier de paramètres qui permet au navigateur du smartphone de se connecter à cette carte?
Contenu:
1 - Introduction. Cartes raster standard
2 - Suite. Écrire un rasterizer simple pour les cartes vectorielles
3 - Un cas particulier. Nous connectons la carte OverpassTurbo
Entrée
Parmi les applications de navigation pour smartphones, il y en a qui sont conçues pour le tourisme et toutes sortes d'activités suburbaines. Parmi les plus célèbres d'entre eux figurent OsmAnd, Locus et GuruMaps. Tous se distinguent par un grand nombre de fonctions spécialisées qui peuvent être utiles en cours de route. Et aussi un nombre encore plus grand de toutes sortes de paramètres (parfois très déroutants). Mais maintenant, nous sommes plus intéressés par une chose: la possibilité d'ajouter des cartes supplémentaires et de basculer rapidement entre elles.
Je note que c'est une fonctionnalité extrêmement utile. Après tout, une même zone du terrain peut être tracée très différemment sur des cartes de différents types . Et donc, avant de surmonter des zones difficiles, il est utile de pouvoir vérifier auprès de chacune d'elles. Cependant, si pour cela, il était nécessaire d'exécuter plusieurs applications distinctes sur un smartphone, cela serait extrêmement gênant. Les performances empirent et la batterie est consommée plus rapidement. Il est donc très agréable de pouvoir se débrouiller avec une seule application: une sorte d'agrégateur cartographique avec une interface pratique spécialement conçue pour basculer rapidement entre les cartes.
Alors voilà. En règle générale, l'ajout de nouvelles cartes est relativement simple. Le dossier d'application a un sous-dossier avec des préréglages . C'est-à-dire avec les fichiers de sauvegarde, dans lesquels les paramètres de téléchargement d'une carte particulière sont indiqués. Voyons voir ce qu'ils sont.
Je note que pour toutes les applications, les presets sont plus ou moins similaires. Ainsi, à titre d'exemple, nous considérerons GuruMaps, car c'est à la fois pour Android et iOS. Alors, imaginons que nous sommes allés dans le dossier avec ses préréglages, y avons trouvé un fichier appelé openstreetmaps.ms , puis l'avons ouvert à l'aide d'un éditeur de texte normal.
<?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>OpenStreetMaps</name> <minZoom>0</minZoom> <maxZoom>18</maxZoom> <url>http://{$serverpart}.tile.openstreetmap.org/{$z}/{$x}/{$y}.png</url> <serverParts>ab c</serverParts> </customMapSource>
En fait, nous avons juste une liste de plusieurs valeurs. Examinons-les dans l'ordre:
name - Le nom de la carte qui sera affichée dans l'application
minZoom - A partir de quel niveau de zoom cette carte sera-t-elle affichée
maxZoom - Jusqu'à quel niveau de zoom cette carte sera-t-elle affichée
url - Modèle d'accès aux fichiers de carte
serverParts - Si le serveur sur lequel les fichiers de carte sont stockés possède plusieurs miroirs, vous devez répertorier leurs noms
Avant de continuer, je note que pour le stockage sur les serveurs, les grandes cartes sont cassées en petits morceaux. Ce sont généralement des images png d'une taille de 256x256 pixels. Ces fragments sont appelés tuiles .
Examinons maintenant de plus près le modèle d'URL.
http://{$serverpart}.tile.openstreetmap.org /{$z}/{$x}/{$y}.png
Le navigateur remplace automatiquement les mots entre accolades par les «coordonnées» du fragment de carte actuellement requis. Voici exactement ce qui sera remplacé par les talons:
{$ serverpart} - L'une des valeurs serverParts sera remplacée ici.
{$ z} - Le niveau de zoom pour lequel vous souhaitez télécharger un fragment de carte
{$ x} - Le numéro horizontal du fragment de carte
{$ y} - Le numéro du fragment de carte verticalement
Après avoir substitué les valeurs, le navigateur recevra un lien, qui télécharge ensuite le fichier avec le fragment de carte requis. Par exemple, ceci:
http://a.tile.openstreetmap.org /12/2478/1265.png
Une fois le téléchargement terminé, la vignette téléchargée s'affiche sur l'écran du smartphone.
Ajoutez votre carte
Disons donc que vous avez trouvé sur Internet une carte qui vous intéressait et que vous aimeriez vraiment vous connecter à votre smartphone. Essayons. Tout d'abord, en utilisant un navigateur sur votre ordinateur, accédez au site avec une fenêtre pour visualiser cette carte. Par exemple , celui-ci .
Ouvrez le panneau avec les outils de développement (Ctrl + Alt + I pour Google Chrome)
Dans le panneau qui s'ouvre, accédez à l'onglet Sources.
Nous ouvrons tous les dossiers dans l'ordre jusqu'à ce que nous trouvions le dossier avec des images de tranches de la carte affichée.
Faites un clic droit sur le nom du fichier. Dans le menu qui s'ouvre, sélectionnez Copier l'adresse du lien
Par exemple, nous avons obtenu un tel lien
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11
Vous devez comprendre ce que signifient exactement ces chiffres. Nous vérifions à partir de notre carte de référence - OpenStreetMaps.
http://a.tile.openstreetmap.org/1242/639/11.png
Pas de chargement. Essayons d'échanger les chiffres.
http://a.tile.openstreetmap.org/11/1242/639.png
Chargé! Comparez maintenant la tuile obtenue par les premier et deuxième liens:
Nous nous sommes assurés que les tuiles de ces deux cartes indiquent le même endroit. Et, surtout, pas de compensations. Ainsi, la carte que nous avons trouvée est faite dans une projection standard et convient à la connexion.
Eh bien, et maintenant, sachant dans quel ordre les coordonnées d'OpenStreetMaps sont allées - z, x, y - nous pouvons dire avec confiance dans quel ordre elles vont sur notre carte.
http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}
Maintenant, zoomez et dézoomez sur la carte dans la fenêtre. On découvre donc que la carte n'est chargée qu'à partir des zooms 0 et 15.
De plus, si l'URL commençait par une seule lettre ou un seul chiffre, il serait alors possible d'y substituer d'autres valeurs. Mais généralement, il y a a, b, c ou 0,1,2,3 .
Donc, maintenant nous avons compris tous les paramètres nécessaires et pouvons faire un préréglage pour notre nouvelle carte.
<?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>. </name> <minZoom>0</minZoom> <maxZoom>15</maxZoom> <url>http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}</url> </customMapSource>
Reste à enregistrer le fichier sous un nouveau nom et à l'ajouter à votre application de navigation. Pour iOS - il suffit de glisser-déposer le fichier dans le dossier de l'application (via iTunes). Pour Android - copiez le fichier dans le répertoire suivant:
Android\data\com.bodunov.GalileoPro\files\Imported
Maintenant, lorsque vous ouvrez le navigateur, ce que vous avez fait apparaît dans la liste des cartes. Félicitations!
Comme vous pouvez le voir, c'était assez simple. Et surtout, l'ensemble du processus est plus ou moins similaire pour tous les navigateurs ci-dessus. Rapide, polyvalent, multiplateforme.
Bien sûr, il existe des cartes dans des projections non standard. Ou avec une numérotation non standard. Dans cet article, j'ai décrit comment résoudre ce problème. Néanmoins, la grande majorité des cartes trouvées sur Internet se connectent facilement et sans problèmes supplémentaires.
Soit dit en passant, sur mon site Web AnyGIS, vous pouvez télécharger des préréglages prêts à l'emploi. Ils sont générés automatiquement dans les formats de tous les navigateurs ci-dessus en fonction de la base de données que j'ai collectée. Et périodiquement mis à jour. Donc, si nécessaire, téléchargez et utilisez.
Eh bien, c'est fini avec l'introduction. Dans le prochain article, je vais vous expliquer comment connecter des cartes vectorielles en ligne.