Java, UX, HTML, CSS, WEB-design

Как создать приложение для геокодирования в Vue.js с помощью Mapbox


  • Принц Чуквудире

  • 0 Комментарии

Как создать приложение для геокодирования в Vue.js с помощью Mapbox

  • 10 минут чтения

  • API, Vue, приложения, JavaScript

Краткое резюме ↬

В этом руководстве мы в общих чертах рассмотрим концепции прямого геокодирования и обратного геокодирования. Мы создадим мини-приложение, которое применяет эти концепции для отображения определенных местоположений, используя для этого Mapbox и Vue.js 2.6.11.

Высочайшая точность и модульность являются одними из преимуществ, которые делают геокодирование идеальным средством поиска определенного местоположения.

В этом руководстве мы создадим простое приложение для геокодирования с нуля, используя Vue.js и Mapbox. Мы рассмотрим весь процесс, начиная с создания внешнего каркаса и заканчивая созданием геокодера для прямого геокодирования и обратного геокодирования. Чтобы получить максимальную отдачу от этого руководства, вам необходимо иметь базовое представление о JavaScript и Vue.js, а также о том, как выполнять вызовы API.

Что такое геокодирование?

Геокодирование — это преобразование текстовых местоположений в географические координаты (обычно долготу и широту), которые указывают местоположение в мире.

Геокодирование бывает двух видов: вперед и назад. Прямое геокодирование преобразует тексты местоположения в географические координаты, тогда как обратное геокодирование преобразует координаты в тексты местоположения.

Другими словами, обратное геокодирование превращает 40.714224, -73.961452 в «277 Bedford Ave, Brooklyn», а прямое геокодирование делает обратное, превращая «277 Bedford Ave, Brooklyn» в 40.714224, -73.961452.

Чтобы дать больше информации, мы создадим мини-веб-приложение, которое использует интерактивную веб-карту с пользовательскими маркерами для отображения координат местоположения, которые мы впоследствии декодируем в тексты местоположения.

Наше приложение будет иметь следующие основные функции:

  • предоставить пользователю доступ к интерактивному отображению карты с маркером;
  • разрешить пользователю перемещать маркер по желанию, отображая при этом координаты;
  • возвращать текстовое местоположение или координаты местоположения по запросу пользователя.

Еще после прыжка! Продолжить чтение ниже ↓

Настройте проект с помощью Vue CLI

Мы будем использовать шаблон, найденный в этом репозитории. Он содержит новый проект с Vue CLI и yarn в качестве менеджера пакетов. Вам нужно будет клонировать репозиторий. Убедитесь, что вы работаете с geocoder/boilerplate филиал.

Настройка файловой структуры приложения

Далее нам нужно настроить файловую структуру нашего проекта. Переименовать Helloworld.vue файл в папке компонента, чтобы Index.vue, и пока оставьте это поле пустым. Идите вперед и скопируйте следующее в App.vue файл:

<template>
  <div id="app">
    <!--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>

Здесь мы импортировали, а затем зарегистрировали недавно переименованный компонент локально. Мы также добавили панель навигации, чтобы улучшить эстетику нашего приложения.

Нам нужен .env файл для загрузки переменных среды. Идите вперед и добавьте один в корень папки вашего проекта.

Установите необходимые пакеты и библиотеки

Чтобы запустить процесс разработки, нам нужно будет установить необходимые библиотеки. Вот список тех, которые мы будем использовать для этого проекта:

  1. Мапбокс GL JS

    Эта библиотека JavaScript использует WebGL для рендеринга интерактивных карт из векторных листов и Mapbox.

  2. Mapbox-gl-геокодер

    Этот элемент управления геокодером для Mapbox GL поможет в нашем прямом геокодировании.

  3. Дотенв

    Нам не нужно его устанавливать, потому что он поставляется с предустановленным Vue CLI. Это помогает нам загружать переменные окружения из .env файл в process.env. Таким образом, мы можем хранить наши конфигурации отдельно от нашего кода.

  4. Аксиос

    Эта библиотека поможет нам делать HTTP-запросы.

Установите пакеты в CLI в соответствии с вашим предпочтительным менеджером пакетов. Если вы используете Yarn, выполните следующую команду:

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

