105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
|
|
<MglNavigationControl />
|
|
<MglImage id="cluster" :image="image" />
|
|
<template v-for="r of shownLines" :key="r.route.id">
|
|
<MapLines :route-with-line="r" />
|
|
<MapClusters
|
|
v-if="shownClusters"
|
|
:clusters="shownClusters"
|
|
:route="r.route"
|
|
/></template>
|
|
</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();
|
|
await store.fetchData();
|
|
const shownClusters = ref<FeatureCollection<Point> | null>(null);
|
|
const image = useSvgImage();
|
|
const map = useMap("main");
|
|
|
|
watchEffect(async () => {
|
|
const allClusters = [];
|
|
for (const routeId of store.selectedRouteIds) {
|
|
if (routeId === undefined) {
|
|
continue;
|
|
}
|
|
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.clustersByCode[c.code])
|
|
.filter((c) => c !== undefined),
|
|
};
|
|
|
|
const firstPoint = shownClusters.value.features[0];
|
|
if (!firstPoint) {
|
|
map.map?.flyTo({ center, zoom });
|
|
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 store.selectedRouteIds) {
|
|
const route = store.routesById[routeId];
|
|
if (!route) {
|
|
continue;
|
|
}
|
|
const line = store.linesById[routeId.replace(":", "_")];
|
|
if (!line) {
|
|
continue;
|
|
}
|
|
l.push({
|
|
route,
|
|
line,
|
|
});
|
|
}
|
|
return l;
|
|
});
|
|
</script>
|