So erstellen Sie eine Geokodierungs-App in Vue.js mit Mapbox

Punktgenaue Genauigkeit und Modularität gehören zu den Vorteilen, die Geocodes zum perfekten Mittel machen, um einen bestimmten Ort zu finden.

In diesem Leitfaden erstellen wir mit Vue.js und Mapbox eine einfache Geokodierungs-App von Grund auf neu. Wir behandeln den Prozess vom Erstellen des Front-End-Gerüsts bis zum Erstellen eines Geocoders für die Vorwärts- und Rückwärts-Geocodierung. Um diesen Leitfaden optimal nutzen zu können, benötigen Sie ein grundlegendes Verständnis von JavaScript und Vue.js und wie API-Aufrufe durchgeführt werden.

Was ist Geokodierung?

Geokodierung ist die Umwandlung textbasierter Orte in geografische Koordinaten (normalerweise Längen- und Breitengrad), die einen Ort auf der Welt angeben.

Es gibt zwei Arten von Geokodierung: vorwärts und rückwärts . Forward Geocoding wandelt Positionstexte in geographische Koordinaten um, während Reverse Geocoding Koordinaten in Positionstexte konvertiert.

Mit anderen Worten: Reverse Geocoding verwandelt 40.714224, -73.961452 in „277 Bedford Ave, Brooklyn“ und Forward Geocoding bewirkt das Gegenteil, indem „277 Bedford Ave, Brooklyn“ in 40.714224, -73.961452 umgewandelt wird.

Um mehr Einblick zu geben, werden wir eine Mini-Web-App erstellen, die eine interaktive Webkarte mit benutzerdefinierten Markierungen verwendet, um Standortkoordinaten anzuzeigen, die wir anschließend in Standorttexte decodieren.

Unsere App wird folgende Grundfunktionen haben:

• Geben Sie dem Benutzer Zugriff auf eine interaktive Kartenanzeige mit einer Markierung;
• dem Benutzer erlauben, die Markierung nach Belieben zu bewegen, während Koordinaten angezeigt werden;
• Zurückgeben eines textbasierten Standorts oder von Standortkoordinaten auf Anfrage durch den Benutzer.
  

Projekt mit Vue CLI einrichten

Wir werden die in diesem Repository gefundene Boilerplate verwenden. Es enthält ein neues Projekt mit der Vue CLI und yarn als Paketmanager. Sie müssen das Repository klonen. Stellen Sie sicher, dass Sie vom geocoder/boilerplate Zweig aus arbeiten.

Dateistruktur der Anwendung einrichten

Als nächstes müssen wir die Dateistruktur unseres Projekts einrichten. Benennen Sie die Datei Helloworld.vue im Ordner der Komponente in Index.vue um und lassen Sie sie vorerst leer. Fahren Sie fort und kopieren Sie Folgendes in die App.vue -Datei:

 <template> <div> <!--Navbar Here --> <div> <nav> <div class="header"> <h3>Geocoder</h3> </div> </nav> </div> <!--Index Page Here --> <index /> </div> </template> <script> import index from "./components/index.vue"; export default { name: "App", components: { index, }, }; </script>

Hier haben wir die kürzlich umbenannte Komponente importiert und dann lokal registriert. Wir haben auch eine Navigationsleiste hinzugefügt, um die Ästhetik unserer App zu verbessern.

Wir benötigen eine .env -Datei, um die Umgebungsvariablen zu laden. Fahren Sie fort und fügen Sie eine im Stammverzeichnis Ihres Projektordners hinzu.

Installieren Sie erforderliche Pakete und Bibliotheken

Um den Entwicklungsprozess anzukurbeln, müssen wir die erforderlichen Bibliotheken installieren. Hier ist eine Liste derjenigen, die wir für dieses Projekt verwenden werden:

1. Mapbox GLJS
   Diese JavaScript-Bibliothek verwendet WebGL, um interaktive Karten aus Vektorkacheln und Mapbox zu rendern.
2. Mapbox-gl-Geocoder
   Diese Geocoder-Steuerung für Mapbox GL hilft bei unserer Vorwärts-Geocodierung.
3. Dotenv
   Wir müssen dies nicht installieren, da es mit der Vue-CLI vorinstalliert ist. Es hilft uns, Umgebungsvariablen aus einer .env -Datei in process.env zu laden. Auf diese Weise können wir unsere Konfigurationen von unserem Code trennen.
