La précision et la modularité sont parmi les avantages qui font des géocodages moyen parfait pour trouver un emplacement particulier.
Dans ce guide, nous allons créer une application de géocodage simple à partir de zéro, en utilisant Vue.js et Mapbox. Nous couvrirons le processus depuis la construction de l'échafaudage frontal jusqu'à la construction d'un géocodeur pour gérer le géocodage avant et le géocodage inverse. Pour tirer le meilleur parti de ce guide, vous aurez besoin d'une compréhension de base de JavaScript et de Vue.js et de la façon de passer des appels d'API.
Qu'est-ce que le géocodage ?
Le géocodage est la transformation d'emplacements textuels en emplacements géographiques. coordonnées (généralement, longitude et latitude) qui indiquent un emplacement dans le monde.
Le géocodage est de deux types : en avant et en arrière. Le géocodage direct convertit les textes de localisation en coordonnées géographiques, tandis que le géocodage inverse convertit les coordonnées en textes de localisation.
En d'autres termes, le géocodage inverse transforme 40,714224, -73,961452 en "277 Bedford Ave, Brooklyn", et le géocodage avancé fait le contraire, tournant " 277 Bedford Ave, Brooklyn" dans 40.714224, -73.961452.
Pour donner plus d'informations, nous allons créer une mini application Web qui utilise une carte Web interactive avec des marqueurs personnalisés pour afficher les coordonnées de localisation, que nous décoderons ensuite en textes de localisation.
Notre application aura les fonctions de base suivantes :
- donner à l'utilisateur l'accès à un affichage cartographique interactif avec un marqueur ;
- permettre à l'utilisateur de déplacer le marqueur à volonté, tout en affichant les coordonnées ;
- retourner un l'emplacement textuel ou les coordonnées de l'emplacement à la demande de l'utilisateur.
]Configurer le projet à l'aide de Vue CLI
Nous utiliserons le boilerplate trouvé dans ce référentiel. Il contient un nouveau projet avec Vue CLI et yarn en tant que gestionnaire de paquets. Vous devrez cloner le référentiel. Assurez-vous que vous travaillez à partir de la branche geocoder/boilerplate.
Configurer la structure de fichiers de l'application
Ensuite, nous devrons configurer la structure de fichiers de notre projet. Renommez le fichier Helloworld.vue dans le dossier du composant en Index.vue et laissez-le vide pour le moment. Allez-y et copiez ce qui suit dans le fichier App.vue :
Ici, nous avons importé puis enregistré le composant récemment renommé localement. Nous avons également ajouté une barre de navigation pour améliorer l'esthétique de notre application.
Nous avons besoin d'un fichier .env pour charger les variables d'environnement. Allez-y et ajoutez-en un à la racine de votre dossier de projet.
Installez les packages et les bibliothèques requis
Pour démarrer le processus de développement, nous devrons installer les bibliothèques requises. Voici une liste de ceux que nous utiliserons pour ce projet :
- Mapbox GL JS
Cette bibliothèque JavaScript utilise WebGL pour restituer des cartes interactives à partir de vector tile et Mapbox . - Mapbox-gl-geocoder
Ce contrôle de géocodeur pour Mapbox GL nous aidera avec notre géocodage avancé. - Dotenv
Nous n'aurons pas à l'installer car il est préinstallé avec Vue CLI. Il nous aide à charger des variables d'environnement à partir d'un fichier.envdansprocess.env. De cette façon, nous pouvons séparer nos configurations de notre code. - Axios
Cette bibliothèque nous aidera à faire des requêtes HTTP.
Installez les packages dans votre CLI en fonction de votre gestionnaire de packages préféré. Si vous utilisez Yarn, exécutez la commande ci-dessous :
cd geocoder && wire add mapbox-gl @mapbox/mapbox-gl-geocoder axiosSi vous utilisez npm, exécutez ceci :
cd geocoder && npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --saveNous avons d'abord dû entrer dans le dossier geocoder avant d'exécuter la commande d'installation.
Scaffolding the Front End With Vue .js
Créons une mise en page pour notre application. Nous aurons besoin d'un élément pour héberger notre carte, d'une région pour afficher les coordonnées tout en écoutant le mouvement du marqueur sur la carte, et de quelque chose pour afficher l'emplacement lorsque nous appelons l'API de géocodage inversé. Nous pouvons héberger tout cela dans un composant de carte.
Copiez ce qui suit dans votre fichier Index.vue :
Coordonnées actuelles
Latitude :
Longitude :
Emplacement actuel
Pour voir ce que nous avons actuellement, démarrez votre serveur de développement. Pour Yarn :
yarn serveOu pour npm :
npm run serveNotre application devrait ressembler à ceci maintenant :
Le point vide à gauche semble éteint. Il devrait abriter notre affichage de carte. Ajoutons cela.
Affichage de carte interactif avec Mapbox
La première chose que nous devons faire est d'accéder aux bibliothèques Mapbox GL et Geocoder. Nous commencerons par importer les bibliothèques Mapbox GL et Geocoder dans le fichier Index.vue.
import axios depuis "axios" ;
importer mapboxgl de "mapbox-gl" ;
importer MapboxGeocoder depuis "@mapbox/mapbox-gl-geocoder" ;
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css" ;Mapbox nécessite un token d'accès unique pour calculer les tuiles vectorielles de la carte. Obtenez le vôtre et ajoutez-le en tant que variable d'environnement dans votre fichier .env.
.envVUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxNous devons également définir les propriétés qui aider à assembler nos tuiles de carte dans notre instance de données. Ajoutez ce qui suit sous l'endroit où nous avons importé les bibliothèques :
export default {
Les données() {
revenir {
chargement : faux,
emplacement: "",
access_token : process.env.VUE_APP_MAP_ACCESS_TOKEN,
centre : [0, 0],
carte: {},
} ;
},
}- La propriété
locationsera modélisée en fonction de l'entrée que nous avons dans notre échafaudage. Nous l'utiliserons pour gérer le géocodage inversé (c'est-à-dire afficher un emplacement à partir des coordonnées). - La propriété
centercontient nos coordonnées (longitude et latitude). Ceci est essentiel pour assembler nos tuiles de carte, comme nous le verrons bientôt. - La propriété
access_tokenfait référence à notre variable d'environnement, que nous avons ajoutée précédemment. - La
mapLa propriété sert de constructeur pour notre composant de carte.
Créons une méthode qui trace notre carte interactive avec notre géocodeur avancé intégré. Cette méthode est notre fonction de base, servant d'intermédiaire entre notre composant et Mapbox GL ; nous appellerons cette méthode createMap. Ajoutez ceci sous l'objet de données :
mount () {
this.createMap()
},
méthodes : {
async createMap() {
essayer {
mapboxgl.accessToken = this.access_token;
this.map = new mapboxgl.Map({
conteneur : "carte",
style : "mapbox://styles/mapbox/streets-v11",
center: this.center,
zoom : 11,
});
} attraper (err) {
console.log("erreur de carte", err);
}
},
},
Pour créer notre carte, nous avons spécifié un conteneur qui héberge la carte, une propriété style pour le format d'affichage de notre carte et une propriété center pour abriter nos coordonnées. La propriété center est un type de tableau et contient la longitude et la latitude.
Mapbox GL JS initialise notre carte en fonction de ces paramètres sur la page et nous renvoie un objet Map. L'objet Map fait référence à la carte sur notre page, tout en exposant des méthodes et des propriétés qui nous permettent d'interagir avec la carte. Nous avons stocké cet objet renvoyé dans notre instance de données, this.map.
Forward Geocoding With Mapbox Geocoder
Maintenant, nous allons ajouter le géocodeur et le marqueur personnalisé. Le géocodeur gère le géocodage avancé en transformant les emplacements textuels en coordonnées. Cela apparaîtra sous la forme d'une zone de saisie de recherche annexée à notre carte.
Ajoutez ce qui suit sous l'initialisation this.map que nous avons ci-dessus :
let geocoder = new MapboxGeocoder({
accessToken : this.access_token,
mapboxgl: mapboxgl,
marqueur : faux,
});
this.map.addControl(géocodeur);
geocoder.on("résultat", (e) => {
marqueur const = new mapboxgl.Marker({
déplaçable : vrai,
couleur : "#D80739",
})
.setLngLat(e.result.center)
.addTo(this.map);
this.center = e.result.center;
marker.on("dragend", (e) => {
this.center = Object.values(e.target.getLngLat());
});
});Ici, nous avons d'abord créé une nouvelle instance d'un géocodeur à l'aide du constructeur `MapboxGeocoder`. Cela initialise un géocodeur basé sur les paramètres fournis et retourne un objet, exposé aux méthodes et aux événements. La propriété `accessToken` fait référence à notre jeton d'accès Mapbox et `mapboxgl` fait référence au [map library](https://docs.mapbox.com/#maps) actuellement utilisé.
Le marqueur personnalisé est au cœur de notre application ; le géocodeur est livré avec un par défaut. Ceci, cependant, ne nous donnerait pas toute la personnalisation dont nous avons besoin; par conséquent, nous l'avons désactivé.
En continuant, nous avons passé notre géocodeur nouvellement créé en tant que paramètre à la méthode `addControl`, qui nous est exposée par notre objet map. `addControl` accepte un `contrôle` comme paramètre.
Pour créer notre marqueur personnalisé, nous avons utilisé un événement qui nous est exposé par notre objet géocodeur. L'écouteur d'événement « on » nous permet de nous abonner aux événements qui se produisent dans le géocodeur. Il accepte divers [events](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on) comme paramètres. Nous écoutons l'événement « result », qui est déclenché lorsqu'une entrée est définie.
En un mot, sur `result`, notre constructeur de marqueur crée un marqueur, basé sur les paramètres que nous avons fournis (un attribut et une couleur déplaçables, dans ce cas). Il renvoie un objet, avec lequel nous utilisons la méthode `setLngLat` pour obtenir nos coordonnées. Nous ajoutons le marqueur personnalisé à notre carte existante à l'aide de la méthode « addTo ». Enfin, nous mettons à jour la propriété `center` dans notre instance avec les nouvelles coordonnées.
Nous devons également suivre le mouvement de notre marqueur personnalisé. Nous y sommes parvenus en utilisant l'écouteur d'événement `dragend` et nous avons mis à jour notre propriété `center` avec les coordonnées actuelles.
Mettons à jour le modèle pour afficher notre carte interactive et géocodeur avancé. Mettez à jour la section d'affichage des coordonnées dans notre modèle avec les éléments suivants :
Coordonnées actuelles
Latitude : {{ center[0] }}
Longitude : {{ center[1] }}
Vous vous souvenez comment nous mettions toujours à jour notre propriété center à la suite d'un événement ? Nous affichons ici les coordonnées en fonction de la valeur actuelle.
Pour améliorer l'esthétique de notre application, ajoutez le fichier CSS suivant dans la section head du fichier index.html. Placez ce fichier dans le dossier public.
Notre application devrait ressembler à ceci maintenant :
Emplacement de géocodage inversé avec l'API Mapbox
Maintenant, nous allons gérer le géocodage inversé de nos coordonnées vers des emplacements textuels. Écrivons une méthode qui gère cela et déclenchons-la avec le bouton Get Location dans notre modèle.
Le géocodage inversé dans Mapbox est géré par l'API de géocodage inversé. Cela accepte longitudelatitude et jeton d'accès comme paramètres de demande. Cet appel renvoie une charge utile de réponse – généralement, avec divers détails. Notre préoccupation est le premier objet du tableau featuresoù se trouve l'emplacement géocodé inversé.
Nous devrons créer une fonction qui envoie la longitudelatitude et access_token de l'emplacement que nous voulons accéder à l'API Mapbox. Nous devons les envoyer afin d'obtenir les détails de cet emplacement.
Enfin, nous devons mettre à jour la propriété location dans notre instance avec la valeur de la clé place_name dans l'objet.
En dessous de la fonction createMap()ajoutons une nouvelle fonction qui gère ce que nous voulons. Voici à quoi cela devrait ressembler :
async getLocation() {
essayer {
this.loading = true;
réponse const = wait 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;
} attraper (err) {
this.loading = false;
console.log(err);
}
},
Cette fonction envoie une requête GET à l'API Mapbox. La réponse contient place_name — le nom de l'emplacement sélectionné. Nous l'obtenons à partir de la réponse, puis la définissons comme la valeur de this.location.
Une fois cela fait, nous devons éditer et configurer le bouton qui appellera cette fonction que nous avons créée. Nous utiliserons un écouteur d'événement click — qui appellera la méthode getLocation lorsqu'un utilisateur cliquera dessus. Allez-y et modifiez le composant de bouton pour cela.
Cerise sur le gâteau, attachons une fonction pour copier l'emplacement affiché dans le presse-papiers. Ajoutez ceci juste en dessous de la fonction getLocation :
copyLocation() {
si (ce.emplacement) {
navigator.clipboard.writeText(this.location);
alert("Emplacement copié")
}
revenir;
},
Mettez à jour le composant bouton Copier pour déclencher ceci :
Conclusion
Dans ce guide, nous avons examiné le géocodage à l'aide de Mapbox. Nous avons créé une application de géocodage qui transforme les emplacements textuels en coordonnées, affichant l'emplacement sur une carte interactive, et qui convertit les coordonnées en emplacements textuels, selon la demande de l'utilisateur. Ce guide n'est qu'un début. Beaucoup plus pourrait être réalisé avec les API de géocodage, comme changer la présentation de la carte en utilisant les différents styles de carte fournis par Mapbox.
Ressources
(ks, vf, yk, il, al)