วิธีสร้างแอป Geocoding ใน Vue.js โดยใช้ Mapbox

ความแม่นยำและโมดูลาร์แบบระบุตำแหน่งเป็นหนึ่งในข้อดีที่ทำให้ geocodes เป็นวิธีที่สมบูรณ์แบบในการค้นหาตำแหน่งเฉพาะ

ในคู่มือนี้ เราจะสร้างแอป geocoding แบบง่ายๆ ตั้งแต่เริ่มต้น โดยใช้ Vue.js และ Mapbox เราจะครอบคลุมกระบวนการตั้งแต่การสร้างโครงนั่งร้านส่วนหน้าจนถึงการสร้าง geocoder เพื่อจัดการกับการกำหนดพิกัดทางภูมิศาสตร์ไปข้างหน้าและการเข้ารหัสทางภูมิศาสตร์แบบย้อนกลับ เพื่อให้ได้ประโยชน์สูงสุดจากคู่มือนี้ คุณจะต้องมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript และ Vue.js และวิธีเรียกใช้ API

Geocoding คืออะไร?

การระบุพิกัดทางภูมิศาสตร์คือการแปลงตำแหน่งตามข้อความเป็นพิกัดทางภูมิศาสตร์ (โดยทั่วไปคือ ลองจิจูดและละติจูด) ที่ระบุตำแหน่งในโลก

Geocoding มีสองประเภท: ไปข้างหน้าและย้อนกลับ Forward geocoding จะแปลงข้อความสถานที่เป็นพิกัดทางภูมิศาสตร์ ในขณะที่ reverse geocoding จะแปลงพิกัดเป็นข้อความตำแหน่ง

กล่าวอีกนัยหนึ่งคือ Reverse geocoding เปลี่ยน 40.714224, -73.961452 เป็น "277 Bedford Ave, Brooklyn" และ geocoding แบบไปข้างหน้าทำตรงกันข้ามโดยเปลี่ยน "277 Bedford Ave, Brooklyn" เป็น 40.714224, -73.961452

เพื่อให้ข้อมูลเชิงลึกมากขึ้น เราจะสร้างเว็บแอปขนาดเล็กที่ใช้แผนที่เว็บแบบโต้ตอบพร้อมเครื่องหมายที่กำหนดเองเพื่อแสดงพิกัดตำแหน่ง ซึ่งเราจะถอดรหัสเป็นข้อความตำแหน่งในภายหลัง

แอพของเราจะมีฟังก์ชั่นพื้นฐานดังต่อไปนี้:

• ให้ผู้ใช้เข้าถึงการแสดงแผนที่แบบโต้ตอบด้วยเครื่องหมาย
• อนุญาตให้ผู้ใช้ย้ายเครื่องหมายได้ตามต้องการในขณะที่แสดงพิกัด
• ส่งคืนตำแหน่งตามข้อความหรือพิกัดตำแหน่งตามที่ผู้ใช้ร้องขอ
  

ตั้งค่าโครงการโดยใช้ Vue CLI

เราจะใช้ประโยชน์จากต้นแบบที่พบในที่เก็บนี้ มีโครงการใหม่ที่มี Vue CLI และ yarn เป็นผู้จัดการแพคเกจ คุณจะต้องโคลนที่เก็บ ตรวจสอบให้แน่ใจว่าคุณกำลังทำงานจากสาขา geocoder/boilerplate

ตั้งค่าโครงสร้างไฟล์ของแอปพลิเคชัน

ต่อไป เราจะต้องตั้งค่าโครงสร้างไฟล์ของโครงการ เปลี่ยนชื่อไฟล์ Helloworld.vue ในโฟลเดอร์ของส่วนประกอบเป็น Index.vue และปล่อยว่างไว้สำหรับตอนนี้ ไปข้างหน้าและคัดลอกสิ่งต่อไปนี้ลงในไฟล์ App.vue :

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

ที่นี่ เราได้นำเข้าและลงทะเบียนส่วนประกอบที่เพิ่งเปลี่ยนชื่อไปเมื่อเร็วๆ นี้ในเครื่อง เรายังได้เพิ่มแถบนำทางเพื่อยกระดับความสวยงามของแอป

