Mapbox Kullanarak Vue.js'de Geocoding Uygulaması Nasıl Oluşturulur

Kesin doğruluk ve modülerlik, coğrafi kodları belirli bir konumu bulmak için mükemmel araçlar haline getiren avantajlar arasındadır.

Bu kılavuzda, Vue.js ve Mapbox kullanarak sıfırdan basit bir coğrafi kodlama uygulaması oluşturacağız. Ön uç yapı iskelesini oluşturmaktan ileri coğrafi kodlama ve ters coğrafi kodlamayı işlemek için bir coğrafi kodlayıcı oluşturmaya kadar olan süreci ele alacağız. Bu kılavuzdan en iyi şekilde yararlanmak için JavaScript ve Vue.js hakkında temel bilgilere ve API çağrılarının nasıl yapılacağına ihtiyacınız olacak.

Geocoding Nedir?

Geocoding, metin tabanlı konumların dünyadaki bir konumu belirten coğrafi koordinatlara (tipik olarak, boylam ve enlem) dönüştürülmesidir.

Geocoding iki türdür: ileri ve geri . İleri coğrafi kodlama, konum metinlerini coğrafi koordinatlara dönüştürürken, ters coğrafi kodlama, koordinatları konum metinlerine dönüştürür.

Başka bir deyişle, ters coğrafi kodlama, 40.714224, -73.961452'yi "277 Bedford Ave, Brooklyn"e, ileri coğrafi kodlama ise bunun tersini yaparak "277 Bedford Ave, Brooklyn"i 40.714224, -73.961452'ye dönüştürür.

Daha fazla bilgi vermek için, konum koordinatlarını görüntülemek için özel işaretçilere sahip etkileşimli bir web haritası kullanan bir mini web uygulaması oluşturacağız ve daha sonra bunu konum metinlerine dönüştüreceğiz.

Uygulamamız aşağıdaki temel işlevlere sahip olacaktır:

• kullanıcıya bir işaretleyici ile etkileşimli bir harita görüntüsüne erişim izni vermek;
• kullanıcının koordinatları görüntülerken işaretçiyi istediği gibi hareket ettirmesine izin verin;
• kullanıcının isteği üzerine metin tabanlı bir konum veya konum koordinatları döndürür.
  

Vue CLI Kullanarak Proje Kurma

Bu depoda bulunan ortak bilgi levhasını kullanacağız. Paket yöneticisi olarak Vue CLI ve yarn ile yeni bir proje içerir. Depoyu klonlamanız gerekecek. geocoder/boilerplate dalından çalıştığınızdan emin olun.

Uygulamanın Dosya Yapısını Ayarlayın

Ardından, projemizin dosya yapısını kurmamız gerekecek. Bileşenin klasöründeki Helloworld.vue dosyasını Index.vue olarak yeniden adlandırın ve şimdilik boş bırakın. Devam edin ve aşağıdakileri App.vue dosyasına kopyalayın:

 <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>

Burada, yakın zamanda yeniden adlandırılan bileşeni yerel olarak içe aktardık ve ardından kaydettik. Ayrıca uygulamamızın estetiğini artırmak için bir gezinme çubuğu ekledik.

Ortam değişkenlerini yüklemek için bir .env dosyasına ihtiyacımız var. Devam edin ve proje klasörünüzün kök dizinine bir tane ekleyin.

Gerekli Paketleri ve Kitaplıkları Yükleyin

Geliştirme sürecini başlatmak için gerekli kitaplıkları kurmamız gerekecek. İşte bu proje için kullanacaklarımızın bir listesi:

1. Mapbox GL JS
   Bu JavaScript kitaplığı, vektör döşemelerinden ve Mapbox'tan etkileşimli haritalar oluşturmak için WebGL'yi kullanır.
2. Mapbox-gl-geocoder
   Mapbox GL için bu coğrafi kodlayıcı kontrolü, ileriye dönük coğrafi kodlamamıza yardımcı olacaktır.
3. Dotenv
   Vue CLI ile önceden yüklenmiş olarak geldiği için bunu yüklememiz gerekmeyecek. Bir .env dosyasındaki ortam değişkenlerini process.env dosyasına yüklememize yardımcı olur. Bu şekilde konfigürasyonlarımızı kodumuzdan ayrı tutabiliriz.
4. aksiyolar
   Bu kütüphane HTTP istekleri yapmamıza yardımcı olacaktır.

Paketleri, tercih ettiğiniz paket yöneticisine göre CLI'nize kurun. Yarn kullanıyorsanız, aşağıdaki komutu çalıştırın:

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

npm kullanıyorsanız, şunu çalıştırın:

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

Kurulum komutunu çalıştırmadan önce geocoder klasörüne girmemiz gerekiyordu.

