121 lines
3.6 KiB
Vue
121 lines
3.6 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 store.selectedLines">
|
|
<MapLines :line="r" />
|
|
<MapClusters
|
|
v-if="shownClusters && r.properties?.route"
|
|
:clusters="shownClusters"
|
|
:route="r.properties.route"
|
|
/></template>
|
|
|
|
<mgl-geo-json-source
|
|
:source-id="`trip_leg_${index}`"
|
|
:data="line"
|
|
v-for="(line, index) in store.selectedLines"
|
|
>
|
|
<mgl-line-layer
|
|
:layer-id="`trip_line_leg_${index}`"
|
|
:paint="{
|
|
'line-width': 4,
|
|
'line-color':
|
|
'#' + (line.properties?.route?.color || '000000'),
|
|
'line-dasharray': [
|
|
2,
|
|
line.properties?.mode == 'WALK' ? 1 : 0,
|
|
],
|
|
}"
|
|
/>
|
|
</mgl-geo-json-source>
|
|
</MglMap>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { FeatureCollection, 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 style =
|
|
// "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json";
|
|
const center = new LngLat(5.735, 45.185);
|
|
const zoom = 12;
|
|
|
|
const emit = defineEmits<{
|
|
loaded: [];
|
|
}>();
|
|
|
|
const store = useMresoStore();
|
|
await store.fetchData();
|
|
const shownClusters = ref<FeatureCollection<Point> | null>(null);
|
|
const image = useSvgImage();
|
|
const map = useMap("main");
|
|
|
|
watch(map, () => {
|
|
if (map.isLoaded) {
|
|
emit("loaded");
|
|
}
|
|
});
|
|
watchEffect(async () => {
|
|
const allClusters = [];
|
|
for (const line of store.selectedLines) {
|
|
if (line.properties.route === undefined) {
|
|
continue;
|
|
}
|
|
const apiClusters = await $fetch<Cluster[]>(
|
|
`https://data.mobilites-m.fr/api/routers/default/index/routes/${line.properties.route.id}/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,
|
|
),
|
|
...store.selectedLines.map((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,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="css">
|
|
.maplibregl-map {
|
|
grid-area: "map";
|
|
}
|
|
</style>
|
|
|
|
<style lang="css">
|
|
.maplibregl-map {
|
|
grid-area: map;
|
|
}
|
|
</style>
|