58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<SidebarTrip @plan="plan" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { LngLat } from "maplibre-gl";
|
|
import { decode } from "@googlemaps/polyline-codec";
|
|
import type { Feature, LineString } from "geojson";
|
|
definePageMeta({ key: "trip" });
|
|
|
|
const from = "SEM:GENBIBLIUNI";
|
|
const to = "SEM:GENALSACELO";
|
|
const store = useMresoStore();
|
|
|
|
function plan() {
|
|
const fromCoord = store.clustersByCode[from]?.geometry.coordinates;
|
|
const toCoord = store.clustersByCode[to]?.geometry.coordinates;
|
|
if (!fromCoord || !toCoord) {
|
|
return;
|
|
}
|
|
const planner = new TransitRoutePlanner(
|
|
new LngLat(fromCoord[1]!, fromCoord[0]!),
|
|
new LngLat(toCoord[1]!, toCoord[0]!),
|
|
);
|
|
planner.request().then((data) => {
|
|
const GeoLines: Feature<LineString, LineProperties>[] = [];
|
|
const itinerary = data.plan.itineraries[0];
|
|
if (!itinerary) {
|
|
console.log("No Itineraries found");
|
|
return;
|
|
}
|
|
for (const leg of itinerary.legs) {
|
|
console.log(leg);
|
|
const points = leg.legGeometry.points;
|
|
if (!points) {
|
|
return;
|
|
}
|
|
const lines = decode(points).map(([lat, lng]) => [lng, lat]);
|
|
const lineString: Feature<LineString, LineProperties> = {
|
|
type: "Feature",
|
|
properties: {
|
|
mode: leg.mode,
|
|
},
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: lines,
|
|
},
|
|
};
|
|
if (leg.routeId) {
|
|
lineString.properties!.route = store.routesById[leg.routeId];
|
|
}
|
|
GeoLines.push(lineString);
|
|
}
|
|
store.selectedLines = GeoLines;
|
|
});
|
|
}
|
|
</script>
|