154 lines
4.2 KiB
Vue
154 lines
4.2 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>
|
|
|
|
<mgl-geo-json-source
|
|
:source-id="`trip_leg_${index}`"
|
|
:data="line"
|
|
v-for="(line, index) in store.selectedTrips"
|
|
>
|
|
<mgl-line-layer
|
|
:layer-id="`trip_line_leg_${index}`"
|
|
:paint="{
|
|
'line-width': 4,
|
|
'line-color':
|
|
'#' +
|
|
(store.routesById[line.properties?.routeId]
|
|
?.color || '000000'),
|
|
}"
|
|
/>
|
|
</mgl-geo-json-source>
|
|
</MglMap>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {
|
|
Feature,
|
|
FeatureCollection,
|
|
MultiLineString,
|
|
Point,
|
|
} from "geojson";
|
|
|
|
const paint = {
|
|
"line-color": "#FF0000",
|
|
"line-width": 4,
|
|
};
|
|
|
|
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");
|
|
|
|
watchEffect(() => {
|
|
console.log(store.selectedTrip);
|
|
});
|
|
|
|
watch(map, () => {
|
|
if (map.isLoaded) {
|
|
emit("loaded");
|
|
}
|
|
});
|
|
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>
|
|
|
|
<style scoped lang="css">
|
|
.maplibregl-map {
|
|
grid-area: "map";
|
|
}
|
|
</style>
|
|
|
|
<style lang="css">
|
|
.maplibregl-map {
|
|
grid-area: map;
|
|
}
|
|
</style>
|