4. Axios
   Diese Bibliothek hilft uns bei der Erstellung von HTTP-Anforderungen.

Installieren Sie die Pakete in Ihrer CLI gemäß Ihrem bevorzugten Paketmanager. Wenn Sie Yarn verwenden, führen Sie den folgenden Befehl aus:

 cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios

Wenn Sie npm verwenden, führen Sie Folgendes aus:

 cd geocoder && npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --save

Wir mussten zuerst den geocoder Ordner eingeben, bevor wir den Installationsbefehl ausführen konnten.

Gerüstbau des Frontends mit Vue.js

Lassen Sie uns fortfahren und ein Layout für unsere App erstellen. Wir benötigen ein Element, um unsere Karte aufzunehmen, eine Region, um die Koordinaten anzuzeigen, während wir die Bewegung der Markierung auf der Karte abhören, und etwas, um den Standort anzuzeigen, wenn wir die umgekehrte Geokodierungs-API aufrufen. Wir können all dies in einer Kartenkomponente unterbringen.

Kopieren Sie Folgendes in Ihre Index.vue -Datei:

 <template> <div class="main"> <div class="flex"> <!-- Map Display here --> <div class="map-holder"> <div></div> </div> <!-- Coordinates Display here --> <div class="dislpay-arena"> <div class="coordinates-header"> <h3>Current Coordinates</h3> <p>Latitude:</p> <p>Longitude:</p> </div> <div class="coordinates-header"> <h3>Current Location</h3> <div class="form-group"> <input type="text" class="location-control" :value="location" readonly /> <button type="button" class="copy-btn">Copy</button> </div> <button type="button" class="location-btn">Get Location</button> </div> </div> </div> </div> </template>

Um zu sehen, was wir derzeit haben, starten Sie Ihren Entwicklungsserver. Für Garn:

 yarn serve

Oder für npm:

 npm run serve

Unsere App sollte jetzt so aussehen:

Die leere Stelle links sieht aus. Es sollte unsere Kartenanzeige beherbergen. Lassen Sie uns das hinzufügen.

Interaktive Kartendarstellung mit Mapbox

Als erstes müssen wir uns Zugang zu den Mapbox GL- und Geocoder-Bibliotheken verschaffen. Wir beginnen mit dem Importieren der Mapbox GL- und Geocoder-Bibliotheken in die Datei Index.vue .

 import axios from "axios"; import mapboxgl from "mapbox-gl"; import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder"; import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

Mapbox erfordert ein eindeutiges Zugriffstoken, um Kartenvektorkacheln zu berechnen. Holen Sie sich Ihre und fügen Sie sie als Umgebungsvariable in Ihre .env -Datei ein.

 .env

 VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Wir müssen auch Eigenschaften definieren, die beim Zusammenstellen unserer Kartenkacheln in unserer Dateninstanz helfen. Fügen Sie Folgendes unter der Stelle hinzu, an der wir die Bibliotheken importiert haben:

 export default { data() { return { loading: false, location: "", access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN, center: [0, 0], map: {}, }; }, }

• Die location wird anhand der Eingabe modelliert, die wir in unserem Gerüst haben. Wir werden dies verwenden, um die umgekehrte Geocodierung zu handhaben (dh einen Standort anhand der Koordinaten anzuzeigen).
• Das center Grundstück beherbergt unsere Koordinaten (Längen- und Breitengrad). Dies ist entscheidend für die Zusammenstellung unserer Kartenkacheln, wie wir in Kürze sehen werden.
• Die Eigenschaft access_token bezieht sich auf unsere Umgebungsvariable, die wir zuvor hinzugefügt haben.
• Die map -Eigenschaft dient als Konstruktor für unsere map-Komponente.

Lassen Sie uns mit der Erstellung einer Methode fortfahren, die unsere interaktive Karte mit unserem darin eingebetteten Forward-Geocoder zeichnet. Diese Methode ist unsere Basisfunktion, die als Vermittler zwischen unserer Komponente und Mapbox GL dient; Wir nennen diese Methode createMap . Fügen Sie dies unter dem Datenobjekt hinzu:

 mounted() { this.createMap() }, methods: { async createMap() { try { mapboxgl.accessToken = this.access_token; this.map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: this.center, zoom: 11, }); } catch (err) { console.log("map error", err); } }, },

