100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
|
|
<MglNavigationControl />
|
|
<MapLines
|
|
v-for="r of shownLines"
|
|
:key="r.route.id"
|
|
:route-with-line="r"
|
|
/>
|
|
<MapClusters v-if="shownClusters" :clusters="shownClusters" />
|
|
</MglMap>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {
|
|
Feature,
|
|
FeatureCollection,
|
|
MultiLineString,
|
|
Point,
|
|
} from "geojson";
|
|
import { useMap } from "@indoorequal/vue-maplibre-gl";
|
|
import { LngLat, LngLatBounds } from "maplibre-gl";
|
|
const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
|
|
const center = new LngLat(5.735, 45.185);
|
|
const zoom = 12;
|
|
|
|
const store = useMresoStore();
|
|
store.fetchData();
|
|
const shownClusters = ref<FeatureCollection<Point> | null>(null);
|
|
|
|
const { selectedRoutesId } = defineProps<{
|
|
selectedRoutesId: string[];
|
|
}>();
|
|
|
|
const map = useMap("main");
|
|
watchEffect(async () => {
|
|
const allClusters = [];
|
|
for (const routeId of selectedRoutesId) {
|
|
const apiClusters = await $fetch<Cluster[]>(
|
|
`https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
|
|
);
|
|
allClusters.push(...apiClusters);
|
|
}
|
|
shownClusters.value = {
|
|
type: "FeatureCollection",
|
|
features: allClusters
|
|
.map((c) => store.clustersById[c.id])
|
|
.filter((c) => c !== undefined),
|
|
};
|
|
const firstPoint = shownClusters.value.features[0];
|
|
if (!firstPoint) {
|
|
return;
|
|
}
|
|
const coordinates = [
|
|
...shownClusters.value.features.map(
|
|
(point) => point.geometry.coordinates,
|
|
),
|
|
...shownLines.value
|
|
.map((line) => line.line.geometry.coordinates)
|
|
.flat(2),
|
|
];
|
|
const bounds = coordinates
|
|
// .filter((c) => stops.includes(c.properties?.id))
|
|
.reduce(
|
|
(bounds, coords) => {
|
|
return bounds.extend(new LngLat(coords[0], coords[1]));
|
|
},
|
|
new LngLatBounds([
|
|
firstPoint.geometry.coordinates[0]!,
|
|
firstPoint.geometry.coordinates[1]!,
|
|
firstPoint.geometry.coordinates[0]!,
|
|
firstPoint.geometry.coordinates[1]!,
|
|
]),
|
|
);
|
|
map.map!.fitBounds(bounds, {
|
|
padding: 20,
|
|
});
|
|
});
|
|
|
|
const shownLines = computed(() => {
|
|
const l: { route: Route; line: Feature<MultiLineString> }[] = [];
|
|
for (const routeId of selectedRoutesId) {
|
|
const route = store.routesById[routeId];
|
|
if (!route) {
|
|
continue;
|
|
}
|
|
const line = store.linesById[routeId.replace(":", "_")];
|
|
if (!line) {
|
|
continue;
|
|
}
|
|
l.push({
|
|
route,
|
|
line,
|
|
});
|
|
}
|
|
return l;
|
|
});
|
|
</script>
|