little-lines/frontend
1
0
Fork 0
mirror of https://gitlab.com/little-lines/frontend.git synced 2024-11-24 22:06:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

show marker at start stop point

Browse source
This commit is contained in:
NekoVari 2023-12-06 20:02:57 +07:00
parent 2c7bfa7ab1
commit 763a5babba
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/DestinationInfoCard.vue
View file

@ -344,8 +344,8 @@ 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 :',{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});
console.log('This is route :',{route:route})
this.$emit('updateRouting', {route:route});
// this.plotRoute(route);
})
.catch(error => {

34
src/views/Home.vue
View file

@ -83,21 +83,28 @@
<ol-vector-layer v-if="isRouting">
<ol-source-vector>
<!-- Line String Geometry -->
<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-geom-line-string :coordinates="route"></ol-geom-line-string>
</ol-feature>
<!-- Multi Point Geometry -->
<ol-feature>
<ol-geom-multi-point :coordinates="[
[route[0][0],route[0][1]],
[route[route.length-1][0],route[route.length-1][1]]
]"></ol-geom-multi-point>
</ol-feature>
</ol-source-vector>
<!-- Style for the Line and Points -->
<ol-style>
<!-- Style for Line -->
<ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
<!-- Style for Points -->
<ol-style-icon :src="startMarker" :scale="0.1" :anchor="[0.5, 1]"></ol-style-icon>
</ol-style>
</ol-vector-layer>
</ol-map>
@ -125,8 +132,6 @@ 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");
@ -183,10 +188,7 @@ const closePopup = () => {
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;
};