Vue.js ile Ön Uç İskelesi

Devam edelim ve uygulamamız için bir düzen oluşturalım. Haritamızı barındıracak bir öğeye, haritadaki işaretçinin hareketini dinlerken koordinatları gösterecek bir bölgeye ve ters coğrafi kodlama API'sini çağırdığımızda konumu gösterecek bir şeye ihtiyacımız olacak. Bunların hepsini bir kart bileşeni içinde barındırabiliriz.

Aşağıdakileri Index.vue dosyanıza kopyalayın:

 <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>

Şu anda sahip olduklarımızı görmek için geliştirme sunucunuzu başlatın. İplik için:

 yarn serve

Veya npm için:

 npm run serve

Uygulamamız şimdi şöyle görünmelidir:

Soldaki boş nokta görünüyor. Harita gösterimimizi barındırmalıdır. Bunu ekleyelim.

Mapbox ile Etkileşimli Harita Görüntüleme

Yapmamız gereken ilk şey Mapbox GL ve Geocoder kitaplıklarına erişim sağlamak. Index.vue dosyasındaki Mapbox GL ve Geocoder kitaplıklarını içe aktararak başlayacağız.

 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, harita vektör döşemelerini hesaplamak için benzersiz bir erişim belirteci gerektirir. Kendinizinkini alın ve .env dosyanıza bir çevresel değişken olarak ekleyin.

 .env

 VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Ayrıca, veri örneğimizde harita döşemelerimizi bir araya getirmeye yardımcı olacak özellikleri tanımlamamız gerekiyor. Aşağıdakileri kitaplıkları içe aktardığımız noktanın altına ekleyin:

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

• location özelliği, iskelemizde sahip olduğumuz girdiye göre modellenecektir. Bunu ters coğrafi kodlamayı (yani koordinatlardan bir konumu görüntülemek) işlemek için kullanacağız.
• center mülk, koordinatlarımızı (enlem ve boylam) barındırır. Bu, birazdan göreceğimiz gibi, harita döşemelerimizi bir araya getirmek için çok önemlidir.
• access_token özelliği, daha önce eklediğimiz çevresel değişkenimizi ifade eder.
• map özelliği, harita bileşenimiz için bir kurucu görevi görür.

Şimdi, içine gömülü ileri coğrafi kodlayıcımızla etkileşimli haritamızı çizen bir yöntem oluşturmaya devam edelim. Bu yöntem, bileşenimiz ve Mapbox GL arasında aracı görevi gören temel işlevimizdir; bu yöntemi createMap . Bunu veri nesnesinin altına ekleyin:

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

Haritamızı oluşturmak için, haritayı barındıran bir container , haritamızın görüntü formatı için bir style özelliği ve koordinatlarımızı barındıracak bir center özelliği belirledik. center özelliği bir dizi tipidir ve boylam ve enlemi tutar.

Mapbox GL JS, sayfadaki bu parametrelere göre haritamızı başlatır ve bize bir Map nesnesi döndürür. Map nesnesi, sayfamızdaki haritaya atıfta bulunurken, harita ile etkileşime girmemizi sağlayan yöntemleri ve özellikleri gösterir. Bu döndürülen nesneyi veri örneğimizde, this.map içinde depoladık.

Mapbox Geocoder ile İleri Geocoding

Şimdi coğrafi kodlayıcıyı ve özel işaretçiyi ekleyeceğiz. Geocoder, metin tabanlı konumları koordinatlara dönüştürerek ileri coğrafi kodlamayı gerçekleştirir. Bu, haritamıza eklenen bir arama giriş kutusu şeklinde görünecektir.

Yukarıda sahip olduğumuz this.map başlatmasının altına aşağıdakini ekleyin:

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

Burada, ilk önce MapboxGeocoder yapıcısını kullanarak yeni bir coğrafi kodlayıcı örneği oluşturduk. Bu, sağlanan parametrelere dayalı olarak bir coğrafi kodlayıcıyı başlatır ve yöntemlere ve olaylara maruz kalan bir nesneyi döndürür. accessToken özelliği, Mapbox erişim belirtecimize atıfta bulunur ve mapboxgl , şu anda kullanılan harita kitaplığına atıfta bulunur.

Uygulamamızın özü özel işaretçidir; geocoder varsayılan olarak bir tane ile birlikte gelir. Ancak bu, ihtiyacımız olan tüm özelleştirmeyi bize sağlamaz; bu nedenle, onu devre dışı bıraktık.

Devam ederek, harita nesnemiz tarafından bize sunulan addControl yöntemine parametre olarak yeni oluşturulan coğrafi kodlayıcımızı ilettik. addControl , bir control parametre olarak kabul eder.