Um unsere Karte zu erstellen, haben wir einen container angegeben, der die Karte enthält, eine style -Eigenschaft für das Anzeigeformat unserer Karte und eine center -Eigenschaft für unsere Koordinaten. Die center -Eigenschaft ist ein Array-Typ und enthält den Längen- und Breitengrad.

Mapbox GL JS initialisiert unsere Karte basierend auf diesen Parametern auf der Seite und gibt uns ein Map -Objekt zurück. Das Map -Objekt bezieht sich auf die Karte auf unserer Seite, während es Methoden und Eigenschaften offenlegt, die es uns ermöglichen, mit der Karte zu interagieren. Wir haben dieses zurückgegebene Objekt in unserer Dateninstanz this.map .

Vorwärts-Geokodierung mit Mapbox Geocoder

Jetzt fügen wir den Geocoder und die benutzerdefinierte Markierung hinzu. Der Geocoder übernimmt die Vorwärts-Geocodierung, indem er textbasierte Positionen in Koordinaten umwandelt. Dies erscheint in Form eines Sucheingabefeldes, das an unsere Karte angehängt ist.

Fügen Sie das Folgende unterhalb der this.map Initialisierung hinzu, die wir oben haben:

 let geocoder = new MapboxGeocoder({ accessToken: this.access_token, mapboxgl: mapboxgl, marker: false, }); this.map.addControl(geocoder); geocoder.on("result", (e) => { const marker = new mapboxgl.Marker({ draggable: true, color: "#D80739", }) .setLngLat(e.result.center) .addTo(this.map); this.center = e.result.center; marker.on("dragend", (e) => { this.center = Object.values(e.target.getLngLat()); }); });

Hier haben wir zunächst mit dem MapboxGeocoder Konstruktor eine neue Instanz eines Geocoders erstellt. Dies initialisiert einen Geocoder basierend auf den bereitgestellten Parametern und gibt ein Objekt zurück, das Methoden und Ereignissen ausgesetzt ist. Die Eigenschaft accessToken bezieht sich auf unser Mapbox-Zugriffstoken, und mapboxgl bezieht sich auf die aktuell verwendete Kartenbibliothek.

Der Kern unserer App ist der benutzerdefinierte Marker; Der Geocoder wird standardmäßig mit einem geliefert. Dies würde uns jedoch nicht alle Anpassungsmöglichkeiten bieten, die wir benötigen; Daher haben wir es deaktiviert.

Im weiteren Verlauf haben wir unseren neu erstellten Geocoder als Parameter an die addControl Methode übergeben, die uns von unserem Kartenobjekt angezeigt wird. addControl akzeptiert ein control als Parameter.

Um unsere benutzerdefinierte Markierung zu erstellen, haben wir ein Ereignis verwendet, das uns von unserem Geocoder-Objekt angezeigt wird. Der on -Event-Listener ermöglicht es uns, Ereignisse zu abonnieren, die innerhalb des Geocoders stattfinden. Es akzeptiert verschiedene Ereignisse als Parameter. Wir hören auf das result , das ausgelöst wird, wenn eine Eingabe gesetzt wird.

Kurz gesagt, erstellt unser Markierungskonstruktor bei result eine Markierung basierend auf den von uns bereitgestellten Parametern (in diesem Fall ein ziehbares Attribut und eine Farbe). Es gibt ein Objekt zurück, mit dem wir die Methode setLngLat verwenden, um unsere Koordinaten zu erhalten. Wir fügen die benutzerdefinierte Markierung mithilfe der addTo Methode an unsere vorhandene Karte an. Schließlich aktualisieren wir die center -Eigenschaft in unserer Instanz mit den neuen Koordinaten.

Wir müssen auch die Bewegung unseres benutzerdefinierten Markers verfolgen. Wir haben dies erreicht, indem wir den dragend Ereignis-Listener verwendet haben, und wir haben unsere center -Eigenschaft mit den aktuellen Koordinaten aktualisiert.

Lassen Sie uns die Vorlage aktualisieren, um unsere interaktive Karte und den Vorwärts-Geocoder anzuzeigen. Aktualisieren Sie den Abschnitt zur Koordinatenanzeige in unserer Vorlage wie folgt:

 <div class="coordinates-header"> <h3>Current Coordinates</h3> <p>Latitude: {{ center[0] }}</p> <p>Longitude: {{ center[1] }}</p> </div>