เราจำเป็นต้องมีไฟล์ .env เพื่อโหลดตัวแปรสภาพแวดล้อม ไปข้างหน้าและเพิ่มหนึ่งรายการในรูทของโฟลเดอร์โครงการของคุณ

ติดตั้งแพ็คเกจและไลบรารีที่จำเป็น

เพื่อเริ่มต้นกระบวนการพัฒนา เราจะต้องติดตั้งไลบรารีที่จำเป็น นี่คือรายการที่เราจะใช้สำหรับโครงการนี้:

1. Mapbox GL JS
   ไลบรารี JavaScript นี้ใช้ WebGL เพื่อแสดงแผนที่แบบโต้ตอบจากไทล์เวกเตอร์และ Mapbox
2. Mapbox-gl-geocoder
   การควบคุม geocoder นี้สำหรับ Mapbox GL จะช่วยในการกำหนดพิกัดทางภูมิศาสตร์ที่ส่งต่อของเรา
3. Dotenv
   เราไม่ต้องติดตั้งสิ่งนี้เพราะมันมาพร้อมกับ Vue CLI ที่ติดตั้งไว้ล่วงหน้า ช่วยให้เราโหลดตัวแปรสภาพแวดล้อมจากไฟล์ . .env เข้าสู่ process.env ด้วยวิธีนี้ เราจึงสามารถแยกการกำหนดค่าของเราออกจากโค้ดของเราได้
4. Axios
   ห้องสมุดนี้จะช่วยเราส่งคำขอ 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

มาสร้างเค้าโครงสำหรับแอปของเรากัน เราจำเป็นต้องมีองค์ประกอบเพื่อเป็นที่ตั้งของแผนที่ของเรา ภูมิภาคเพื่อแสดงพิกัดขณะฟังการเคลื่อนไหวของเครื่องหมายบนแผนที่ และบางสิ่งเพื่อแสดงตำแหน่งเมื่อเราเรียกใช้ Reverse geocoding API เราสามารถจัดเก็บสิ่งเหล่านี้ไว้ภายในองค์ประกอบการ์ด

คัดลอกข้อมูลต่อไปนี้ลงในไฟล์ Index.vue ของคุณ:

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

หากต้องการดูว่าเรามีอะไรบ้าง ให้เริ่มเซิร์ฟเวอร์การพัฒนาของคุณ สำหรับเส้นด้าย:

 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 ทำหน้าที่เป็นตัวสร้างสำหรับองค์ประกอบแผนที่ของเรา

มาดำเนินการสร้างวิธีการที่แปลงแผนที่เชิงโต้ตอบของเราด้วยการฝังตัว geocoder ไปข้างหน้าของเรา วิธีนี้เป็นฟังก์ชันพื้นฐานของเรา ซึ่งทำหน้าที่เป็นตัวกลางระหว่างคอมโพเนนต์ของเรากับ 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 หมายถึงแผนที่บนหน้าเว็บของเรา ในขณะที่เปิดเผยวิธีการและคุณสมบัติที่ช่วยให้เราสามารถโต้ตอบกับแผนที่ได้ เราได้เก็บวัตถุที่ส่งคืนนี้ในอินสแตนซ์ข้อมูลของเรา this.map

ส่งต่อ Geocoding ด้วย Mapbox Geocoder

ตอนนี้ เราจะเพิ่ม geocoder และเครื่องหมายที่กำหนดเอง 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()); }); });

ที่นี่ เราได้สร้างอินสแตนซ์ใหม่ของ geocoder โดยใช้ตัวสร้าง MapboxGeocoder สิ่งนี้จะเริ่มต้น geocoder ตามพารามิเตอร์ที่ให้ไว้และส่งคืนอ็อบเจ็กต์ โดยเปิดเผยเมธอดและเหตุการณ์ คุณสมบัติ accessToken หมายถึงโทเค็นการเข้าถึง Mapbox ของเรา และ mapboxgl หมายถึงไลบรารีแผนที่ที่ใช้อยู่ในปัจจุบัน

