Nous transformons le script précédemment créé en une API pour afficher une carte interactive à partir du site Web OverpassTurbo.eu via l'application de navigation du smartphone.
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
Qu'est-ce que OverpassTurbo?
Alors. Il existe une base de données cartographiques comme OpenStreetMaps. Il contient tout: les mers, les contours des continents, les montagnes, les forêts, les routes, les bâtiments, les terrains de jeux et même les ralentisseurs. Chaque objet a un nom, des coordonnées et des propriétés. Par exemple, par la route - le matériau de revêtement, par le bâtiment - le nombre d'étages, etc.
Alors voilà. La plupart des cartes qui sont présentées sur Internet aujourd'hui sont générées sur la base de cette base de données particulière. Mais que faire si toutes ces cartes toutes faites ne nous conviennent pas? Vous pouvez créer le vôtre! Eh bien, ou du moins compléter celui existant, ce qui est beaucoup plus facile.
C'est ce que fait OverpassTurbo.eu . Il s'agit d'un IDE en ligne. En l'utilisant, vous pouvez interroger la base de données OSM. Nous cliquons sur le bouton Démarrer , la demande va à la base de données et après un certain temps, les données nous reviennent. OverpassTurbo visualise ces données sous la forme de marqueurs vectoriels et de lignes situées au-dessus de la couche d'arrière-plan - une carte d' OpenSteerMap.org .
Comme exemple de ce que vous pouvez faire avec OverpassTurbo, je veux vous montrer le script que j'aime le plus. Il a été écrit par un utilisateur sous le surnom d'Erelen. Donc: ce script dessine sur la carte différentes sources d'eau potable et leur nom. À mon avis, c'est très utile et très clair. Pour voir comment ce script fonctionne, suivez simplement le lien et cliquez sur Démarrer . (Si le site donne une erreur, passez par le VPN et réessayez)
https://overpass-turbo.eu/s/z95
Ou voici un script que j'ai déjà fait pour mes propres besoins. Avec lui, vous pouvez facilement trouver de bons itinéraires de jogging dans des parcs inconnus. Pour ce faire, le script met en évidence des chemins de gravier bien entretenus: c'est le plus pratique pour les parcourir, à mon goût. L'asphalte est marqué en blanc. Chemins de terre ordinaires en noir. Mais tous les chemins avec la balise «difficile à atteindre» ou «mauvaise qualité de revêtement» seront marqués d'un trait discontinu discret: afin de trébucher moins souvent, j'essaye de les éviter. En général, la carte est conçue de sorte que vous pouvez simplement obtenir des directions le long des lignes les plus marquantes. Et pour qu'au final cette route soit réussie.
http://overpass-turbo.eu/s/KXU
En fait, avec cet outil, vous pouvez compléter la carte avec toutes les données que vous aimez. Et je constate que c'est très, très excitant. Mais cet article ne traite pas de cela. Si vous êtes intéressé par ce sujet, vous pouvez vous familiariser avec les bases d'Overpass ici .
Mais avant de passer au code, examinons d'abord le résultat final que nous devrions obtenir.
Instructions pour les utilisateurs: comment utiliser notre API
Alors. Supposons que vous ayez déjà un script prêt à l'emploi pour OverpassTurbo, dont vous souhaitez voir les résultats sur votre smartphone. Et pas dans le navigateur, mais dans le navigateur. Pour ce faire, amenez votre script au format suivant.
[bbox:{{bbox}}]; ( // node[amenity=waste_basket]; ); out;>;out skel qt;
En particulier, nous nous intéressons à la première ligne: notre application la remplacera.
Après cela, cliquez sur le bouton Partager . Assurez-vous de décocher l' état Activer de la zone de carte affichée .
Après cela, copiez le lien. Par exemple, nous supposons que votre lien copié ressemble à ceci:
http://overpass-turbo.eu/s/KEy
Regardez maintenant notre API
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/{crossZoom}?script={script}
Avec {x}, {y} et {z}, tout semble clair: ce sont les coordonnées de la tuile souhaitée.
Au lieu de {script}, vous devez remplacer l' ID de votre script. Dans notre exemple, s / Key .
Mais qu'est-ce que {crossZoom} ? Supposons que vous en ayez 15. Ensuite, si vous demandez une vignette pour un zoom inférieur à 15, le serveur ne fera pas de demande lente à OverpassTurbo, mais vous redirigera simplement vers la carte avec une couche d'arrière-plan OpenStreetMaps vide (qui se chargera presque instantanément). Cette approche est nécessaire pour que, si nécessaire, vous puissiez éloigner la carte, faire défiler rapidement vers le lieu d'intérêt, zoomer et attendre. Attendez que OverpassTurbo génère une carte avec les résultats.
J'espère que le principe de base est clair. Regardez maintenant l'URL complétée pour notre demande. Je pense que maintenant, utiliser notre API ne sera pas difficile pour vous: remplacez simplement s / KEy par l' ID de votre script.
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/15?script=s/KEy
Et nous, quant à nous, verrons comment implémenter une telle application.
Scénario 3 - Recherche à l'aide de l'URL et du cache du navigateur
Alors. Commençons par le fichier router.js . Faisons en sorte que notre méthode accepte les paramètres de crossZoom et de script . Et puis nous les transmettons au travailleur. Nous ajoutons également une option qui interrompra le script et redirigera l'utilisateur vers un autre site si le zoom demandé est trop faible.
const express = require( 'express' ) const PORT = process.env.PORT || 5000 const app = express() app.listen( PORT, () => { console.log( ' ', PORT ) }) const { StaticPool } = require( 'node-worker-threads-pool' ) const worker = "./worker.js" const workersPool = new StaticPool({ size: 3, task: worker, workerData: "no" })
Le fichier worker.js n'a pas beaucoup changé. Transférez simplement les nouvelles variables.
const { parentPort, workerData } = require( 'worker_threads' ); const puppeteer = require( 'puppeteer' ) const mapshoter = require( './mapshoter' ) var browser = "empty" parentPort.on( "message", ( params ) => { doMyAsyncCode( params ) .then( ( result ) => { parentPort.postMessage( result ) }) }) async function doMyAsyncCode( params ) { await prepareEnviroment()
Jetons maintenant un œil à mapshoter.js . Tout d'abord, regardez le code:
const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z, scriptName, browserLink ) {
Pour commencer, dans ce script, pour des raisons de variété, nous travaillerons avec des sélecteurs d'éléments ordinaires (qui ne sont pas XPath ). Comment les trouver a été décrit dans un article précédent .
Ensuite, nous obtenons les coordonnées. Seulement cette fois, en plus des coordonnées centrales, les coordonnées des bordures de carreaux ( bBox ) sont également nécessaires.
Ensuite, lancez le navigateur. Tout est typique ici. Mais avant de passer au chargement de la page, laissez le script attendre un temps aléatoire de 0 à 500 ms. Pour ne pas recevoir trop de demandes identiques de notre part et nous ne sommes pas bannis.
Après cela, nous allons sur le site à l'URL à laquelle les coordonnées du centre de la tuile sont ajoutées. Par conséquent, l'endroit souhaité se trouve au centre de la carte.
Après cela, accédez à une autre URL. Cette fois avec l' ID de notre script. En conséquence, notre script apparaîtra dans le texte de l'éditeur de code.
(Veuillez noter que si dans le menu Partager lors de la copie de l'URL de notre script, nous ne décocherions pas la case à cocher Enregistrer l'état de la carte, la carte se déplacerait. Et nous n'en avons pas besoin du tout)
Et maintenant, je vais répondre raisonnablement à la question: pourquoi allons-nous à l'URL deux fois, c'est-à-dire que nous dépensons deux fois pour charger ce site? Je réponds. Parce que, tout d'abord, je n'ai pas trouvé comment combiner le chargement du script et la transition vers les coordonnées spécifiées dans une seule demande d'URL. Deuxièmement, parce que, pour une raison quelconque, Puppeteer imprime le texte extrêmement lentement et fonctionne avec les éléments d'interface de ce site. Une minute et demie peut imprimer! Donc, l'idée d'insérer les coordonnées dans le champ de recherche, puis de cliquer sur les boutons de zoom, comme nous l'avons fait dans l'article précédent, il a été décidé de refuser. En conséquence, double-cliquer sur le lien s'est avéré beaucoup plus rapide que de faire tout cela. C'est peut-être un bug et il sera corrigé tôt ou tard, mais pour l'instant nous travaillons avec ce qui est.
Hélas, vous ne pourrez pas quitter complètement la saisie de texte. Nous devrons remplacer la première ligne de la fenêtre de l'éditeur de code. À l'heure actuelle, elle signale qu'il est nécessaire de télécharger des informations de la base de données pour l'ensemble du territoire qui est actuellement à l'écran.
[bbox:{{bbox}}];
Nous allons le remplacer par les coordonnées des bordures de la tuile. Ceci afin de ne pas perdre trop de temps à télécharger depuis la base de données. Ainsi, le script imprime dans la première ligne quelque chose comme ce texte:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Et pour ne pas avoir à effacer la ligne d'origine (plusieurs fois en appuyant lentement sur Supprimer pour cela), nous la commentons simplement. Ainsi, nous réduirons autant que possible le temps passé à saisir du texte et le temps de chargement depuis la base de données. Par conséquent, la première ligne ressemblera à ceci:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Après cela, notre script doit cliquer sur le bouton Démarrer , attendre un peu, prendre une capture d'écran de la carte et l'envoyer à l'utilisateur. Et tout: la tâche est terminée!
Si vous souhaitez consulter un exemple du script résultant, vous pouvez cliquer sur ce lien .
Conclusion
Eh bien, comme il n'est pas difficile de supposer, cette version du script fonctionnera encore plus lentement que les précédentes. Après tout, le site passe maintenant du temps sur une demande d'une base de données tierce. Et en soi, ça ne marche pas trop vite. Cependant, cette méthode rend extrêmement facile (quoique lente) l'obtention d'une carte unique et personnalisée. Et, en outre, sur la base des dernières données. Et cela, parfois, peut être très utile. Il vaut donc la peine d’avoir une telle méthode à l’esprit.
Et c'est tout. Au cas où, je vous rappelle que sur mon site AnyGIS il y a une archive de préréglages prêts à l'emploi pour les navigateurs Locus, OsmAnd et GuruMaps. Il existe à la fois des cartes raster et des cartes vectorielles "tramées", pour visualiser l'application utilisée dans ces articles. Venez utiliser.