Если вы используете npm, запустите это:

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

Сначала нам нужно было войти в geocoder папку перед запуском команды установки.

Создание внешнего интерфейса с помощью Vue.js

Давайте продолжим и создадим макет для нашего приложения. Нам понадобится элемент для размещения нашей карты, регион для отображения координат при прослушивании движения маркера на карте и что-то для отображения местоположения при вызове API обратного геокодирования. Мы можем разместить все это в карточном компоненте.

Скопируйте следующее в свой Index.vue файл:

<template>
  <div class="main">
    <div class="flex">
      <!-- Map Display here -->
      <div class="map-holder">
        <div id="map"></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>

Чтобы увидеть, что у нас есть на данный момент, запустите свой сервер разработки. Для пряжи:

yarn serve

Или для нпм:

npm run serve

Теперь наше приложение должно выглядеть так:

Предварительный просмотр скаффолда

Предварительный просмотр шаблона приложения для геокодирования. (Большой превью)

Пустое место слева выглядит не так. В нем должен разместиться наш дисплей карты. Добавим это.

Интерактивное отображение карты с помощью Mapbox

Первое, что нам нужно сделать, это получить доступ к библиотекам Mapbox GL и Geocoder. Мы начнем с импорта библиотек Mapbox GL и Geocoder в 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 требует уникальный токен доступа для вычисления векторных фрагментов карты. Получите свой и добавьте его в качестве переменной среды в свой .env файл.

.env
VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Нам также необходимо определить свойства, которые помогут совместить наши листы карты в нашем экземпляре данных. Добавьте следующее ниже места, куда мы импортировали библиотеки:

export default {
  data() {
    return {
      loading: false,
      location: "",
      access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN,
      center: [0, 0],
      map: {},
    };
  },
}
  • То location Свойство будет смоделировано в соответствии с входными данными, которые у нас есть в наших лесах. Мы будем использовать это для обработки обратного геокодирования (т. е. отображения местоположения по координатам).
  • То center В собственности находятся наши координаты (долгота и широта). Это очень важно для соединения фрагментов карты, как мы скоро увидим.
  • То access_token свойство относится к нашей переменной окружения, которую мы добавили ранее.
  • То map Свойство служит конструктором для нашего компонента карты.

Давайте перейдем к созданию метода, который строит нашу интерактивную карту со встроенным в нее прямым геокодировщиком. Этот метод является нашей базовой функцией, служащей посредником между нашим компонентом и Mapbox GL; мы будем называть этот метод createMap. Добавьте это ниже объекта данных:

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);
    }
  },
},

Чтобы создать нашу карту, мы указали container в котором находится карта, style свойство для формата отображения нашей карты и center недвижимость для размещения наших координат. То center Свойство является типом массива и содержит долготу и широту.

Mapbox GL JS инициализирует нашу карту на основе этих параметров на странице и возвращает Map возразить нам. То Map object ссылается на карту на нашей странице, предоставляя методы и свойства, которые позволяют нам взаимодействовать с картой. Мы сохранили этот возвращенный объект в нашем экземпляре данных, this.map.

Прямое геокодирование с помощью Mapbox Geocoder

Теперь мы добавим геокодер и пользовательский маркер. Геокодер выполняет прямое геокодирование, преобразовывая текстовые местоположения в координаты. Это появится в виде поля ввода поиска, добавленного к нашей карте.

Добавьте нижеследующее this.map инициализация, которую мы имеем выше:

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());
  });
});

Здесь мы сначала создали новый экземпляр геокодера, используя MapboxGeocoder конструктор. Это инициализирует геокодер на основе предоставленных параметров и возвращает объект, доступный для методов и событий. То accessToken свойство относится к нашему токену доступа к Mapbox, и mapboxgl относится к используемой в данный момент библиотеке карт.

Ядром нашего приложения является пользовательский маркер; геокодер поставляется с одним по умолчанию. Это, однако, не дало бы нам всей необходимой настройки; следовательно, мы отключили его.

Двигаясь дальше, мы передали наш только что созданный геокодер в качестве параметра addControl метод, предоставляемый нам нашим объектом карты. addControl принимает control как параметр.

