Leaflet Routing in Angular
หลายๆ ท่านคงเคยใช้งาน Google Map Direction APIกันเป็นอย่างดีอยู่แล้วในการหาเส้ททางที่สั้นที่สุดหรือเส้นทางที่เหมาะสมที่สุดในการเดินทางจากจุดเริ่มต้นไปที่จุดเป้าหมายของเรา วันนี้ผมลองนำเสนอ Leaflet Routing Machine เป็นเครื่องมืออีกตัวนึงที่ใช้งานบน Leaflet ซึ่งการใช้งานก็ค่อนข้างง่ายและสะดวก เพียงเขียน Code ไม่กี่บรรทัดก็สามารถกำหนดเส้นทางที่ใช้งานได้อย่างสมบูรณ์ การสร้างเส้นทางในแผนที่ด้วย Leaflet Routing สามารถเข้าไปดูได้ที่ Leaflet Routing Machine (liedman.net) โดยเส้นทางจะถูกสร้างขึ้นอัตโนมัติเมื่อทำการเลือกจุดเริ่มต้นและจุดสิ้นสุดให้กับแผนที่ วิธีการสร้างมีดังต่อไปนี้
- เริ่มต้นด้วยการติดตั้งปลั๊กอิน
npm i leaflet
npm i — save-dev @types/leaflet
npm i leaflet-routing-machine
npm i — save-dev @types/leaflet-routing-machine
2. สร้างแผนที่
style.css
#map { height: 800px; width: 100%; }
map.html
<div id=”map”></div>
map.ts
this.map = L.map(‘map’).setView([ตำแหน่ง Lat, ตำแหน่ง Lng], Zoom level)
L.tileLayer(‘https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 22
}).addTo(this.map);
3. กำหนดตำแหน่งจุดและสร้างหมุด ใช้ในการสร้างเส้นทาง
start = [ตำแหน่ง Lat, ตำแหน่ง Lng]
end = [ตำแหน่ง Lat, ตำแหน่ง Lng]
L.marker(this.start).addTo(this.map)
L.marker(this.end).addTo(this.map)
4. เริ่มการสร้างเส้นทาง
L.Routing.control({
waypoints: [L.latLng(this.start),L.latLng(this.end)]
})
.addTo(this.map);
5. เพิ่มเติม สร้างการเคลื่อนที่ตามเส้นทางที่สร้างไว้ โดยเริ่มจากการสร้างตัวแปรหมุดที่เราจะใช้ในการขยับ
var marker_route = L.marker(this.center_latlng).addTo(this.map)
เพิ่มโค้ดการขยับหมุด ต่อท้ายฟังก์ชั่น L.Routing.control
.on(‘routesfound’,(e:any)=>{
var routes = e.routes[0]
routes.coordinates.forEach((f:any,i:any) => {
setTimeout(() => {
marker_route.setLatLng([f.lat, f.lng])
}, 80*i);
});
})
