Test create route
This commit is contained in:
NekoVari
parent
fcf226c4ec
commit
bb148086ba
BIN
assets/flag-filled-symbolic.png
Normal file
BIN
assets/flag-filled-symbolic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
2
assets/flag-filled-symbolic.svg
Normal file
2
assets/flag-filled-symbolic.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 1.980469 1.003906 v 14 h 2 v -6 h 2.382812 l 0.722657 1.445313 c 0.171874 0.339843 0.519531 0.554687 0.894531 0.554687 h 5 c 0.554687 0 1 -0.449218 1 -1 v -6 c 0 -0.550781 -0.445313 -1 -1 -1 h -3.378907 l -0.726562 -1.449218 c -0.167969 -0.335938 -0.515625 -0.550782 -0.894531 -0.550782 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/map-marker-symbolic.png
Normal file
BIN
assets/map-marker-symbolic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
2
assets/map-marker-symbolic.svg
Normal file
2
assets/map-marker-symbolic.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 8 0 c -3.589844 0 -6.5 2.910156 -6.5 6.5 s 2.910156 6.496094 6.5 6.496094 c 3.589844 0.003906 6.5 -2.90625 6.5 -6.496094 s -2.910156 -6.5 -6.5 -6.5 z m 0 4 c 1.378906 0 2.5 1.117188 2.5 2.5 c 0 1.378906 -1.121094 2.5 -2.5 2.496094 c -1.378906 0 -2.5 -1.117188 -2.5 -2.496094 s 1.117188 -2.5 2.5 -2.5 z m 0 0" fill="#222222"/><path d="m 14.097656 8.746094 l -5.660156 0.230468 l -6.535156 -0.230468 c 0.6875 2.152344 4.097656 5.25 6.097656 7.25 v 0.003906 v -0.003906 c 2 -2 5.410156 -5.101563 6.097656 -7.25 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -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
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
v-if="popupData"
|
||||
:nearestStructureData="popupData"
|
||||
:onClose="closePopup"
|
||||
@updateLocation="handleUserLocation"
|
||||
@updateRouting="handleRouting"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
@ -80,6 +80,26 @@
|
|||
<ol-tile-layer>
|
||||
<ol-source-osm />
|
||||
</ol-tile-layer>
|
||||
|
||||
<ol-vector-layer v-if="isRouting">
|
||||
<ol-source-vector>
|
||||
<ol-feature>
|
||||
<ol-geom-line-string
|
||||
:coordinates="route"
|
||||
></ol-geom-line-string>
|
||||
|
||||
<ol-style>
|
||||
<ol-style-stroke
|
||||
:color="strokeColor"
|
||||
:width="strokeWidth"
|
||||
></ol-style-stroke>
|
||||
<ol-style-icon :src="startMarker" :scale="0.1"></ol-style-icon>
|
||||
</ol-style>
|
||||
|
||||
</ol-feature>
|
||||
</ol-source-vector>
|
||||
</ol-vector-layer>
|
||||
|
||||
</ol-map>
|
||||
|
||||
</template>
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Reference in a new issue