Чтобы создать наш собственный маркер, мы использовали событие, предоставленное нам нашим объектом геокодера. То on прослушиватель событий позволяет нам подписываться на события, происходящие в геокодере. Он принимает различные события в качестве параметров. Мы слушаем result событие, которое запускается при установке входа.

Короче говоря, на result, наш конструктор маркеров создает маркер на основе предоставленных нами параметров (в данном случае атрибута и цвета, которые можно перетаскивать). Он возвращает объект, с которым мы используем setLngLat способ получить наши координаты. Мы добавляем пользовательский маркер к нашей существующей карте, используя addTo метод. Наконец, мы обновляем center свойство в нашем экземпляре с новыми координатами.

Мы также должны отслеживать движение нашего пользовательского маркера. Мы добились этого с помощью dragend прослушиватель событий, и мы обновили наш center свойство с текущими координатами.

Давайте обновим шаблон, чтобы отобразить нашу интерактивную карту и перенаправить геокодер. Обновите раздел отображения координат в нашем шаблоне следующим образом:

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

Помните, как мы всегда обновляли наш center собственности после события? Мы отображаем координаты здесь на основе текущего значения.

Чтобы улучшить внешний вид нашего приложения, добавьте следующий файл CSS в head раздел index.html файл. Поместите этот файл в общую папку.

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

Теперь наше приложение должно выглядеть так:

Предварительный просмотр прямого геокодирования

Предварительный просмотр прямого геокодирования. (Большой превью)

Обратное геокодирование местоположения с помощью Mapbox API

Теперь мы займемся обратным геокодированием наших координат в текстовые местоположения. Давайте напишем метод, который обрабатывает это и вызовет его с помощью Get Location кнопка в нашем шаблоне.

Обратное геокодирование в Mapbox обрабатывается API обратного геокодирования. Это принимает longitude, latitude, и access token как параметры запроса. Этот вызов возвращает полезную нагрузку ответа — обычно с различными подробностями. Наша забота – первый объект в features массив, где находится обратное геокодированное местоположение.

Нам нужно создать функцию, которая отправляет longitude, latitude и access_token места, которое мы хотим получить в Mapbox API. Нам нужно послать их, чтобы получить информацию об этом месте.

Наконец, нам нужно обновить location свойство в нашем экземпляре со значением place_name ключ в объекте.

Ниже createMap() функцию, давайте добавим новую функцию, которая обрабатывает то, что мы хотим. Вот как это должно выглядеть:

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);
  }
},

Эта функция делает GET запрос к API Mapbox. Ответ содержит place_name — название выбранного места. Мы получаем это из ответа, а затем устанавливаем его как значение this.location.

После этого нам нужно отредактировать и настроить кнопку, которая будет вызывать эту функцию, которую мы создали. Мы будем использовать click прослушиватель событий, который вызовет getLocation метод, когда пользователь нажимает на него. Идите вперед и отредактируйте компонент кнопки следующим образом.

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

В качестве вишенки на торте давайте добавим функцию для копирования отображаемого местоположения в буфер обмена. Добавьте это чуть ниже getLocation функция:

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

Обновите Copy компонент кнопки, чтобы вызвать это:

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

Вывод

В этом руководстве мы рассмотрели геокодирование с помощью Mapbox. Мы создали приложение для геокодирования, которое преобразует текстовые местоположения в координаты, отображает местоположение на интерактивной карте и преобразует координаты в текстовые местоположения в соответствии с запросом пользователя. Это руководство — только начало. С API-интерфейсами геокодирования можно добиться гораздо большего, например изменить представление карты с помощью различных стилей карты, предоставляемых Mapbox.

  • Исходный код доступен на GitHub.

Ресурсы

  • «Геокодирование», документация Mapbox
  • «Стили», документация Mapbox
  • «Использование переменных среды в клиентском коде», в «Режимы и переменные среды», Vue CLI
Сокрушительная редакция
(кс, вф, ык, ил, ал)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создать приложение для геокодирования в Vue.js с помощью Mapbox

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создать приложение для геокодирования в Vue.js с помощью Mapbox

Название: Как создать приложение для геокодирования в Vue.js с помощью Mapbox . Краткое описание: ⭐ Принц Чукв . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»