little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

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}`) axios.get(`https://api.openrouteservice.org/v2/directions/wheelchair?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`)
.then(response => { .then(response => {
const route = response.data.features[0].geometry.coordinates; 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}) console.log('This is route :',{route:route})
this.$emit('updateRouting', {start:this.userLocation,stop:{lat:parseFloat(this.nearestStructureData.lat),lon:parseFloat(this.nearestStructureData.lon)},route:route}); this.$emit('updateRouting', {route:route});
// this.plotRoute(route); // this.plotRoute(route);
}) })
.catch(error => { .catch(error => {

34
src/views/Home.vue
View file

@ -83,21 +83,28 @@
<ol-vector-layer v-if="isRouting"> <ol-vector-layer v-if="isRouting">
<ol-source-vector> <ol-source-vector>
<!-- Line String Geometry -->
<ol-feature> <ol-feature>
<ol-geom-line-string <ol-geom-line-string :coordinates="route"></ol-geom-line-string>
:coordinates="route" </ol-feature>
></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>
<!-- 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-feature>
</ol-source-vector> </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-vector-layer>
</ol-map> </ol-map>
@ -125,8 +132,6 @@ const rotation = ref(0);
const popupData = ref(null); const popupData = ref(null);
const isRouting = ref(false); const isRouting = ref(false);
const startPoint = ref(null);
const stopPoint = ref(null);
const route = ref(null); const route = ref(null);
const strokeWidth = ref(5); const strokeWidth = ref(5);
const strokeColor = ref("red"); const strokeColor = ref("red");
@ -183,10 +188,7 @@ const closePopup = () => {
const handleRouting = (res) => { const handleRouting = (res) => {
console.log("Received Route:", 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; route.value = res.route;
// console.log(startPoint,stopPoint,route);
isRouting.value = true; isRouting.value = true;
}; };