mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-22 08:36:51 +00:00
show marker at start stop point
This commit is contained in:
parent
2c7bfa7ab1
commit
763a5babba
2 changed files with 20 additions and 18 deletions
|
@ -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 => {
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue