110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<mgl-geo-json-source source-id="clusters" :data="clusters">
|
|
<mgl-circle-layer
|
|
layer-id="clusters_dots"
|
|
:paint="cluster_paint"
|
|
@click="clusterClick"
|
|
@mouseenter="clusterEnter"
|
|
@mouseleave="clusterLeave"
|
|
/>
|
|
|
|
<MglSymbolLayer
|
|
layer-id="cluster_icon"
|
|
:layout="{
|
|
'icon-image': 'cluster',
|
|
'icon-size': 0.1,
|
|
'icon-overlap': 'always',
|
|
'text-overlap': 'always',
|
|
}"
|
|
@click="clusterClick"
|
|
@mouseenter="clusterEnter"
|
|
@mouseleave="clusterLeave"
|
|
/>
|
|
<MglSymbolLayer
|
|
layer-id="clusters_labels"
|
|
:layout="cluster_label"
|
|
/>
|
|
</mgl-geo-json-source>
|
|
|
|
<div ref="popup-div">
|
|
<div v-for="data in popupData" :key="data.pattern.id">
|
|
Direction {{ data.pattern.lastStopName }}
|
|
<div v-for="time in data.times" :key="time.tripId">
|
|
{{
|
|
time.realtimeArrival -
|
|
(Math.floor(new Date().getTime() / 1000) -
|
|
time.serviceDay)
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { FeatureCollection, Point } from "geojson";
|
|
import { useMap } from "@indoorequal/vue-maplibre-gl";
|
|
import { Popup } from "maplibre-gl";
|
|
|
|
const cluster_label = {
|
|
"text-field": ["get", "id"],
|
|
};
|
|
const map = useMap("main");
|
|
const popupDiv = useTemplateRef("popup-div");
|
|
|
|
const { clusters, route } = defineProps<{
|
|
clusters: FeatureCollection<Point>;
|
|
route: Route;
|
|
}>();
|
|
|
|
const cluster_paint = {
|
|
"circle-radius": 18,
|
|
"circle-color": "#" + route.color,
|
|
};
|
|
|
|
const popupData = ref<StopTimesPattern[]>([]);
|
|
const popup = new Popup().setMaxWidth("500px").addTo(map.map!);
|
|
|
|
onUnmounted(() => {
|
|
popup.remove();
|
|
});
|
|
|
|
async function clusterClick(e: FeatureCollection) {
|
|
popupData.value = [];
|
|
const feature = e.features[0];
|
|
if (!feature || !feature.properties) {
|
|
return;
|
|
}
|
|
const code = feature.properties.code;
|
|
if (!code) {
|
|
return;
|
|
}
|
|
// let data;
|
|
const coordinates = feature.geometry.coordinates.slice();
|
|
// [data, popupData.value] = await Promise.all([
|
|
// $fetch<FeatureCollection<Point>>(
|
|
// `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
|
|
// ),
|
|
|
|
// ]);
|
|
|
|
popupData.value = await $fetch<StopTimesPattern[]>(
|
|
`https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false&route=${route.id}`,
|
|
{
|
|
headers: {
|
|
origin: "PersonalProjectMreso",
|
|
},
|
|
},
|
|
);
|
|
popup.setDOMContent(popupDiv.value).setLngLat(coordinates).addTo(map.map!);
|
|
}
|
|
|
|
function clusterEnter() {
|
|
map.map!.getCanvas().style.cursor = "pointer";
|
|
}
|
|
function clusterLeave() {
|
|
map.map!.getCanvas().style.cursor = "";
|
|
}
|
|
</script>
|