نحوه ساختن برنامه Geocoding در Vue.js با استفاده از Mapbox – Smashing Magazine

درباره نویسنده

Prince Chukwudire یک مهندس Frontend است که مشتاق اجرای کامل پیکسل از طراحی UI کاربر محور و نوشتن تست های واحد برای بهبود کد…
اطلاعات بیشتر در مورد شاهزاده

دقت دقیق و مدولار بودن از جمله امتیازاتی هستند که کد ژئوکلیک را به وسیله ای مناسب برای یافتن مکان خاص تبدیل می کنند.

در این راهنما ، ما یک برنامه کدگذاری ساده از ابتدا ، با استفاده از 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>

در اینجا ، م componentلفه اخیراً تغییر نام یافته را به صورت محلی وارد کرده و سپس ثبت کرده ایم. ما همچنین یک نوار پیمایش اضافه کرده ایم تا زیبایی شناسی برنامه خود را ارتقا دهیم.

ما به یک .env پرونده برای بارگذاری متغیرهای محیط. پیش بروید و یکی را در ریشه پوشه پروژه خود اضافه کنید.

بسته ها و کتابخانه های مورد نیاز را نصب کنید

برای شروع روند توسعه ، باید کتابخانه های مورد نیاز را نصب کنیم. در اینجا لیستی از مواردی که برای این پروژه استفاده خواهیم کرد وجود دارد:

1. Mapbox GL JS
   این کتابخانه جاوا اسکریپت برای ارائه نقشه های تعاملی از WebGL استفاده می کند کاشی های برداری و جعبه نقشه.
2. Mapbox-gl-geocoder
   این کنترل کننده کد جغرافیایی برای 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 geocoding معکوس می نامیم ، نیاز خواهیم داشت. همه اینها را می توانیم درون یک جز card کارت قرار دهیم.

موارد زیر را در مورد خود کپی کنید 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:

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 ویژگی به عنوان سازنده برای م componentلفه نقشه ما عمل می کند.

بیایید شروع به ایجاد روشی کنیم که نقشه تعاملی ما را با رمزگذار جغرافیایی جلو در آن جاسازی کند. این روش عملکرد پایه ما است و به عنوان واسطه بین م componentلفه ما و 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 ویژگی برای قالب نمایش نقشه ما ، و a center ملک مختصات ما center ویژگی از نوع آرایه ای است و طول و عرض جغرافیایی را در خود نگه می دارد.

Mapbox GL JS نقشه ما را بر اساس این پارامترها در صفحه اولیه می کند و a را برمی گرداند Map اعتراض به ما Map شی object در حالی که روش ها و خصوصیاتی را که ما را قادر به تعامل با نقشه می کند به نقشه موجود در صفحه ما ارجاع می دهد. ما این شی returned برگشتی را در نمونه داده خود ذخیره کرده ایم ، this.map.

انتقال رمز جغرافیایی با Mapbox Geocoder

اکنون ، نشانگر ژئوکارد و نشانگر سفارشی را اضافه می کنیم. رمزگذار Geocoding با تبدیل مکان های متنی به مختصات ، کدگذاری به جلو را کنترل می کند. این به صورت یک جعبه ورودی جستجو اضافه شده به نقشه ما ظاهر می شود.

موارد زیر را در زیر اضافه کنید 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());
  });
});