Erinnern Sie sich, wie wir unsere center -Eigenschaft nach einer Veranstaltung immer aktualisiert haben? Wir zeigen hier die Koordinaten basierend auf dem aktuellen Wert an.

Um die Ästhetik unserer App zu verbessern, fügen Sie die folgende CSS-Datei in den head Abschnitt der index.html -Datei ein. Legen Sie diese Datei im öffentlichen Ordner ab.

 <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />

Unsere App sollte jetzt so aussehen:

Umgekehrte Geocodierung des Standorts mit der Mapbox-API

Jetzt kümmern wir uns um die umgekehrte Geokodierung unserer Koordinaten zu textbasierten Orten. Lassen Sie uns eine Methode schreiben, die das handhabt, und sie mit der Schaltfläche " Get Location " in unserer Vorlage auslösen.

Reverse Geocoding in Mapbox wird von der Reverse Geocoding API gehandhabt. Dies akzeptiert longitude , latitude und access token als Anforderungsparameter. Dieser Aufruf gibt eine Antwortnutzlast zurück – normalerweise mit verschiedenen Details. Unser Anliegen ist das erste Objekt im features -Array, in dem sich der umgekehrt geocodierte Standort befindet.

Wir müssen eine Funktion erstellen, die den longitude , den latitude und das access_token des Standorts, den wir abrufen möchten, an die Mapbox-API sendet. Wir müssen sie senden, um die Details dieses Standorts zu erhalten.

Schließlich müssen wir die location -Eigenschaft in unserer Instanz mit dem Wert des place_name Schlüssels im Objekt aktualisieren.

Lassen Sie uns unterhalb der createMap() -Funktion eine neue Funktion hinzufügen, die das handhabt, was wir wollen. So sollte es aussehen:

 async getLocation() { try { this.loading = true; const response = await axios.get( `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center[0]},${this.center[1]}.json?access_token=${this.access_token}` ); this.loading = false; this.location = response.data.features[0].place_name; } catch (err) { this.loading = false; console.log(err); } },

Diese Funktion stellt eine GET -Anforderung an die Mapbox-API. Die Antwort enthält place_name – den Namen des ausgewählten Standorts. Wir erhalten dies aus der Antwort und setzen es dann als Wert von this.location .

Danach müssen wir die Schaltfläche bearbeiten und einrichten, die diese von uns erstellte Funktion aufruft. Wir verwenden einen click -Event-Listener, der die getLocation Methode aufruft, wenn ein Benutzer darauf klickt. Fahren Sie fort und bearbeiten Sie die Schaltflächenkomponente dazu.

 <button type="button" :disabled="loading" :class="{ disabled: loading }" class="location-btn" @click="getLocation" > Get Location </button>

Als i-Tüpfelchen fügen wir eine Funktion hinzu, um den angezeigten Ort in die Zwischenablage zu kopieren. Fügen Sie dies direkt unter der getLocation Funktion hinzu:

 copyLocation() { if (this.location) { navigator.clipboard.writeText(this.location); alert("Location Copied") } return; },

Aktualisieren Sie die Komponente der Schaltfläche „ Copy “, um dies auszulösen:

 <button type="button" class="copy-btn" @click="copyLocation">

Fazit

In diesem Leitfaden haben wir uns die Geokodierung mit Mapbox angesehen. Wir haben eine Geocodierungs-App entwickelt, die textbasierte Standorte in Koordinaten umwandelt, den Standort auf einer interaktiven Karte anzeigt und die Koordinaten je nach Anforderung des Benutzers in textbasierte Standorte umwandelt. Dieser Leitfaden ist nur der Anfang. Mit den Geocodierungs-APIs ließe sich noch viel mehr erreichen, z. B. die Änderung der Darstellung der Karte mithilfe der verschiedenen von Mapbox bereitgestellten Kartenstile.

• Der Quellcode ist auf GitHub verfügbar.

Ressourcen

• „Geocodierung“, Mapbox-Dokumentation
• „Stile“, Mapbox-Dokumentation
• „Using Env Variables in Client-Side Code“, in „Modes and Environment Variables“, Vue CLI