add distance to route

src/pages/routes/Route.vue

@@ -28,13 +28,17 @@
             />
             <yandex-map-controls :settings="{ position: 'right top', orientation: 'vertical' }">
               <yandex-map-control>
-                  <div class="info">
+                  <div class="info" v-if="clickCoordinates.length <= 1">
                       Вы можете добавлять новые точки<br> на карту путём клика на неё
                   </div>
+
+                  <div class="info" v-if="clickCoordinates.length > 1">
+                      Отмеченная дистанция: {{calculateTotalDistance()}} км
+                  </div>
               </yandex-map-control>
               <yandex-map-control-button
                   v-if="clickCoordinates.length"
-                  :settings="{ background: 'blue', color: '#fff', onClick: () => downloadAsCSV()}"
+                  :settings="{ background: 'blue', color: '#fff', onClick: () => downloadAsGPX()}"
               >
                   Выгрузить
               </yandex-map-control-button>
@@ -57,10 +61,7 @@
   </template>
   <script setup lang="ts">
   
-  import { AxiosResponse, AxiosInstance } from "axios";
-  import { ref, inject, shallowRef  } from 'vue';
-  import { useToast } from "vuestic-ui/web-components";
-  import { useRouter } from "vue-router";
+  import { ref, shallowRef  } from 'vue';
   
   import type { LngLat, YMap } from '@yandex/ymaps3-types';
   import { 
@@ -75,9 +76,6 @@
     YandexMapListener, } from 'vue-yandex-maps';
 
   
-  const { push } = useRouter();
-  const axiosPublic= inject('axiosPublic') as AxiosInstance;
-  const { init } = useToast();
   const mapCenter = ref([30.31413, 59.93863]);
   const height = `${window.innerHeight}px`;
   
@@ -92,8 +90,41 @@ const toGPX = () => {
   }
   return `<?xml version="1.0" encoding="UTF-8" standalone="no" ?><gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="cycle-rider.ru.ru" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd"><metadata><name>cycle-rider.ru</name><time>${date}</time></metadata><trk><name>cycle-rider.ru</name><trkseg>${content}</trkseg></trk></gpx>`;
 };
- 
-const downloadAsCSV = () => {
+const EARTH_RADIUS_KM = 6371; // Средний радиус Земли в километрах
+
+function calculateTotalDistance(): number {
+    if (clickCoordinates.value.length < 2) return 0;
+    
+    let totalDistance = 0;
+    
+    for (let i = 1; i < clickCoordinates.value.length; i++) {
+        const [lon1, lat1] = clickCoordinates.value[i - 1];
+        const [lon2, lat2] = clickCoordinates.value[i];
+        totalDistance += calculateHaversineDistance(lon1, lat1, lon2, lat2);
+    }
+    
+    return Math.round(totalDistance * 10) / 10;
+}
+
+function toRadians(degrees: number): number {
+    return degrees * Math.PI / 180;
+}
+
+function calculateHaversineDistance(lon1: number, lat1: number, lon2: number, lat2: number): number {
+    const φ1 = toRadians(lat1);
+    const φ2 = toRadians(lat2);
+    const Δφ = toRadians(lat2 - lat1);
+    const Δλ = toRadians(lon2 - lon1);
+
+    const a = Math.sin(Δφ / 2) ** 2 
+             + Math.cos(φ1) * Math.cos(φ2) 
+             * Math.sin(Δλ / 2) ** 2;
+    
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    
+    return EARTH_RADIUS_KM * c;
+}
+const downloadAsGPX = () => {
   const gpx = toGPX();
 
   const blob = new Blob([gpx], { type: "text/xml" });