From bb148086ba7d2ef13e5501670cf44e5c8428c2d2 Mon Sep 17 00:00:00 2001 From: NekoVari Date: Fri, 1 Dec 2023 00:35:14 +0700 Subject: [PATCH] Test create route --- assets/flag-filled-symbolic.png | Bin 0 -> 4391 bytes assets/flag-filled-symbolic.svg | 2 ++ assets/map-marker-symbolic.png | Bin 0 -> 14072 bytes assets/map-marker-symbolic.svg | 2 ++ src/components/DestinationInfoCard.vue | 37 +++++----------------- src/views/Home.vue | 42 ++++++++++++++++++++++--- 6 files changed, 50 insertions(+), 33 deletions(-) create mode 100644 assets/flag-filled-symbolic.png create mode 100644 assets/flag-filled-symbolic.svg create mode 100644 assets/map-marker-symbolic.png create mode 100644 assets/map-marker-symbolic.svg diff --git a/assets/flag-filled-symbolic.png b/assets/flag-filled-symbolic.png new file mode 100644 index 0000000000000000000000000000000000000000..afc4c4c0049fdb34c582614afdd5524e3d19f1d1 GIT binary patch literal 4391 zcmdT{2UL^i8veov0%6#Tf{R^|Vl)id3JLIVa!${`ubLd7tVOIe3F9RSQ zl==98A?)CD-*0XTz?~E&1SuS3aWDh`3^d`_uJxfJw1kLw%e_K_qOz+|%DQpqH~>h@ z;!StkhqsS)OAY>*ZX1Thr_1hC4lrXz2t>ao1NhTCaX#9CRwePoBW9$p=SS?amA~R7Uk;7eJPaA~YCSB9MMG}=x zzqCf$K!IFn03Neq4HE7WzC2>L)L_%PR3)7qI?{Z2y0gSelnzoAw{|Vh4Z6LkPRXvw z`H6{=0k(err#T zs3^3M$yBWxo{}|TkHP>|+GY~blX6p0Mbs5o6n3FUbtAP}3`uvI1aTmz)n|D8*^Z2K zeK!QnsXTT6dHv^ruWzE z$^^H#RIr56ABlA^IcE30bqp{$tZBnY+j%X`O-D&|#Zej>i9 z`MPY%^*tU0Li-#$*Sn6pq)<9(Hq`xt!hQBBq1xKyZ_2VEzbb7w@oXbY$(+HN9c!Du zbcy8%RY-Z*Sy4rnquI9_Tx|R5&!FV-g$~62ee;XYsBO12y&_M$0SjBdWwEJFx^a8Q zFKKuY(K04N$B+|yO}V;0P!j|2$$5g6mEM7Nc9hqHQFnO=2U*=zd~$MW8!z;8G?A)% z!FL<>O=u-Z%^Biuonbe5_uf0m3PMD5SQ>Y?xa5+WZb#Jd&@V$nt>QxZOat|K?7~k% zBbtzogkvLF;fxM(eq)OJf+1Zy%1tP;7>X!-Dg z12#R_6Chk(S+z)`X5i`MS}kCRfjMK1_mdtL-$3=aL0wbbC@~-ruUth4Wl#09;?d;9 z-4u7MBX#G}UY z5P!CS=tEe8@sh#g6&vF73mydYGJbFkZ|zk@>M2WZEkDlk4h#$5_Y7_v62_hy%(AzS z1yeKQU?(UBl>e;(cMK%xv;;q$pX>~nbBU-P6dg-`y;uo2pl7Y|Nv<0R2SK9pddoOq z2p;`gX#h%j5blmb(0gT#o&n~L?yxLp;O&{l^{5ibrNCVQN=fzyPhE zb+9Dob~Wz}s!~+DUr^fVjr74ccb^|QoX)a~Dh4SSzz;LD{n}_*Zgh+!vJRku&YA92 zsR8bJaxAsiGwScX)ptzf6=xdC zz>O8wOb#&MKKn>-(TqG3=kuz#do%MEWArbxOg~)pyWgWY*OJ)`GgqICHX+J_%vmr0kzWq&h(%W?J-P&*% z9^IB2v88rsC`_iX$U#g@+>c$&eUmjzyS>T zz|=vqcM~JMd{<)ejFDqUn_k#Ng0R&ZsL^#M+Mi}mNW7^=*x1)tF#6VLF?H>;tNmKM z@KjEQx!jw(ry2|1#VkV=o=+w!x>e)hfSh9$ybu~0Uc6+?t{4h4T1uPU=F~GoM>H>6 z(iMZ$3&l7kOKrq#;7T*PG z*x8`b%aunT4|s9Mge20J{O5_e0!UKFEf-$p;CoH?fAd_>f>3aK5REQsa*2Ks_pTCx z`{vsHzt0zcNTnX-OQzvBZMxzSGN3DlB)+P@|4jdR!!KA1!)n_F_D&yJ{`NcbN_b(7 z;38v5SzLU;nXECX$u>DEx&Goy39&P^{6c%e-}NFFfu|l&@nNNesByfSOU#a?kqno} z;1l+7xfNbPIO0Zqsa+@hGGhX&G1fXzB%O4%Wb9jmJ>jE;L7X=&l~>R2+UFbLjk~!BLHZwhuyVyl# zqi(w-*blF7|FJ=83lH>_ZQ!&7kaA@kSSgszN=xPOt+Z4gAJmKdnOM>0zZlTJ?y}M) z + diff --git a/assets/map-marker-symbolic.png b/assets/map-marker-symbolic.png new file mode 100644 index 0000000000000000000000000000000000000000..28393f4f3b4c9106b3bb8ff9f101a80dd117340e GIT binary patch literal 14072 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 literal 0 HcmV?d00001 diff --git a/assets/map-marker-symbolic.svg b/assets/map-marker-symbolic.svg new file mode 100644 index 0000000..8a58190 --- /dev/null +++ b/assets/map-marker-symbolic.svg @@ -0,0 +1,2 @@ + + diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue index bce9749..659bd8c 100644 --- a/src/components/DestinationInfoCard.vue +++ b/src/components/DestinationInfoCard.vue @@ -254,6 +254,7 @@ export default { if (this.isLocationRequested && !this.userLocation) { return 'Requesting location...'; } else if (this.userLocation) { + this.Routing(); return `${this.userLocation.lon.toFixed(6)}, ${this.userLocation.lat.toFixed(6)}`; } return 'Location not available'; @@ -268,10 +269,13 @@ export default { this.getUserLocation(); this.showRoute = true; }, + enterRoute() { + console.log('Entering Route!'); + }, getUserLocation() { this.isLocationRequested = true; if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError); + navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError) } else { console.error("Geolocation is not supported by this browser."); } @@ -282,7 +286,6 @@ export default { lon: position.coords.longitude }; console.log('User Location:', this.userLocation); - this.$emit('updateLocation', this.userLocation); }, handleLocationError(error) { console.error('Error getting location:', error); @@ -329,9 +332,7 @@ export default { this.$router.push({ name: 'login' }); } }, - enterRoute(){ - console.log("start routing!.") - + Routing(){ // Make a request to OpenRouteService API for a sample route const apiKey = import.meta.env.VITE_OPENROUTESERVICE_API_KEY; const startCoord = '100.53860,13.76410'; //(lon,lat) test data @@ -340,36 +341,14 @@ export default { axios.get(`https://api.openrouteservice.org/v2/directions/wheelchair?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`) .then(response => { const route = response.data.features[0].geometry.coordinates; - console.log('This is route :',route) + console.log('This is route :',{start:this.userLocation,stop:{lat:parseFloat(this.nearestStructureData.lat),lon:parseFloat(this.nearestStructureData.lon)},route:route}) + this.$emit('updateRouting', {start:this.userLocation,stop:{lat:parseFloat(this.nearestStructureData.lat),lon:parseFloat(this.nearestStructureData.lon)},route:route}); // this.plotRoute(route); }) .catch(error => { console.error('Error fetching route:', error); }); }, - // plotRoute(coordinates) { - // const routeFeature = new Feature({ - // geometry: new LineString(coordinates).transform('EPSG:4326', 'EPSG:3857'), - // }); - - // routeFeature.setStyle( - // new Style({ - // stroke: new Stroke({ - // color: 'blue', - // width: 2, - // }), - // }) - // ); - - // const vectorLayer = new VectorLayer({ - // source: new VectorSource({ - // features: [routeFeature], - // }), - // }); - - // this.map.addLayer(vectorLayer); - // this.ma - }, }; diff --git a/src/views/Home.vue b/src/views/Home.vue index eae7370..aecdd3c 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -10,7 +10,7 @@ v-if="popupData" :nearestStructureData="popupData" :onClose="closePopup" - @updateLocation="handleUserLocation" + @updateRouting="handleRouting" /> @@ -58,7 +58,7 @@ - + + + + + + + + + + + + + + + @@ -94,6 +114,8 @@ import { ref } from "vue"; import axios from "axios"; import DestinationInfoCard from '@/components/DestinationInfoCard.vue'; +import startMarker from '../../assets/map-marker-symbolic.png'; +import stopMarker from '../../assets/flag-filled-symbolic.png'; const center = ref([100.538611, 13.764722]); const projection = ref("EPSG:4326"); @@ -102,6 +124,13 @@ const rotation = ref(0); const popupData = ref(null); +const isRouting = ref(false); +const startPoint = ref(null); +const stopPoint = ref(null); +const route = ref(null); +const strokeWidth = ref(5); +const strokeColor = ref("red"); + //search const searchQuery = ref(""); const searchResults = ref([]); @@ -152,8 +181,13 @@ const closePopup = () => { popupData.value = null; // Hide popup }; -const handleUserLocation = (location) => { - console.log("Received user location:", location); +const handleRouting = (res) => { + console.log("Received Route:", res); + startPoint.value = [parseFloat(res.start.lat),parseFloat(res.start.lon)]; + stopPoint.value = [parseFloat(res.stop.lat),parseFloat(res.stop.lon)]; + route.value = res.route; + // console.log(startPoint,stopPoint,route); + isRouting.value = true; };