Wir verwandeln das zuvor erstellte Skript in eine API zum Anzeigen einer interaktiven Karte von der OverpassTurbo.eu-Website über die Navigationsanwendung des Smartphones.
Inhalt:
1 - Einführung. Standard-Rasterkarten
2 - Fortsetzung. Schreiben eines einfachen Rasters für Vektorkarten
3 - Ein Sonderfall. Wir verbinden die OverpassTurbo-Karte
Was ist OverpassTurbo?
Also. Es gibt eine Kartendatenbank wie OpenStreetMaps. Es enthält alles: die Meere, die Konturen der Kontinente, Berge, Wälder, Straßen, Gebäude, Spielplätze und sogar Bremsschwellen. Jedes Objekt hat einen Namen, Koordinaten und Eigenschaften. Zum Beispiel durch die Straße - das Beschichtungsmaterial, durch das Gebäude - die Anzahl der Stockwerke und so weiter.
Also. Die meisten Karten, die heute im Internet präsentiert werden, werden auf der Grundlage dieser speziellen Datenbank generiert. Aber was ist, wenn all diese vorgefertigten Karten nicht zu uns passen? Sie können Ihre eigenen machen! Nun, oder zumindest die bestehende ergänzen, was viel einfacher ist.
Dies ist, was OverpassTurbo.eu tut. Es ist eine Online-IDE. Mit ihm können Sie die OSM-Datenbank abfragen. Wir klicken auf die Schaltfläche Start , die Anfrage geht an die Datenbank und nach einer Weile kehren die Daten zu uns zurück. OverpassTurbo visualisiert diese Daten in Form von Vektormarkierungen und Linien auf der Hintergrundebene - eine Karte von OpenSteerMap.org .
Als Beispiel dafür, was Sie mit OverpassTurbo tun können, möchte ich Ihnen das Skript zeigen, das mir am besten gefällt. Es wurde von einem Benutzer unter dem Spitznamen Erelen geschrieben. Also: Dieses Skript zeichnet auf der Karte verschiedene Trinkwasserquellen und deren Namen auf. Meiner Meinung nach ist es sehr nützlich und sehr klar. Um zu sehen, wie dieses Skript funktioniert, folgen Sie einfach dem Link und klicken Sie auf Start . (Wenn die Site einen Fehler ausgibt, gehen Sie durch das VPN und versuchen Sie es erneut.)
https://overpass-turbo.eu/s/z95
Oder hier ist ein Skript, das ich bereits für meine eigenen Bedürfnisse erstellt habe. Damit finden Sie leicht gute Joggingstrecken in unbekannten Parks. Zu diesem Zweck hebt das Skript hell gepflegte Schotterwege hervor: Für meinen Geschmack ist es am bequemsten, auf diesen zu laufen. Asphalt ist weiß markiert. Gewöhnliche Feldwege in Schwarz. Alle Pfade mit dem Tag „schwer zu erreichen“ oder „schlechte Beschichtungsqualität“ sind jedoch mit einer unauffälligen gestrichelten Linie gekennzeichnet: Um seltener zu stolpern, versuche ich, sie zu vermeiden. Im Allgemeinen wird die Karte so erstellt, dass Sie einfach eine Wegbeschreibung entlang der auffälligsten Linien erhalten. Und damit diese Route am Ende erfolgreich ist.
http://overpass-turbo.eu/s/KXU
Mit diesem Tool können Sie die Karte mit beliebigen Daten ergänzen. Und ich stelle fest, dass dies sehr, sehr aufregend ist. Aber in diesem Artikel geht es nicht darum. Wenn Sie sich für dieses Thema interessieren, können Sie sich hier mit den Grundlagen von Overpass vertraut machen.
Bevor wir jedoch zum Code übergehen, werfen wir zunächst einen Blick auf das Endergebnis, das wir erhalten sollten.
Anleitung für Benutzer: Verwendung unserer API
Also. Angenommen, Sie haben bereits ein vorgefertigtes Skript für OverpassTurbo, dessen Ergebnisse Sie auf Ihrem Smartphone sehen möchten. Und das nicht im Browser, sondern im Navigator. Bringen Sie dazu Ihr Skript in das folgende Format.
[bbox:{{bbox}}]; ( // node[amenity=waste_basket]; ); out;>;out skel qt;
Insbesondere interessiert uns die erste Zeile: Unsere Anwendung wird sie ersetzen.
Klicken Sie anschließend auf die Schaltfläche Teilen . Deaktivieren Sie unbedingt den Aktivierungsstatus des angezeigten Kartenfelds .
Kopieren Sie danach den Link. Wir gehen beispielsweise davon aus, dass Ihr kopierter Link folgendermaßen aussieht:
http://overpass-turbo.eu/s/KEy
Schauen Sie sich jetzt unsere API an
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/{crossZoom}?script={script}
Mit {x}, {y} und {z} scheint alles klar zu sein: Dies sind die Koordinaten der gewünschten Kachel.
Anstelle von {script} müssen Sie Ihre Skript- ID ersetzen. In unserem Beispiel s / Key .
Aber was ist {crossZoom} ? Angenommen, Sie haben 15. Wenn Sie dann eine Kachel für einen Zoom von weniger als 15 anfordern, sendet der Server keine langsame Anforderung an OverpassTurbo, sondern leitet Sie einfach mit einer leeren OpenStreetMaps-Hintergrundebene zur Karte weiter (die fast sofort geladen wird). Dieser Ansatz ist erforderlich, damit Sie die Karte bei Bedarf entfernen, schnell zum gewünschten Ort scrollen, zoomen und warten können. Warten Sie, bis OverpassTurbo eine Karte mit den Ergebnissen generiert.
Ich hoffe, das Grundprinzip ist klar. Schauen Sie sich nun die ausgefüllte URL für unsere Anfrage an. Ich denke, die Verwendung unserer API wird Ihnen jetzt nicht schwer fallen: Ersetzen Sie einfach s / KEy durch die ID Ihres Skripts.
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/15?script=s/KEy
In der Zwischenzeit werden wir sehen, wie eine solche Anwendung implementiert wird.
Szenario 3 - Suche mithilfe der URL und des Browser-Cache
Also. Beginnen wir mit der Datei router.js . Lassen Sie unsere Methode crossZoom- und Skriptparameter akzeptieren. Und dann geben wir sie an den Arbeiter weiter. Wir fügen auch eine Option hinzu, die das Skript unterbricht und den Benutzer zu einer anderen Site umleitet, wenn der angeforderte Zoom zu niedrig ist.
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" })
Die Datei worker.js hat sich nicht wesentlich geändert. Leiten Sie die neuen Variablen einfach weiter.
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()
Schauen wir uns jetzt mapshoter.js an . Schauen Sie sich zuerst den Code an:
const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z, scriptName, browserLink ) {
In diesem Skript werden wir aus Gründen der Abwechslung zunächst mit gewöhnlichen Elementselektoren (die nicht XPath sind ) arbeiten. Wie man sie findet, wurde in einem früheren Artikel beschrieben .
Als nächstes erhalten wir die Koordinaten. Nur dieses Mal werden neben den Mittelkoordinaten auch die Koordinaten der Kachelränder ( bBox ) benötigt.
Starten Sie als Nächstes den Browser. Hier ist alles typisch. Bevor Sie jedoch mit dem Laden der Seite fortfahren, lassen Sie das Skript eine zufällige Zeitspanne von 0 bis 500 ms warten. Damit wir nicht zu viele identische Anfragen gleichzeitig von uns erhalten und nicht gebannt werden.
Danach gehen wir zu der Site unter der URL, zu der die Koordinaten der Kachelmitte hinzugefügt werden. Infolgedessen befindet sich der gewünschte Ort in der Mitte der Karte.
Gehen Sie danach zu einer anderen URL. Diesmal mit der ID unseres Skripts. Infolgedessen wird unser Skript im Text des Code-Editors angezeigt.
(Bitte beachten Sie, dass sich die Karte verschieben würde, wenn Sie beim Kopieren der URL für unser Skript im Menü " Teilen" das Kontrollkästchen " Status der Karte speichern" nicht deaktivieren würden.
Und jetzt beantworte ich die Frage vernünftig: Warum gehen wir zweimal zur URL, dh wir geben zweimal für das Laden dieser Website aus? Ich antworte. Erstens konnte ich nicht finden, wie das Laden von Skripten und der Übergang zu den angegebenen Koordinaten in einer URL-Anforderung kombiniert werden können. Zweitens, weil Puppeteer aus irgendeinem Grund Text extrem langsam druckt und mit den Oberflächenelementen auf dieser Site arbeitet. Eineinhalb Minuten können drucken! Die Idee, die Koordinaten in das Suchfeld einzufügen und dann auf die Zoom-Schaltflächen zu klicken, wie wir es im vorherigen Artikel getan haben, wurde abgelehnt. Das Doppelklicken auf den Link war daher viel schneller als all dies. Vielleicht ist dies ein Fehler, der früher oder später behoben wird, aber im Moment arbeiten wir mit dem, was ist.
Leider können Sie die Texteingabe nicht vollständig verlassen. Wir müssen die erste Zeile im Code-Editor-Fenster ersetzen. Im Moment berichtet sie, dass es notwendig ist, Informationen aus der Datenbank für das gesamte Gebiet herunterzuladen, das derzeit auf dem Bildschirm angezeigt wird.
[bbox:{{bbox}}];
Wir werden es durch die Koordinaten der Ränder der Kachel ersetzen. Dies dient dazu, nicht zu viel Zeit mit dem Herunterladen aus der Datenbank zu verschwenden. Das Skript druckt also in der ersten Zeile so etwas wie diesen Text:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Um die ursprüngliche Zeile nicht löschen zu müssen (oft durch langsames Drücken von Entf ), kommentieren wir sie einfach. Auf diese Weise reduzieren wir den Zeitaufwand für die Texteingabe und die Ladezeit aus der Datenbank so weit wie möglich. Infolgedessen sieht die erste Zeile folgendermaßen aus:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Danach muss unser Skript auf die Schaltfläche Start klicken, etwas warten, einen Screenshot der Karte machen und ihn an den Benutzer senden. Und alles: Die Aufgabe ist erledigt!
Wenn Sie sich ein Beispiel für das resultierende Skript ansehen möchten, können Sie auf diesen Link klicken.
Fazit
Nun, da es nicht schwer anzunehmen ist, funktioniert diese Version des Skripts noch langsamer als die vorherigen. Immerhin verbringt die Site jetzt Zeit mit einer Anfrage aus einer Datenbank eines Drittanbieters. Und an sich funktioniert es nicht zu schnell. Diese Methode macht es jedoch extrem einfach (wenn auch langsam), eine einzigartige, angepasste Karte zu erhalten. Und darüber hinaus basierend auf den neuesten Daten. Und das kann manchmal sehr nützlich sein. Es lohnt sich also, eine solche Methode in Betracht zu ziehen.
Und das ist alles. Für alle Fälle möchte ich Sie daran erinnern, dass auf meiner AnyGIS- Website ein Archiv mit vorgefertigten Voreinstellungen für die Navigatoren Locus, OsmAnd und GuruMaps vorhanden ist. Es gibt sowohl Rasterkarten als auch "gerasterte" Vektorkarten, für deren Anzeige die in diesen Artikeln beschriebene Anwendung verwendet wird. Komm und benutze.