แก่นของแอปของเราคือเครื่องหมายที่กำหนดเอง geocoder มาพร้อมกับหนึ่งโดยค่าเริ่มต้น อย่างไรก็ตาม สิ่งนี้ไม่ได้ให้การปรับแต่งทั้งหมดที่เราต้องการ ดังนั้นเราจึงปิดการใช้งาน

เราได้ส่ง geocoder ที่สร้างขึ้นใหม่เป็นพารามิเตอร์ไปยังเมธอด addControl ซึ่งแสดงให้เราทราบโดยอ็อบเจ็กต์แผนที่ของเรา addControl ยอมรับการ control เป็นพารามิเตอร์

ในการสร้างเครื่องหมายที่กำหนดเอง เราได้ใช้ประโยชน์จากเหตุการณ์ที่วัตถุ geocoder เปิดเผยให้เราทราบ on event listener ช่วยให้เราสมัครรับข้อมูลเหตุการณ์ที่เกิดขึ้นภายใน geocoder ยอมรับเหตุการณ์ต่าง ๆ เป็นพารามิเตอร์ เรากำลังฟังเหตุการณ์ result ซึ่งเริ่มทำงานเมื่อมีการตั้งค่าอินพุต

สรุปโดยย่อ result ตัวสร้างเครื่องหมายของเราสร้างเครื่องหมายตามพารามิเตอร์ที่เราให้ไว้ (แอตทริบิวต์และสีที่ลากได้ ในกรณีนี้) ส่งคืนวัตถุซึ่งเราใช้เมธอด setLngLat เพื่อรับพิกัดของเรา เราผนวกเครื่องหมายที่กำหนดเองเข้ากับแผนที่ที่มีอยู่โดยใช้เมธอด addTo สุดท้าย เราอัปเดตคุณสมบัติ center ในอินสแตนซ์ของเราด้วยพิกัดใหม่

เรายังต้องติดตามการเคลื่อนไหวของเครื่องหมายที่เรากำหนดเอง เราบรรลุสิ่งนี้โดยใช้ตัวฟังเหตุการณ์ dragend และเราอัปเดตคุณสมบัติ center ของเราด้วยพิกัดปัจจุบัน

มาอัปเดตเทมเพลตเพื่อแสดงแผนที่เชิงโต้ตอบและส่งต่อ geocoder ของเรา อัปเดตส่วนการแสดงพิกัดในเทมเพลตของเราดังนี้:

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

แอปของเราควรมีลักษณะดังนี้:

ย้อนกลับตำแหน่ง Geocode ด้วย Mapbox API

ตอนนี้ เราจะจัดการกับพิกัดทางภูมิศาสตร์แบบย้อนกลับของเราไปยังตำแหน่งแบบข้อความ มาเขียนวิธีการจัดการกับมันและทริกเกอร์มันด้วยปุ่มรับ Get Location ในเทมเพลตของเรา

Reverse geocoding ใน Mapbox ได้รับการจัดการโดย reverse geocoding 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 ไปยัง Mapbox API คำตอบประกอบด้วย 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 เราสร้างแอป geocoding ที่แปลงตำแหน่งตามข้อความเป็นพิกัด แสดงตำแหน่งบนแผนที่แบบโต้ตอบ และแปลงพิกัดเป็นตำแหน่งแบบข้อความ ตามคำขอของผู้ใช้ คู่มือนี้เป็นเพียงจุดเริ่มต้น สามารถทำได้มากขึ้นด้วย geocoding APIs เช่น การเปลี่ยนการนำเสนอของแผนที่โดยใช้รูปแบบแผนที่ต่างๆ ที่ Mapbox มีให้

• ซอร์สโค้ดมีอยู่ใน GitHub

ทรัพยากร

• “Geocoding”, เอกสาร Mapbox
• “สไตล์” เอกสารประกอบ Mapbox
• “การใช้ตัวแปร Env ในรหัสฝั่งไคลเอ็นต์” ใน “โหมดและตัวแปรสภาพแวดล้อม”, Vue CLI