Lepsi podpora elevace terenu

src/components/flights/FlightTrackMap.vue

@@ -2,6 +2,7 @@
 import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import {computed, ref} from "vue";
+import {Line} from "vue-chartjs"
 
 const props = defineProps({
   flight: {
@@ -11,24 +12,22 @@ const props = defineProps({
 })
 
 
-const trackWithGPS = computed(() => {
+const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const poisWithGPS = computed(() => {
   return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
 });
 
-const slider = ref(0);
-
-
 const pointsOfInterests = computed(() => {
   const path = [{
     label: flight.value.takeoffAirport.name,
     position:
       {
-        lat: flight.value.takeoffAirport.gpsLatitude + (slider.value / 1000),
-        lng: flight.value.takeoffAirport.gpsLongitude + (slider.value / 1000)
+        lat: flight.value.takeoffAirport.gpsLatitude,
+        lng: flight.value.takeoffAirport.gpsLongitude
       }
   }];
 
-  for (const poi of trackWithGPS.value) {
+  for (const poi of poisWithGPS.value) {
     path.push({
       label: poi.pointOfInterest.name,
       position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
@@ -47,33 +46,93 @@ const pointsOfInterests = computed(() => {
 });
 
 
-const mapPhotos = computed(() => {
-  return flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude)
-});
+const gpxTrack = flight.value.gpxTrack;
 
 const displayMap = computed(() => {
   return (
-    !!flight.value.gpxTrackUrl ||
+    !!gpxTrack ||
     mapPhotos.value.length > 0 ||
-    trackWithGPS.value.length > 0 ||
+    poisWithGPS.value.length > 0 ||
     flight.value.landingAirport.id !== flight.value.takeoffAirport.id
   )
 });
 
+let chartSpeedData, chartAltitudeData = null;
+if (gpxTrack) {
+  const chartLabels = gpxTrack.time.map(t => {
+    const datetime = new Date(t);
+    return datetime.getHours() + ":" + datetime.getMinutes();
+  });
+  chartSpeedData = {
+    labels: chartLabels,
+    datasets: [{
+      backgroundColor: "#38bd3e",
+      borderColor: "#38bd3e",
+      label: "Rychlost (km/h)",
+      data: gpxTrack.speed,
+      pointRadius: 1,
+    }]
+  };
+
+  chartAltitudeData = {
+    labels: chartLabels,
+    datasets: [{
+      backgroundColor: "#9ae3ff",
+      borderColor: "#9ae3ff",
+      label: "Nadmořská výška letu (m)",
+      data: gpxTrack.altitude,
+      pointRadius: 1,
+    }]
+  };
+
+  if (gpxTrack.terrainElevation.length > 0) {
+    chartAltitudeData.datasets.push(
+      {
+        backgroundColor: "rgba(148,94,40,0.7)",
+        borderColor: "#945e28",
+        label: "Nadmořská výška země (m)",
+        data: gpxTrack.terrainElevation,
+        fill: true,
+        pointRadius: 1,
+      });
+  }
+}
+
+
+const currentPositionMarker = ref(null);
+const drawCurrentPositionMarker = (e) => {
+  const res = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: false},);
+  if (res.length === 0) {
+    currentPositionMarker.value = null;
+    return;
+  }
+  const idx = res[0].index;
+  currentPositionMarker.value = flight.value.gpxTrack.coordinates[idx];
+}
+
+const chartOptions = {
+  plugins: {
+    tooltip: {
+      mode: 'index',
+      intersect: false,
+    }
+  },
+  onClick: drawCurrentPositionMarker,
+  onHover: drawCurrentPositionMarker,
+}
 </script>
 
 <template>
   <MapWithMarkers
     v-if="displayMap"
     style="width: 100%; height: 500px;"
-    :gpx-track-url="flight.gpxTrackUrl"
+    :gpx-track="flight.gpxTrack?.coordinates || []"
     :markers="pointsOfInterests"
+    :highlight-position="currentPositionMarker"
     :photos="mapPhotos"
   />
 
-  {{ pointsOfInterests }}
+  <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
+  <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
 
-  {{ slider }}
-
-  <q-slider v-model.number="slider" :min="-100" :max="100" />
 </template>