Özel işaretçimizi oluşturmak için, coğrafi kodlayıcı nesnemiz tarafından bize gösterilen bir olaydan yararlandık. Olay on , coğrafi kodlayıcı içinde gerçekleşen olaylara abone olmamızı sağlar. Çeşitli olayları parametre olarak kabul eder. Bir girdi ayarlandığında tetiklenen result olayını dinliyoruz.

Özetle, result üzerinde, işaretleyici kurucumuz, sağladığımız parametrelere (bu durumda sürüklenebilir bir nitelik ve renk) dayalı olarak bir işaretleyici oluşturur. Koordinatlarımızı almak için setLngLat yöntemini kullandığımız bir nesne döndürür. addTo yöntemini kullanarak özel işaretçiyi mevcut haritamıza ekliyoruz. Son olarak, örneğimizdeki center özelliğini yeni koordinatlarla güncelliyoruz.

Ayrıca özel işaretleyicimizin hareketini de takip etmeliyiz. Bunu dragend olay dinleyicisini kullanarak başardık ve center özelliğimizi mevcut koordinatlarla güncelledik.

İnteraktif haritamızı ve ileri coğrafi kodlayıcımızı görüntülemek için şablonu güncelleyelim. Şablonumuzdaki koordinat görüntüleme bölümünü aşağıdakilerle güncelleyin:

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

Bir etkinliğin ardından center özelliğimizi her zaman nasıl güncellediğimizi hatırlıyor musunuz? Burada mevcut değere göre koordinatları gösteriyoruz.

Uygulamamızın estetiğini yükseltmek için index.html dosyasının head bölümüne aşağıdaki CSS dosyasını ekleyin. Bu dosyayı ortak klasöre koyun.

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

Uygulamamız şimdi şöyle görünmelidir:

Mapbox API ile Ters Geocode Konumu

Şimdi, koordinatlarımızı metin tabanlı konumlara ters coğrafi kodlamayı ele alacağız. Bunu işleyen bir method yazalım ve şablonumuzdaki Get Location butonu ile tetikleyelim.

Mapbox'ta ters coğrafi kodlama, ters coğrafi kodlama API'sı tarafından işlenir. Bu, longitude , latitude ve access token istek parametreleri olarak kabul eder. Bu çağrı, genellikle çeşitli ayrıntılarla birlikte bir yanıt yükü döndürür. Bizim endişemiz, features dizisindeki ters coğrafi kodlanmış konumun olduğu ilk nesnedir.

Ulaşmak istediğimiz konumun longitude , latitude ve access_token gönderen bir işlev oluşturmamız gerekecek. O yerin ayrıntılarını almak için onları göndermemiz gerekiyor.

Son olarak, örneğimizdeki location özelliğini place_name anahtarının değeriyle güncellememiz gerekiyor.

createMap() fonksiyonunun altına, istediğimizi işleyen yeni bir fonksiyon ekleyelim. Bu nasıl görünmesi gerektiği:

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

Bu işlev, Mapbox API'sine bir GET isteğinde bulunur. Yanıt, place_name - seçilen konumun adını içerir. Bunu yanıttan alıyoruz ve ardından this.location değeri olarak ayarlıyoruz.

Bunu yaptıktan sonra oluşturduğumuz bu fonksiyonu çağıracak butonu düzenleyip kurmamız gerekiyor. Bir kullanıcı tıkladığında getLocation yöntemini çağıracak olan bir click olay dinleyicisini kullanacağız. Devam edin ve bunun için düğme bileşenini düzenleyin.

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

Pastanın üzerine krema olarak, görüntülenen konumu panoya kopyalamak için bir fonksiyon ekleyelim. Bunu getLocation işlevinin hemen altına ekleyin:

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

Bunu tetiklemek için Copy düğmesi bileşenini güncelleyin:

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

Çözüm

Bu kılavuzda, Mapbox kullanarak coğrafi kodlamaya baktık. Metin tabanlı konumları koordinatlara dönüştüren, konumu etkileşimli bir harita üzerinde görüntüleyen ve kullanıcının isteğine göre koordinatları metin tabanlı konumlara dönüştüren bir coğrafi kodlama uygulaması geliştirdik. Bu kılavuz sadece başlangıçtır. Mapbox tarafından sağlanan çeşitli harita stillerini kullanarak haritanın sunumunu değiştirmek gibi coğrafi kodlama API'leri ile çok daha fazlası elde edilebilir.

• Kaynak kodu GitHub'da mevcuttur.

Kaynaklar

• "Geocoding", Mapbox belgeleri
• “Tarzlar”, Mapbox belgeleri
• "İstemci Tarafı Kodunda Env Değişkenlerini Kullanma", "Modlar ve Ortam Değişkenleri"nde, Vue CLI